The basic concept

In javascript, functions can have attributes. Each function has a special property called prototype. Each instance Object has a prototype Object [[prototype]] / __proto__ / object.getProtoTypeof (object1). The process of finding the prototype object level by level is called the prototype chain

The prototype

Each function has a special property called prototype, which defaults to an empty object and can be overridden

function fn1() {}
console.log(fn1.prototype)
Copy the code

Rewriting a prototype results in a constructor pointing error

fn1.prototype = {}
console.log(fn1.prototype)
Copy the code

Redirect constructor to the current constructor

fn1.prototype.constructor = fn1
Copy the code

A prototype object

The prototype object for each Function points to the prototype for Function

function fn() {}
console.log(fn.__proto__ === Function.prototype)    // true
Copy the code

Each Array prototype object points to the Array prototype

const arr = []
console.log(arr.__proto__ === Array.prototype)    // true
Copy the code

The prototype of every Object (except new) points to the prototype of Object

const obj = {}
console.log(obj.__proto__ === Object.prototype)    // true
Copy the code

The prototype objects of both Function and Array prototypes point to the prototype of Object

console.log(Function.prototype.__proto__ === Object.prototype)    // true
console.log(Array.prototype.__proto__ === Object.prototype)    // true
Copy the code

inheritance

Inheritance is implemented through object impersonation (call/apply)

function Person(name, age, sex) { this.name = name this.age = age this.sex = sex } Person.prototype.myself = function() { console.log('my name is' + this.name) } function Status(name, age, sex, student) { Person.call(this, name, age, Sex) this.student = student} status.prototype. Duties = function() {console.log(' my duty is: study hard, make progress every day! ')} const s1 = new Status('Tom', 20, 'male ', '20041002') s1.duties() // s1.myself(); You can only inherit properties and methods from constructors, not from prototypesCopy the code

Object impersonation (call/apply) + instantiation constructor pattern implementation inheritance

function Person(name, age, sex) { this.name = name this.age = age this.sex = sex } Person.prototype.myself = function() { console.log('my name is' + this.name) } function Status(name, age, sex, student) { Person.call(this, name, age, sex) this.student = student } Status.prototype = new Person() Status.prototype.constructor = Status Duties = function() {console.log(' My duty is to study hard and make progress every day! ')} const s2 = new Status('Tom', 20, 'male ', '20041002') console.log(s2) s2.duties() s2.myself() multi-instantiated once constructorCopy the code

Object impersonation (call/apply) + object.create ()

function Person(name, age, sex) { this.name = name this.age = age this.sex = sex } Person.prototype.myself = function() { console.log('my name is' + this.name) } function Status(name, age, sex, student) { Person.call(this, name, age, sex) this.student = student } Status.prototype = Object.create(Person.prototype) Status.prototype.constructor = Status Duties = function() {console.log(' My duty is to study hard and make progress every day! ')} const s3 = new Status('Tom', 20, 'male ', '20041002') console.log(s3) s3.duties() s3.myself() missing an instantiation of the constructor in the above solutionCopy the code

Prototype chain

function Person(name, age, sex) { this.name = name this.age = age this.sex = sex } Person.prototype.des = 'Person class' Person.prototype.myself = function() { console.log('my name is' + this.name) } function Status(name, age, sex, student) { Person.call(this, name, age, sex) this.student = student } Status.prototype = Object.create(Person.prototype) Status.prototype.constructor = Status Duties = function() {console.log(' My duty is to study hard and make progress every day! } const s4 = new Status('Tom', 20, 'male ', '20041002') console.log(s4. Des) console.log(s4. Type) S4. I can't find it in status.prototype I can't find it in Person. Prototype I can't find it in DES I can't find it in Type I can't find it in null I can go to the top of the prototype chain, Finally, return undefined for attributes that cannot be foundCopy the code

Prototype chain diagram

[Notes are not easy, if it is helpful to you, please like, thank you]