


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

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).
