Some ideas based on prototypes and inheritance in js

Recently I saw a js library written by someone else. I suddenly had some ideas about the prototype and inheritance in js. I have seen some of them before, but they are not very clear. I used my free time these days to understand this area, and I still feel that there is something wrong with it. The idea is not so organized, just for sharing.

1. instanceof

In JavaScript, there is the instanceof operator, which is a binary operator. Use the method instanceA instanceof A, and the return value is a boolean, which means to determine whether instanceA is an instance of A, and its essence is to determine whether A.prototype===instanceA.__proto__, such as

 function f2(){ var f=function(){} var test=new f(); console.log(test instanceof f);//true console.log((f.prototype====test.__proto__));//true}

Both prints above are true. Indicates that test is an instance of f; the __proto__ attribute of test points to the prototype object of f, that is, the prototype property of f is an object, and this object is an instance of f.

2. Objects in js

Everything is an object in js. Objects are divided into function objects and ordinary objects. Common functions are actually function objects, such as

 //Function object var f=function(){} var f2=new Function('str','console.log(str)') function f3(){} //Ordinary object var o=new Object(); var o2={} var o3=new f()

As shown above, f, f2, and f3 are function objects, and o, o2, and o3 are ordinary objects.

The difference between a function object and a normal object:

All objects created using new Function() are function objects, f and f3, and ultimately they are also created using new Function();

When defining an object, the object contains some predefined properties, such as prototype and __proto__. The prototype attribute is only available in function objects, and __proto__ is available for all objects. Therefore, it can be determined by the object's __proto__ attribute of the object to determine whether an object is a function object or a normal object, such as

 //Function object var f=function(){} //Ordinary object var o=new Object(); console.log(f.prototype);//Object {} console.log(o.prototype);//undefined

From the above, we can find that the function object has a prototype attribute, while the prototype object of ordinary objects is undefined.

3. Prototype chain

From the above, we know that all objects have a __proto__ attribute, which points to the prototype object prototype of the function object that created it. We call this chain stringed using the __proto__ attribute a prototype chain, such as the following is a prototype chain.

The above picture, taking person as an example, illustrates the prototype chain.

 var person=function(){}var person1=new person();

1. person is a function object, person1 is an instance of person

2. The __proto__ attribute of person1 is the prototype object of person.prototype

3. Since person's prototype object person.prototype is an object, it also has a __proto__ attribute, which points to the Object prototype object Object.prototype

4. Object's prototype object Object.prototype is an object, which also has a __proto__ attribute, and the prototype object of this attribute is null.

4. Some inheritance

In js we will define a function object, such as

 var person=function(){}

Above we defined a function object, which has no properties and is an empty object. Since it is an object, you can add properties to it.

 var person=function(){}person.name1='js'console.log(person.name1)//js

The above code has added a name attribute to person, and assigned a value to js, and the value of the name attribute can be printed out.

But when we create an instance of person1, as follows

 var person= function(){}; person.name1= 122; console.log(person.name1); var person1=new person(); console.log(person1.name1);//undefined

You can see that person1 does not have the name1 attribute, so how can we ensure that person instances also have the name1 attribute?

 var person= function(){}; person.name1= 122; //Use the prototype object to add attributes to the object, so that the instances will have this attribute person.prototype.name1='12'; console.log(person.name1); var person1=new person(); console.log(person1.name1);//12

Above, person.protoype.name1='12' is used, so that all instances have name1 attribute. The attributes added in this way will be regarded as common attributes of the instance when generating the instance.

The above article is based on prototypes and inheritance in js. All the content I share with you is the editor. I hope it can give you a reference and I hope you can support Wulin.com more.