Prototype Chain

2021/4/29

  • Through prototypes, objects in JavaScript inherit features from other objects; This inheritance mechanism is different from that of classical object-oriented programming languages.

Prototype-based languages

  • JavaScript is often described as a prototype-based language — one prototype object per object

  • Objects inherit methods and properties from their prototypes as templates. A stereotype object may also have a stereotype from which it inherits methods and properties, layer by layer, and so on.

  • This relationship, often referred to as the Prototype chain, explains why one object has properties and methods defined in other objects.

  • To be precise, these properties and methods are defined on prototype properties above the Object’s constructor functions, not on the Object instance itself.

Establish a connection

  • In traditional Object Oriented Programming (OOP), a “class” is first defined, and then when an Object instance is created, all properties and methods defined in the class are copied into the instance.

  • This is not replicated in JavaScript — instead, a link is made between the object instance and its constructor (which is the __proto__ property, derived from the constructor’s prototype property), and then those properties and methods are found in the constructor by going up the prototype chain.

  • Note: __proto__ is an attribute on every instance, and prototype is an attribute on the constructor, i.e

    • Object.getPrototypeOf(new Foobar())===new Foobar().__proto__===Foobar.prototype
Copy the code

Ii. Search process

1. Create an instance object

  • function doSomething(){}
doSomething.net="ninini";
doSomething.prototype.foo = "bar"; 


var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value";
Copy the code

  • As you can see, the constructor in the prototype constructor refers to itself. The constructor inherits from the function and the prototype object inherits from the object

2. Follow the prototype chain

  • When you visitdoSomeInstancingIs a property that the browser first looks updoSomeInstancingWhether or not this property exists
  • ifdoSomeInstancingWithout that property, then the browser will be indoSomeInstancing 的 __proto__Look for this property in dosomething. prototype.
  • If doSomeInstancing__proto__(aka doSomething. Prototype) Have this property, then doSomeInstancing it__proto__The property on is used.
  • Otherwise, the browser will look at doSomeInstancing__proto__ 的 __proto__And see if it has this property.

3. Prototype property: Where inheritance members are defined

4. create()

  • var person2 = Object.create(person1);
Copy the code

  • The ** object.create ()** method creates a new Object, using an existing Object to provide the __proto__ of the newly created Object. Here the Person2 object is created from the person1 prototype object

5. The constructor property

  • Each instance object inherits from the stereotype a constructor property that points to the constructor used to construct this instance object.

  • You can create another object instance with this constructor by adding a pair of parentheses (containing the required parameters) to the end of the constructor property. After all, the constructor is a function, so it can be called with parentheses; You can use this function as a constructor simply by adding the new keyword in front of it.

  • function Person(name) {
   this.name=name
}
let person1=new Person('1')
var person2 = new person1.constructor('2')
Copy the code

6. Modify the prototype

  • You’ll rarely see attributes defined in the Prototype attribute because it’s not flexible enough.

  • When you want to set stereotype property values based on some instance property values

  • Person.prototype.fullName = this.name.first + ' ' + this.name.last; // Note that this setting has no effect, because this points to window by defaultCopy the code
  • Person.prototype.fullName =function(){return this.name.first + ' ' + this.name.last; } // This sets this to refer to the instance object calling the method in the prototypeCopy the code