The relationship between JS constructor and instantiation and prototype introduction

1. Constructor and instantiation

When our programming is object-oriented, the first process is abstraction => then instantiation. For example, we abstract a person and I know the basic information of the person. Name, age, gender, etc.

We abstract first, and after the abstraction is completed, we instantiate.

2. What is the relationship between constructor and instantiation?

//This custom constructor is in the abstract function Person(name,age,sex){

    this.name=name;

    this.age=age;

    this.sex=sex;

    this.say=function(){

        console.log("My name is",name)

    }

}

// This process is instantiation let per1=new Person('司藤',300,'女');

per1.say(); //Call //let per1=new Person('司藤',300,'女');

Through the above line of code.

We can draw a conclusion:

The relationship between the constructor and the instance object is:

Instance objects need to be created through constructors.

At the same time: we can know that the constructor of the instance object is the constructor

Let's prove this statement is correct; the above code does not change.

console.log( per1.constructor===Person ) //Returns true

Fully explain: The statement that the constructor of an instance object is the constructor is correct.

3. Is per1.say equal to per2.say?

 function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=function(){

        console.log('I can skip meals');

    }

}

var per1=new Person("司藤",300,'玩');

var per2=new Person('白浅','10000','玩');

per1.say();

per2.say();

console.log( per1.say == per2.say ) //false

4. per1.say is not equal to the conclusion drawn by per2.say

Because console.log( per1.say == per2.say ) //false

We can draw a conclusion.

That is, per1.say() and per2.say() do not call the same method.

Are their contents equal?

console.log( per1.say()==per2.say() ) //true

The description content is equal

5. Example code problem

5.1 Problems with the code

function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=function(){

        console.log('I can skip meals');

    }

};

for (var index = 0; index < 100; index++) {

    var per=new Person("司藤",300,'玩');

    per.say();

}

This piece of code: It opens up 100 spaces in memory. Each space has a say method. But each say method is different. But their output is the same. In other words, the execution logic is the same. This results in a waste of space. So in the project, this results in a waste of space.

Can we optimize it?

5.2 Optimize code to solve space waste

function comSay(){

    // Execute the same logic console.log('I can skip meals')

};



function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=comSay; //Do not add brackets};

var per1=new Person("司藤",300,'玩');

var per2=new Person('白浅','10000','玩');

console.log( per1.say==per2.say ) //true

This way we save space. Each time it is called, it is the same method.

5.3 Using this method, we can also use the prototype method

function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

};

Person.prototype.comSay=function(){

    console.log('I can skip meals')

}

var per1=new Person("司藤",300,'玩');

var per2=new Person('白浅','10000','玩');

console.log( per1.comSay==per2.comSay ) //true

// We can also solve data sharing through prototypes

The role of the prototype: data sharing and space saving.

This concludes this article on the relationship between JS constructors and instantiations and the introduction of prototypes. For more information on the relationship between JS constructors and instantiations and the introduction of prototypes, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!