JavaScript prototype and inheritance description_js object-oriented

function A(x) 
{ 
this.x = x; 
} 
alert(A.prototype); 
alert(A.prototype.constructor);

According to the pop-up results, we can get: the prototype object is created by the constructor of the function. The properties it possesses can be shared by all objects. Initially, the prototype object points to an Object object and defines a constructor attribute. The attribute points to the constructor itself that defines the prototype object. Look at the following code again.

Code

function A(x) 
{ 
A.prototype.x = x; 
} 
var obj = new A(10); 
alert(obj.x); 
alert(obj.constructor); 

Because all properties of the prototype object can be shared by the object created by the constructor, the created object can access the constructor property here. At the same time, obj corresponds to an instance created by the prototype object (prototype), then override the constructor property. What will be the result?

Code

function A(x) 
{ 
A.prototype.x = x; 
} 

var objA = new A(10); 
objA.constructor = function(x){ alert("重写obj的constructor属性");this.x = 20 }; 
objA.constructor(); 
alert(objA.x); 

var objB = new A(10); 
alert(objB.x);

According to the results, we can see that the first thing that pops up is "Rewrite the constructor attribute of obj", then 20 pops up, and 10 pops up. It can be seen that after we write and rewrite the constructor of the objA object, objB has not been changed. , so no matter how many attributes are added or modified to an object, it will not affect the original appearance of the attributes in its prototype object. In fact, it is easy to understand why js does this, because the behavior of one object cannot affect other objects, otherwise it will cause confusion.

Here, we can summarize the rules of the above code:

1. When we call an object, we first check the self-defined properties of the object itself and call it if it exists.

2. When its own properties do not exist, the reference of the prototype object defined by its constructor is called.

Then according to this rule, a prototype chain in JavaScript is formed, and we can define the inheritance relationship according to this rule.

function A(x) 
{ 
A.prototype.x = x; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
}

This code shows two functions. The B function inherits the A function. A.call(this.x) means passing the B object this to the A function for execution. Then, we also need the object constructed by the B function to contain all the characteristics of the A function, so we need to add this sentence.

Copy code The code is as follows:

B.prototype = new A();
alert(B.prototype.constructor);

First, we specify that the prototype of B is A. Therefore, the B function inherits the characteristics of the A function. According to the pop-up results, we can see that its constructor points to the A function, so are the characteristics of our B function lost? ? Therefore, we need to add a sentence and finally give the continued integration code.

function A(x) 
{ 
A.prototype.x = x; 
A.prototype.ShowA = function(){ alert("A的Show方法!"); }; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
B.prototype.ShowB = function(){ alert("B的Show方法!"); }; 
} 

B.prototype = new A(); 
B.prototype.constructor = B; 

var obj = new B(10,5); 
alert(obj.x); 
alert(obj.y); 
obj.ShowA(); 
obj.ShowB();

If you have any questions or errors, please feel free to make corrections and discuss them.