Prototype chain

Let’s start with a diagram:

The concept of constructors, instances and prototype objects

1. Constructor

All functions in JS can be constructors, provided they are operated on by the new operator.

function Parent(){ this.name = 'parent'; } parent1 = new Parent();} parent1 = new Parent();Copy the code

Example 2.

Parent1 receives new Parent(), and parent1 can be called an instance;

3. Prototype objects

The constructor has a Prototype property, which points to an object that is the prototype of the instance created by calling the constructor, which in this case is person1.

parent1.__proto__ === Parent.prototype//true
Copy the code

Constructor, instance, prototype object relationship

  1. By applying the new operator to the JS function, you get an instance;
  2. The constructor initializes a prototype, which initializes a prototype object. How does the prototype object know which function initializes it? The original stereotype object has a constructor property that points to the constructor;
  3. So the key here is how does an instance object relate to a prototype object? The original instance object will have a __proto__ attribute that points to the prototype object corresponding to the constructor of the instance object;
  4. If the name attribute of an Object is not found in the current Object, then the __proto__ attribute will be searched until the name attribute of the Object is not found. Otherwise, as long as the name attribute is found, then the attribute exists. From here we can see that the relationship between JS objects and their superiors is like a chain, which is called the prototype chain;

As shown in figure:

How the new operator works

Implement the new four steps:

  • Create an empty object
  • Link to the prototype
  • Binding this value
  • Return a new object
Function newObj() {// create a new object let obj = {}; let Constructor = [].shift.call(arguments); // Link to the prototype (the prototype given to the new object obj points to the prototype of its Constructor) obj.__proto__ = Constructor. Prototype; // bind this let result = Constructor. Apply (obj,arguments); Return typeof result === "object"? result : obj }Copy the code

Verify:

var parent1 = newObj(Parent); Var parent1 = new Parent() parent1 instanceof Parent//trueCopy the code

Return typeof result === “object” Result: obj What if we just return a value of primitive type? See the examples:

The effect of using the new operator:

function Parent(name, age) {
this.name = name;
    this.strength = 60;
    this.age = age;
    return 'handsome boy';
}
var person = new Parent('Kevin', '18');
Parent.prototype.habit = "babit"
console.log(person.name) // Kevin
console.log(person.habit) // babit
console.log(person.strength) // 60
console.log(person.age) // 18
Copy the code

Do not judge the return result:

function Parent(name, age) {
this.name = name;
    this.strength = 60;
    this.age = age;
        return 'handsome boy';
}
Parent.prototype.habit = "babit"
function newObj() {
 let obj  = {};
 let Constructor = [].shift.call(arguments);
 obj.__proto__ = Constructor .prototype;
 let result = Constructor .apply(obj,arguments);
 return result
 }
var person = newObj(Parent,'Kevin', '18');
console.log(person.name) // undefined
console.log(person.habit) // undefined
console.log(person.strength) // undefined
console.log(person.age) // undefined
Copy the code

Add judgment:

function Parent(name, age) { this.name = name; this.strength = 60; this.age = age; return 'handsome boy'; } Parent.prototype.habit = "babit" function newObj() { let obj = {}; let Constructor = [].shift.call(arguments); obj.__proto__ = Constructor .prototype; let result = Constructor .apply(obj,arguments); Return typeof result === "object"? result : obj } var person = newObj(Parent,'Kevin', '18'); console.log(person.name) // Kevin console.log(person.habit) // babit console.log(person.strength) // 60 console.log(person.age) // 18Copy the code

The this pointing problem: If the return value is an object, then this refers to the returned object; If the return value is not an object then this still refers to an instance of the function. (NULL is a special case where null is an object but returns to an instance of a function.)

When a function returns an object, this refers to the environment in which the object is returned. When a function returns something other than an object, this refers to the function itself.

So let’s see, if it’s not an object, return instance obj.