This is the second day of my participation in Gwen Challenge

The original intention of this series of articles is to “let each front-end engineer master the high frequency knowledge, for the work of power”. This is the front end of the 16th cut, I hope friends pay attention to the public number “kite”, armed with knowledge of their minds.

16.1 basis

  1. The prototype

Each object contains a prototype property that is used to associate with another object and then use that object’s properties and methods. This is JavaScript prototypal inheritance. There are several ways to manipulate prototypes:

(1) the Object. The create ()

Creates a new object based on the specified stereotype, which 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
Copy the code

(2) the Object. GetPrototypeOf ()

Returns the prototype of the specified object

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

(3) Object. SetPrototypeOf ()

Sets the stereotype 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] }
Copy the code

(4) the Object. The prototype. IsPrototypeOf ()

Returns a Boolean value that checks whether an object exists on another object’s prototype chain.

console.log(parentObj.isPrototypeOf(childObj)); // true
Copy the code
  1. The constructor

Constructors are a special kind of method. It is used primarily to initialize an object when it is created, that is, to assign initial values to its member variables. It is always used with the new operator in the statement that creates the object.

  1. The instance

Objects created by constructors and new are instances

16.2 Relationship among the three

Let’s take a look at a god diagram that is circulating on the Internet, which shows the relationship between prototypes, constructors, and instances.

The content in the above figure can be simplified as follows:

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

Let’s start with a short piece of code that contains the above stereotypes, constructors, and examples.

// constructor
function Test(a, b) {
    this.a = a;
    this.b = b;
}

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

/ / instance
const test = new Test(10.20);
console.log(test.add()); / / 30
Copy the code

Let’s verify the relationship with the above code

  1. Get instance content

Proto === proto == proto == proto == proto == proto =

  1. Gets the constructor content

  1. Get the prototype content

The stereotype is validated by having the constructor attribute, whose content is the constructor. Constructor === constructor

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

2. Pay attention to the public number of kite, and the number of the Lord together to kill the front hundred