Several details of js prototype chain inheritance Blog category: JavaScript-JS Tutorial-php.cn

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