The introduction

Prototype is a difficult concept to understand in JavaScript. There are many properties related to prototype. Objects have __proto__ attributes, functions have prototype attributes, and prototype objects have constructor attributes.

First prototype

In JavaScript, the Prototype is also an object, through the Prototype can realize the object attribute inheritance, JavaScript objects contain a [[Prototype]] internal attribute, this attribute corresponds to the Prototype of the object. [[Prototype]] is an internal property of the object and cannot be accessed directly. To make it easier to view prototypes of an object, __proto__ is a nonstandard accessor (not supported by all browsers, check it out if you’re interested) provided in Firefox and Chrome. Within the stereotype object exists the constructor property, which is the constructor for all instances that point to the stereotype object

Explicit and implicit archetypes

  • prototypeMay be called an explicit prototype:To highlight:prototypeIs a property unique to FunctionPay attention to isUnique!!
  • __proto__Can be called implicit archetype:To highlight:__proto__Is a property that every object has, and functions are also objects in nature

The rules

In JavaScript, every function has a prototype property. When a function is used as a constructor to create an instance, the value of the function’s Prototype property is assigned as a prototype to all object instances (that is, to set the instance’s __proto__ property). In other words, The prototype of all instances references the constructor’s Prototype property.

// constructor
function Dog(name,age) {
  this.name = name;
  this.age = age;
}
// Create two instances (objects). Why are they objects
let black = new Dog('black'.3);
let yellow = new Dog('yellow'.2);
console.log(Dog.prototype);
console.log(yellow.__proto__);
console.log(yellow.__proto__ === Dog.prototype); // The true instance's prototype points to the constructor's prototype property
Copy the code

What did New do

  1. Creates an empty JS object (that is {})
  2. __proto__ points the empty object’s prototype to the constructor’s prototype
  3. Use empty object as constructor context (change this to point to)
  4. The constructor has a return value judgment
// I'm at my wit's end
function mockNew(fn) {
    let obj = {}; // 1. Create an empty object
    obj._proto_ = fn.prototype; // 2. Point the empty object's prototype to the constructor's prototype
    let res = fn.call(obj); // 3. Use an empty object as the context for the constructor (change this to point to)
    // 4. Check whether the constructor returns a value
    if (typeof (res) == "object" || typeof (res) == "function") {
        return res;
    }
    return obj;
}
Copy the code

conclusion

  • [[Prototype]] __proto__ in the browser
  • Noun description – Prototype object: constructor’s prototype property

Prototype chain

Because every object has a prototype, the prototype of the object points to the parent of the prototype object, and the parent of the prototype points to the parent of the parent, the prototype chain is formed by the layers of the prototype.