Front-end 100 questions cut [016]-the wonderful relationship between prototype, constructor and instance

The original intention of writing this series of articles is to "let every front-end engineer master high-frequency knowledge points to help work." This is the 16th cut of the front-end Hundred Topics. I hope that friends will pay attention to the public account "Kite Holder" and arm their minds with knowledge.

16.1 Basics

1. prototype

Each object contains a prototype property (prototype), which is used to associate another object. After the association, the properties and methods of that object can be used. This is actually JavaScript's prototype inheritance. The operation prototype has the following methods:

（1）Object.create()

Create a new object based on the specified prototype, the prototype can be null

const parentObj = {
    add: function() {
        return this.a + this.b;
    }
};

const newObj = Object.create(parentObj, {
    a: {
        value: 10
    },
    b: {
        value: 20
    }
});

console.log(newObj.add()); // 30

（2）Object.getPrototypeOf()

Returns the prototype of the specified object

// ……
console.log(Object.getPrototypeOf(newObj)); // { add: [Function: add] }

（3）Object.setPrototypeOf()

Set the prototype of a specified object to another object or null .

const parentObj = {
    add: function() {
        return this.a + this.b;
    }
};

const childObj = {
    a: 10,
    b: 20
};

Object.setPrototypeOf(childObj, parentObj);

console.log(childObj.add()); // 30
console.log(Object.getPrototypeOf(childObj)); // { add: [Function: add] }

（4）Object.prototype.isPrototypeOf()

Returns a Boolean value used to check whether an object exists in the prototype chain of another object.

console.log(parentObj.isPrototypeOf(childObj)); // true

2. Constructor

Constructor is a special method. It is mainly used to initialize the object when it is created, that is, to assign initial values to the object member variables. It is always used with the new operator in the statement that creates the object.

3. Instance

The object created by the constructor and new is an instance

16.2 The relationship between the three

Let's take a look at a picture of the gods circulating on the Internet, which contains the relationship between the prototype, the constructor, and the instance.

The content in the above figure can be simplified to the following:

1. Prototype.constructor === constructor
2. Constructor.prototype === prototype
3. Example. __ proto __ === prototype

Let's first look at a piece of code. Although this code is short, it does contain the aforementioned prototype, constructor, and instance.

// 构造函数
function Test(a, b) {
    this.a = a;
    this.b = b;
}

// 原型
Test.prototype.add = function() {
    return this.a + this.b;
}

// 实例
const test = new Test(10, 20);
console.log(test.add()); // 30

Let's use the above code to verify the relationship between these three

1. Get instance content

With __ proto attribute in the instance, you can see that the content inside is the prototype, which verifies the instance. proto __ === prototype

2. Get the contents of the constructor

3. Get prototype content

There is a constructor attribute in the prototype, and the content of this attribute is the constructor function, thus verifying the prototype. constructor === constructor

1. If you think this article is good, share it, like it, and let more people see it

2. Follow the official account holders, and kill the front-end 100 questions with the account owner