1. Constructors create objects

function Person(){}
let person = new Person()
let person1 = new Person()
person.name = 'lisa'
console.log(person.name)
console.log(person1.name)
Copy the code

Person is the constructor. Use new to create the Person, person1 instance objects

2. Function attribute prototype

Each function has a Prototype attribute

The function’s prototype property points to an object that is the prototype of the Person and Person1 instances derived from the constructor new

3. The __proto__ attribute of the object

Every object has a __proto__ attribute (except null) that points to the object’s prototype

console.log(person.__proto__ === Person.prototype)
Copy the code

4. The constructor property

Combining points 2 and 3, the constructor’s prototype property and the object’s __proto__ point to the object’s prototype,

Does the stereotype have properties pointing to constructors and instances?

The constructor property of the stereotype points to the associated constructor; No attribute pointing to an instance (because constructors can create multiple instances)

console.log(Person.prototype.constructor === Person)

The constructor, instance, and stereotype relationships are now understood

5. Understanding of prototype chain

Each object checks its private properties as it reads them, returns the private properties if they exist, and looks for the Person.__proto__ prototype object if they don’t.

The prototype of the prototype (the prototype Object is generated through the Object constructor), with null at the top of the prototype chain.

Github.com/mqyqingfeng…

6. Prototype inheritance

Relationships between objects, if each object is a separate property and method, and properties and methods are common across objects, are a serious resource drain, so stereotype inheritance is used

Example 1: Constructor inheritance (pointing to the corresponding stereotype object)

function An(){} An.prototype.name = 'lili' An.prototype.run = function(){ console.log(this.name + 'run') } function {} bn. constructor = bn.prototype (){} bn. constructor = bn.prototype (){} bn. constructor = bn.prototype (); Let b = new Bn() console.log(b.name)Copy the code

Problem: Bn’s prototype object is modified to directly reflect the prototype object of An

Bn.prototype.name ='lisa'
let a = new An()
console.log(a.name)
Copy the code

Tuning: Bn’s prototype object points directly to An instance of An

function An(){} An.prototype.name = 'lili' An.prototype.run = function(){ console.log(this.name + 'run') } function Bn () {} Bn. The prototype = new An (Bn). The prototype. The constructor = Bn / / note: Once the prototype is pointed, Bn.prototype.name = 'lisa' let b = new Bn() let a = new An() console.log(b.name,a.name)Copy the code

Example 2: Object inheritance

Let old = {name:"old",age:18} let one = {} one.__proto__ = old, Log (one.name) one.__proto__. Name = 'new' console.log(one.name,old.name)Copy the code

Problem: Modifying the prototype of one directly affects Old

Object.create() creates a new Object from the specified prototype Object without affecting the prototype

let old = {name:"old",age:18}
let one = {}
one.__proto__ = Object.create(old)
one.__proto__.name = 'new'
console.log(one.name,old.name)
Copy the code

7. The prototype approach

Sets the prototype object method

  • obj.__proto__=prototypeObj
  • Object.setPrototypeOf(obj, prototypeObj)
  • Object.create(prototypeObj)

Prototype detection: The isPrototypeOf() method is used to determine whether this object is a prototype of a parameter object