Several details of js prototype chain inheritance Blog category: JavaScript

1. How to implement only inheriting prototype

First look at the following code:

Js code

function A(){

this.name="Li Keke";

this.age=21;

}

A.prototype.eat=function(){ console.log("I can eat") }

function B(){}

B.prototype=new A;//B inherits A

var cc=new B;

cc.eat();//I can eat

cc.name;//"Li Keke"

What we can see is that A inherits all the attributes of B, then if we What should I do if I only want B to inherit the A.prototype attribute and don’t want a lot of useless things like name and age on A?

Some people may have said, wouldn’t it be over just like this:

Js code

B.prototype=A.prototype;

var cc=new B;

cc.eat();//I can eat

cc.name;//undefined

yo, it seems perfect? Continue to look at the

Js code

B.prototype.fuck=function(){console.log("I fuck you!")}

var cc=new B,dd=new A;

cc.fuck( );//I fuck you!

dd.fuck();//I fuck you!

//Oh my God, how come both of them have learned to curse?

//When the prototype of subclass B changes It will also affect A's prototype (and vice versa of course). The reason is also very simple, because we let A.prototype point to B's prototype

Solution:

Build a function, create an empty object in it, and Let the prototype of the empty object point to the parent object to be inherited, and finally return the instance of the object. The code is as follows

Js code

Object.createPro=function(pro){

function F(){}

F.prototype =pro;

return new F;

}

We can test it:

Js code

function A(){

this.name="Li Keke";

this.age=21;

}

A.prototype.eat=function(){ console.log("I can eat") }

function B(){}

B.prototype=Object.createPro(A.prototype);/ /B only inherits the prototype attribute of A

var cc=new B;

cc.eat();//I can eat

cc.name;//

B.prototype.fuck=function( ){console.log("I fuck you!")}//We now change the prototype of B

var dd=new A;

dd.fuck();//Report TypeError

//Explain B.prototype The change does not affect any attributes of A

But it is too troublesome to do so. ES5 helps us solve this problem. We can directly use the static method create() that comes with Object:

Js code

function A(){

this.name="Li Keke";

this.age=21;

}

A.prototype.eat=function(){ console.log("I can eat") }

function B(){}

B.prototype=Object.create(A.prototype);//Only inherit A’s prototype

While inheriting, you can also add some unique attributes to B as follows:

Js code

function A(){

this.name="Li Keke";

this.age=21;

}

A.prototype.eat=function(){ console.log("I can eat") }

function B(){}

B.prototype=Object.create(A.prototype,{

p: { value: 42, writable: false, enumerable: true }//Add an attribute p , and is not writable, but enumerable

});

var pp=new B;

pp.p;//42

pp.name;//undefined

pp.eat(); //I can eat

pp.p=666;

pp.p;//42 (not writable)

The second parameter is very similar to Object.defineproperties() where you can configure multiple properties and give some Special permission tag

Of course, you can also inherit all properties of A through this method, like the following

Js code

B.prototype=Object.create(new A);

It should be noted that the Object.create method Compatibility, only browsers compatible with ES5 are possible, or we can simulate one ourselves, just like the Object.createPro method above

2. Regarding the problem of constructor pointing and the enumerability of constructor

In the first question, we used the Object.create method to implement inheritance between different classes. However, there is a problem when doing this, as follows:

Js code

function A(){

this. name="Li Keke";

this.age=21;

}

A.prototype.eat=function(){ console.log("I can eat") }

function B(){}

B.prototype=Object.create(A.prototype);

var cc=new B;

cc.constructor;//A　 (Here we expected the value to be B, but it actually became A)

So how to solve the above problem?

Js code

//The easiest thing we can think of is to manually set the constructor attribute, like this

B.prototype.constructor=B;

Then the problem comes again, please see below:

Js code

B.prototype.propertyIsEnumerable("constructor");//true (the constructor property we set is enumerable)

Of course we don't want this to be the case, so what should we do?

Js code

//Use the Object.defineProperty or Object.defineProperties method to set the enumerable of the constructor to false

Object.defineProperty(B.prototype,"constructor",{

value:B,

enumerable:false/ /Non-enumerable

});

cc.constructor;//B

B.prototype.propertyIsEnumerable("constructor");//false

Some people with similar problems also use object literals to rewrite classes Prototype, like the following

Js code

function C(){}

C.prototype={}

var pp=new C;

pp.constructor;//Object (What we expect is C)

C.prototype.constructor=C;

C.prototype.propertyIsEnumerable("constructor");//true (also enumerable)

//The above method can also be used here

Of course, there is another way that you don’t need to rewrite it, just add attributes to it, like this:

Js code

function D(){}

D.prototype.x=1;

var gg=new D;

gg.constructor; //D

D.prototype.propertyIsEnumerable("constructor");//false