JavaScript prototype and constructor notes

Posted by comicrage on Mon, 02 Dec 2019 02:22:42 +0100

Sketch

This article is the author's understanding after reading the JavaScript object-oriented programming guide. It is just a sort of thinking on JavaScript prototype and multiple inheritance, not a basic knowledge explanation, suitable for understanding the prototype and inheritance, but not clear and thorough developers.
I hope that you can clear up the context of prototype and constructor by reading this article

Prototype

Learning archetypes, you need to understand

  • Instance object
  • Constructor
  • Prototype object

Observe the following code

function Person (){
    this.age = 20;
}
Person.prototype.gender = 'male';
var tom = new Person();    
tom.name = 'tom';
console.log(tom.name); // tom
console.log(tom.age); // 20
console.lot(tom.gender); // male
tom.constructor === Person; // true
tom.__proto__ === Person.prototype; // true

Prototype trap

function Dog(){
    this.tail = true;
}
var benji = new Dog();
var rusty = new Dog();
// Add method to prototype
Dog.prototype.say = function(){
    return 'woof!';
}
benji.say(); // "woof!"
rusty.say(); // "woof!"
benji.constructor === Dog; // true
rusty.constructor === Dog; // true
// At this point, everything is OK
Dog.prototype = {
    paws: 4,
    hair: true
}; // Complete coverage
typeof benji.paws; // "undefined"
benji.say(); // "woof!"
typeof benji.__proto__.say; // "function"
typeof benji.__proto__.paws; // "undefined"
// The prototype object cannot access the "new properties" of the prototype, but it still keeps in touch with the original prototype object through the mysterious connection \\\\\\\
// New instance
var lucy = new Dog();
lucy.say(); // TypeError: lucy.say is not a function 
lucy.paws; // 4
// At this point, proto points to the new prototype object
// Since the constructor is stored in the prototype object, the constructor property of the new instance can no longer be kept correct. At this time, it points to the Object()
lucy.constructor; // function Object(){[native code]}
// The constructor of the old instance is still correct
benji.constructor;
/* function Dog(){
    this.tail = true;
}*/
// If you want the constructor to be correct, you must set the constructor property to Dog in the new prototype object
Dog.prototype.constructor = Dog;

Prototype summary

  • The constructor property is in the Person.prototype object, which is the prototype object.
  • __The proto_uuuuattribute is created in the moment when Tom (instance) is new, pointing to the prototype object, Person.prototype
  • tom.constructor is the same as that accessed by Tom
  • __The proto? Attribute can only be used in a learning or debugging environment
  • The constructor can be regarded as a specification, not an actual one
  • When var tom = new Person() is executed, a new address space is opened to create and store the tom object, and then this of Person points to the tom object and executes the Person function.
  • Don't rely too much on the constructor property. It's uncontrollable.

Topics: Javascript Programming Attribute