When to use 'Array.prototype' and when to use 'this' in JavaScript?

Question

Let's take this example from The Good Parts book:

Array.method('unshift', function () {
    this.splice.apply(this,[0,0].concat(Array.prototype.slice.apply(arguments)));
    return this;
});

Why did the author use this.splice in one place and Array.prototype.slice in other?

I tried swapping out this and Array.prototype with each other and got errors like the following:

TypeError: Cannot read property 'slice' of undefined

but I am still not sure about, how to know when to should use this or Array.prototype.

This book was never a very good way to start with JavaScript, but now it's **severely** out of date (almost a decade old). I would strongly recommend that you find a better book to work with. — , Dec 18 '16 at 15:54
@torazaburo but I've picked this book up, after reading it as a recommended book from various sources. — Rajat Saxena, Dec 18 '16 at 15:59
Sorry, but this book is a collection of things which are irrelevant, obsolete, and in many cases just wrong (today). To make an analogy with English, it's closer to Chaucer than Shakespeare. It is primarily of archaeological interest. Most importantly, it completely omits very important things which are used by modern JS programmers every single day of their lives. — , Dec 18 '16 at 16:15
@torazaburo what other book would you recommend, provided that I'm already 9 chapters down from the book and this was my first encounter with JS? — Rajat Saxena, Dec 18 '16 at 16:19
I don't know JS books very well, but "You Don't Know JS" seems to be well-regarded. Also "Speaking JavaScript" by Axel Rauschmayer (then follow that up with his ES6 book). — , Dec 19 '16 at 14:39

T.J. Crowder · Accepted Answer · 2016-12-18T13:13:40.307

In the first call, this refers to the array on which unshift was called, and so it inherits splice from Array.prototype.

In the second call, though, the code uses slice on something that isn't an array (the arguments pseudo-array, which doesn't have a slice method). So in that case, Crockford accessed the method via Array.prototype.

Technically, he could have used this.slice in the second location, like this:

Array.method('unshift', function () {
    this.splice.apply(this,[0,0].concat(this.slice.apply(arguments)));
    return this;
});

...but it probably would have been misleading, since the second call has nothing to do with the current array referenced by this.

@RajatSaxena: My pleasure. I've removed something misleading above (the code is using `splice` and `slice`, but in my original answer, I'd mistakenly thought it used `splice` twice). — T.J. Crowder, Dec 18 '16 at 13:14

score 1 · Answer 2 · edited Dec 06 '19 at 21:11

Sometimes it is easier to visualise the relationship so you realise that in many cases we have foo.bar === Foo.prototype.bar; // true

On creation of an instance foo, the prototype property of the constructor Foo gets set as a special reference of foo (__proto__), where if you try to access a property which does not exist directly on foo the next place that property is looked for is through that reference.

This means when you expect foo to not have been modified in a way that would hide a property from that object, it doesn't really matter whether you try to look up via foo.bar or Foo.prototype.bar as it is the same thing.

However, as you can see, not everything will have the same __proto__ path, so you couldn't assume obj.slice would exist, for example. This means if you don't have an Array instance but you want to slice it, you have to reference slice through a way you know exists, such as Array.prototype.slice

When to use 'Array.prototype' and when to use 'this' in JavaScript?

2 Answers2