2021.2.1 update

Seeing a diagram makes it feel more clear.

function Person (){  // constructor
}
Person.prototype.name = '1';
var person = new Person(); Person.prototype is the prototype of this object
Copy the code

Prototype of the instance object person.prototype

The __proto__ property of the instance object

conclusion

person.__proto__ === Person.prototype
Copy the code

In addition, the constructor property in the stereotype points to the constructor.

function Person() {}console.log(Person === Person.prototype.constructor); //true
Copy the code

Update diagram

function Person() {}var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// Learn an ES5 method to get a prototype of an object
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
Copy the code

Prototype (person.prototype/person__proto__) is also an object, and its prototype (the prototype of the prototype) can also be obtained with __proto__.

Update diagram

Object. Prototype What is the Object. Prototype?

Object.prototype.__proto__  Object. Prototype Has no prototype
Copy the code

Update diagram

The chain of connected prototypes is the prototype chain, the blue line.

Learning links: github.com/mqyqingfeng…

Prototype attributes and __proto__ attributes

class F {}class C extends F {
}

C.__proto__ === F // true
C.prototype.__proto__ === F.prototype // true
Copy the code
  1. The __proto__ attribute of a subclass, which indicates constructor inheritance, always points to the parent class.
  2. The __proto__ attribute of the prototype attribute, which indicates method inheritance, always points to the Prototype attribute of the parent class.

To understand:

As an object, the prototype of a subclass is its parent; That is: c. __proto__ === F as a constructor, the protoobject of the subclass is an instance of the protoobject of the parent class. C.prototype.__proto__ === F.prototypeCopy the code

So what is prototype and what is __proto__?

__ proto __

Every JavaScript object has a second JavaScript object (or null ,
but this is rare) associated with it. This second object is known as a prototype,
and the first object inherits properties from the prototype.
Copy the code

That is, every JS object must correspond to a prototype object, and inherit properties and methods from the prototype object.

The value of an object’s __proto__ attribute is the prototype object to which it corresponds. 

var one = {x: 1};
one.__proto__ === Object.prototype The ES specification defines the prototype for Object literals as object.prototype

var two = new Object(a); two.__proto__ ===Object.prototype // Read on
Copy the code

So what is Prototype?

prototype

Only functions have the Prototype attribute

When you create a function, JS automatically adds a Prototype attribute to the function, whose value is an object with the constructor attribute.

Once you call this function as a constructor (via the new keyword), THEN JS will create an instance of that constructor for you, The instance inherits all the properties and methods of the Prototype constructor (the instance does this by setting its __proto__ to the prototype constructor).

function a() {} // Constructor a can use prototype to store shared properties and methods
var b = new a(); //b is the instance object
b.__proto__ === a.prototype; // The object points to its constructor's prototype via __proto__
Copy the code

supplement

Object. Prototype is the top of the prototype chain, from which all objects inherit methods and properties including toString.

Reference link: wangdoc.com/es6/class-e… Github.com/creeperyang…