0

This is a question about JavaScript Prototype Chaining.

I've read some documentation about this, and the syntax doesn't really make much sense to me.

https://wildlyinaccurate.com/understanding-javascript-inheritance-and-the-prototype-chain/

The way I've understood JavaScript Prototypes is essentially some syntactic candy that wraps around a function call which just adds properties to a new object named this.

Basically, turning what you might do in JavaScript without prototypes from this:

function PsuedoClass(arg0, arg1){
    var this = {};

    this.arg0 = arg0;
    this.arg1 = arg1;

    return this;
}

var obj = PsuedoClass(0, 1);

into what we all know and love:

function PsuedoClass(arg0, arg1){
    this.arg0 = arg0;
    this.arg1 = arg1;
}

var obj = new PsuedoClass(0, 1);

So naturally, the way one might expect to do inheritance in JavaScript would essentially to be call the constructor functions in a chain. It only makes sense, Apply all the properties from both PsuedoClasses into one object.

The whole obj.prototype thing just seems out of the blue to me. It seems to destroy the natural flow that JavaScript seems to lead you on. It would be much more intuitive if just using PsuedoClass.call(this, arg0, arg1); would be enough.

And it almost does, except then javascript's instanceof operator fails.

And there's more arguments than just increased readability that JavaScript's obj.prototype should be removed.

It simplifies the JavaScript Inheritance, reducing things from 2 lines to 1.

If they'd make PsuedoClass.call(this, arg0, arg1) cause this to be an instanceof PsuedoClass, it'd make it possible to do things like this:

function CustomRowClass(){
    this.someCustomMethod = function(){}
}

var tableRow = document.getElementById('myRow');
CustomRowClass.call(tableRow);

console.log(tableRow instanceof CustomRowClass); //returning true
tableRow.someCustomMethod();

I'm really not trying to bash JavaScript as a whole here, I think the language does make a lot of sense in many ways, its just this Prototype chaining is not what I expected it to be, and it doesn't really make intuitive sense.

Am I missing something here, is there a way to understand this obj.prototype in an intuitive way? Everything about it just throws things off for me.

Or is there a simple way to use PsuedoClass.call(this, arg0, arg1); and get the desired instanceof behavior?

HumbleWebDev
  • 555
  • 4
  • 20
  • "*Prototypes is essentially some syntactic candy that wraps around a function call which just adds properties to a new object named this*" - well, no. Absolutely not. None of the code in your question actually uses prototypes. – Bergi Jun 13 '17 at 23:06
  • It sounds like you want to look into the inheritance model (ES6 extends, super), using Object.create() to apply the prototype chain to an inherited object? I'm having trouble understanding your question – Sterling Archer Jun 13 '17 at 23:08
  • "*the way one might expect to do inheritance in JavaScript would essentially to be call the constructor functions in a chain*" - yes, that's a totally sensible approach at inheritance. And indeed you will do that to execute all the initialisation logic. Even the article you read does this: `function Cat(name) { Animal.call(this, name); }`. However, this doesn't yet deal with prototype inheritance, which is about property lookup, at all. – Bergi Jun 13 '17 at 23:08
  • 1
    [Look down at the example: B shall inherit from A](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) – Sterling Archer Jun 13 '17 at 23:08
  • The code in the article "is setting Cat’s prototype to an instance of Animal", which is what you [absolutely should not do](https://stackoverflow.com/questions/12592913/what-is-the-reason-to-use-the-new-keyword-here). You might want to learn from some other tutorial. – Bergi Jun 13 '17 at 23:12
  • 1
    @Bergi well, the domain name *is* `wildlyinacurate`, so.. – Sterling Archer Jun 13 '17 at 23:12
  • To clarify I just don't get the purpose of Object.prototype in javascript. It seems that chaining the constructor functions should do the trick. – HumbleWebDev Jun 13 '17 at 23:34
  • Have a look at the duplicate. The purpose of using prototype chains (regardless whether created with `new` from a constructor `.prototype`, or through `Object.create` directly) is to avoid copying the same values over and over to the properties of your object. – Bergi Jun 14 '17 at 00:08
  • I just don't understand why if you extend ClassA with SuperClass and do var x = ClassA, javascript will be true for x instanceof ClassA but not x instanceof SuperClass. It just doesn't make any sense to me. Isn't x supposed to be of type ClassA but also of type SuperClass? Or am I missing something here. – HumbleWebDev Jun 14 '17 at 01:33

0 Answers0