<?xml version="1.0" encoding="UTF-8"?> 
<rss version="2.0"
        xmlns:content="http://purl.org/rss/1.0/modules/content/"
        xmlns:wfw="http://wellformedweb.org/CommentAPI/"
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:atom="http://www.w3.org/2005/Atom"
        xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
        xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
        >
<channel>
  <title>asgaard</title>
  <description></description>
  <link>https://blog.asgaard.co.uk/2012/11/13/javascript-prototype-gotchas</link>
  <lastBuildDate>Thu, 30 Apr 26 15:35:40 +0000</lastBuildDate>
  <language>en</language>
  <count>1</count>
  <offset>0</offset>
      <item>
    <title>JavaScript prototype gotchas</title>
    <link>https://blog.asgaard.co.uk/2012/11/13/javascript-prototype-gotchas</link>
    <pubDate>Tue, 13 Nov 12 22:48:13 +0000</pubDate>
    <guid>https://blog.asgaard.co.uk/2012/11/13/javascript-prototype-gotchas</guid>
    <description><![CDATA[
<p>
JavaScript is a strange language:
<p>
<pre>MyClass = function() {};

MyClass.prototype.myProperty = [];

var a = new MyClass();
var b = new MyClass();

a.myProperty[0] = 'xyz';

console.log(b.myProperty[0]); // prints 'xyz'</pre>
<p>
The issue here is one of prototypes and references. In most OO languages, defining a property on a class is done so in such a way that each instance of that class has a property completely independent of all other instances. Even if it&#039;s a reference, it still gets a reference to its *own* value.
<p>
In JavaScript, things are a bit wacky. Mostly they work as normal (with strange syntax), but occasionally things like this trip you up. It happens because, as you can see, both a and b have a reference to the same object; the one assigned to the prototype. This is only a problem with &#039;rich&#039; types like arrays and objects, immutable types like string and primitives sort themselves out.
<p>
The way to avoid it is to assign &#039;myProperty&#039; within the constructor:
<p>
<pre>MyClass = function() {
</pre>[...]]]></description>
    <content:encoded><![CDATA[
<p>
JavaScript is a strange language:
<p>
<pre>MyClass = function() {};

MyClass.prototype.myProperty = [];

var a = new MyClass();
var b = new MyClass();

a.myProperty[0] = 'xyz';

console.log(b.myProperty[0]); // prints 'xyz'</pre>
<p>
The issue here is one of prototypes and references. In most OO languages, defining a property on a class is done so in such a way that each instance of that class has a property completely independent of all other instances. Even if it&#039;s a reference, it still gets a reference to its *own* value.
<p>
In JavaScript, things are a bit wacky. Mostly they work as normal (with strange syntax), but occasionally things like this trip you up. It happens because, as you can see, both a and b have a reference to the same object; the one assigned to the prototype. This is only a problem with &#039;rich&#039; types like arrays and objects, immutable types like string and primitives sort themselves out.
<p>
The way to avoid it is to assign &#039;myProperty&#039; within the constructor:
<p>
<pre>MyClass = function() {
    this.myProperty = [];
};</pre>
<p>
It&#039;s strange that JSLint doesn&#039;t pick up on this.
<p>
For what it&#039;s worth, gjslint (Google&#039;s closure linter) will emit:<pre>
Line 3, E:0100: Member MyClass.prototype.myProperty cannot have a non-primitive value
</pre>
<p>
but I find Google&#039;s linter is generally not as universally useful as JSLint (it&#039;s better for Closure development though, i.e. if you&#039;re planning to feed your source through the Closure Compiler).]]></content:encoded>
  </item>
  </channel>
</rss>