JSFiddle - React, Tailwind, and code Playground

by javascriptenlightenment

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<!-- disregard this pane, html is shown in the "result" pane -->




































































<h4><strong>&larr; Code Example from <a href="http://www.javascriptenlightenment.com/" target="_blank">JavaScript Enlightenment Book</a> by <a href="http://www.codylindley.com" target="_blank">Cody Lindley</a></strong></h4>

<p>JavaScript code is executed on page load. Click the "Run" button in the top bar to re-run the JavaScript code. Output is logged to the <a href="http://getfirebug.com/firebuglite" target="_blank">Firebug Lite</a> console below &darr;.</p>

JavaScript

var Foo = function Foo(){};

Foo.prototype.x = 1;

var FooInstance = new Foo();

console.log(FooInstance.x); // logs 1, as you think it would

// now let’s replace/override the prototype object with a new Object() object
Foo.prototype = {x:2};

console.log(FooInstance.x); // logs 1, WHAT? Shouldn't it log 2, we just updated prototype
/* FooInstance still references the same state of the prototype object that 
was there when it was instantiated. */

// create a new instance of Foo()
var NewFooInstance = new Foo();

// the new instance is now tied to the new prototype object value (i.e. {x:2};)
console.log(NewFooInstance.x); // logs 2