Prototype and prototype chain

The constructor

A stereotype is inseparable from a constructor

1. Constructors are divided into instance members and static members

Instance members: Instance members are the members added through this inside the constructor and can only be accessed through the instantiated object

Static member: A member added to the constructor itself that can only be accessed through the constructor

function Star(name,age){
   // Instance member
   this.name = name
   this.age = age
}
// Static member
Star.sex = 'woman'

let stars = new Star('little red'.18)
console.log(stars);   //Star{name:' red ', age:18}
console.log(stars.sex)  //undefined

console.log(Star.name)  // Instance members cannot be accessed directly through constructors
console.log(Star.sex)  // Women can access static members through the constructor
Copy the code

2. The instantiation

 function Father(name){
   this.name = name
 }
 let son = new Father('lisa')
 console.log(son)   //{name:'lisa'}
Copy the code

Son is a new object

2.1

The process of new a new object

1. Create an empty son{}

2. Prepare prototype link for empty object

3. Rebind this so that this of the constructor refers to the new object father.call (this).

4. Assign a value to the new object property

5. Return this, the new object now has the constructor’s methods and properties

2.2 Are methods shared for each instance

Methods defined on constructors do not share method shares added through stereotypes

//1) Methods defined on constructors are not shared
 function Star(){
   this.sing = function(){
   console.log('I love singing')}}let stu1 = new Star();
 let stu2 = new Star();
 stu1.sing() // I love singing
 stu2.sing() // I love singing
 console.log(stu1.sing === stu2.sing)  //false
 
 2Method sharing created on the prototypefunction Star(name){
   this.name = name
 }
 Star.prototype.sing = function(){
  console.log(this.name + 'Love to sing')}let stu1 = new Star('little red')
 let stu2 = new Star('xiao LAN')
 stu1.sing()   // Xiao Hong loves singing
 stu2.sing()   // Xiao LAN loves singing
 console.log(stu1.sing === stu2.sing)  //true
Copy the code

2.3 If the attributes of the instance are of basic type, there is no sharing problem

 let stu1 = new Star('little red')
 let stu1 = new Star('little red')
 console.log(stu1.name === stu2.name); //true
 
 let stu1 = new Star('little red')
 let stu1 = new Star('xiao LAN')
 console.log(stu1.name === stu2.name); //false
Copy the code

2.5 Define rules for constructors

Public properties are defined in constructors, and public methods are put on stereotypes

The prototype

1. What is the prototype

Prototype is a prototype. It’s an object

2. Prototyping

The purpose of archetypes is to share methods

3. The orientation of this in the prototype

In the stereotype, this refers to the instance

Prototype chain

1. What is the prototype chain

The process of linking prototypes to each other is called prototype chain

2. The role of prototype chains

Prototype objects can use the properties and methods of the prototype object because the object has a __proto__ prototype

function Star(name,age){
  this.name = name
  this.age = age
}
Star.prototype.dance = function(){
  console.log("I'm dancing." + this.name)
}
let obj = new Star("Xiao Ming".24)
console.log(obj.__proto__ === Star.prototype)  //true
Copy the code

3. Search method of prototype

1) First check whether the obj object has a dance method, and if so, execute it

2) If the dance method is not available, look for the constructor prototype object

3) If no dance is found in the prototype page, look for the dance method on the object prototype object

4) If there is no more, an error will be reported

The interview questions

1)

Object.prototype.__ptoto__    //null
Function.prototype.__proto__  //Object.prototype
Object.__proto__   //Function.prototype
Copy the code

Implement the Peoson and Student objects as follows

1. The Student carry on the Person

2.Person contains an instance variable name contains a method printName

3.Student contains an instance variable score contains a method printScore

4. All Person and Student objects share a method

  function Person (name){
    this.name = name
    this.printName = function(){
    console.log(this.name)
    }
  }
  
  Person.prototype.commentMethods = function(){
    console.log("A shared approach.")}function Student(name,score){
    Person.call(this,name)
    Student.printScore = function(){
     console.log(this.score)
    }
  }
  
  Student.prototype = new Person();
  
  let person = new Person('Ming')
  let student = new student('xiao LAN'.100)
  //false
  console.log(student.printName === person.printName)
  //true
  console.log(student.commentMethods === person.commentMethods)
Copy the code