Prototype chain

We need to know before we can understand the prototype chainCustom constructorsandA prototype objectAs well asObject instance

Custom constructors

  • If we need to create an object like we do now, we might useLiteral methodorConstructor methodTo finish. What about now? We can do this using a custom function method based on the constructor method

Format:

functionThe function name (parameter1, the parameter2..){
    // Add attributes and methods to the object
    this. Attribute name = attribute value;// The constructor automatically creates the object and returns it, rather than manually creating and returning it.
}
/ / call
newThe function name ();Copy the code

example

function Animal(name,age){
    this.name = name;
    this.age = age
}
var obj = new Animal(); // Create an Animal instance object and return it to obj;
Copy the code

The Animal object created above is the custom constructor. Calling Animal with the new keyword and returning it to obj is an instance of Animal

Return value of custom constructor & contrast normal function

The return value

  • By default, returns the memory address of the instance of the newly created object (obj’s address in the previous example).
  • Return Refers to a data type, and returns the data of the referenced data type
  • Return Base data type, invalid operation, still returns the default value

The difference with ordinary functions

  • Call differently: Custom constructors are requirednewThe keyword
  • Difference in return value: The return value of a normal function is the content after the return in the function body

Prototype object & prototype chain

What is the prototype object? Each function we create has a Prototype property that points to an object. This object is called a prototype object

The stereotype object features: All properties and methods on the stereotype object are owned by the instance object created by the custom constructor

__proto__ of objects: Each object has a __proto__ attribute. This property points to the prototype object of the object

Said so much is not a little confused, above see the "prototype chain"!!Copy the code

Look at an example after this diagram to see if you understand ✈

function Animal(name) {
      this.name = name;
    }
    // Find the Animal prototype object using the Animal prototype property of the custom constructor
    Animal.prototype.eat = function () {
      console.log("Eat");
    }
    // Animal instance 1 and 2
    let p1 = new Animal("Monkey".4);
    let p2 = new Animal("Tiger".6);
     console.log(Animal.__proto__);// Animal is the same as Animal.
    console.log(p1);
    console.log(p2);
    console.log(p1.eat === p2.eat); // True indicates that the monkey and tiger are pointing to the same place
Copy the code

Prototype chain concept: When we access an object’s property, we first look up the object itself to see if it has the property. If not, go to the prototype object on that object. If not, continue to look for the prototype Object on the prototype Object until the prototype Object on Object

This points to the

Pay attention to

  • Within each function, there is a built-in variable: this
  • In most cases, this stores the caller of the current function
  • The this pointer is undefined at definition, and may not be the same in different cases

Several cases that This refers to

1. In global functions, this refers to window

function fn(){
    console.log(this)/ / points to the window
}
var fn = function(){
    console.log(this)/ / points to the window
}
fn();
Copy the code

2. In the method of the object, this refers to the object

var obj = {
    name:"Onion".run:function(){
        console.log(this)
    }
}
obj.run() // this points to obj
--------------------------------------------------------------------------
a.b.c.d() // This in d refers to c
Copy the code

3. In the event binding, this points to the event source

btn.onclick = function(){
    // This refers to the BTN element node.
--------------------------------------------------------------------------    
    fn();// This points to window (note)
}
Copy the code

4. In the custom constructor, this points to the new instantiated object

function Animal(name, age) {
    this.name = name;
    this.age = age;
}
var p = new Animal(1.2) // This points to the newly created instance object
Copy the code

5. In the timer function, this refers to the window

setTimeout(function(){
    / / this point to the window
},1000)
Copy the code

Sometimes we don’t want this pointing to follow the default rules, so we need to change this pointing

Modify the three methods this points to

1. call

Format: function. call(parameter one, parameter2, the parameter3,...) Parameters:1.The first argument, the inside of the functionthisThe first argument is who,thisTo whom)2.Pass the arguments to the function, starting with the second argument.Copy the code

2. apply

Format: function. Apply (parameter one,[array/pseudo-array]); Parameters:1.The first argument: inside the functionthisPoint to (who is the first argument,thisJust point to someone.)2.Second argument: array/pseudoarray. Each element in the array is an argument to the function.Copy the code

The above two methods will execute the function immediately after modification, so some cases are not applicable

3. bind

Format: function. bind(parameter one, parameter2, the parameter3.......) Parameters:1.The first argument: inside the functionthisPoint to (who is the first argument,thisJust point to someone.)2.Pass the arguments to the function, starting with the second argument. Return value: New function. The new function is exactly the same as the old function, only internalthisThe direction has changed. # # # # # # # # # # [key] not executed immediately function, can be used for event handling function and a timer function. # # # # # # # # # # # #Copy the code

conclusion

Stereotype chains and custom constructors are the basis for both stereotype inheritance and constructor method inheritance, which we’ll look at in the next article, as well as Es6 inheritance methods