Difficulties in JavaScript: Detailed explanation of prototype and constructor binding examples

JavaScript objects and constructors

Define a JavaScript object like this

var a = {
	x : 1,
	y : 2,
	add : function () {
		return this.x + this.y;
	},
	mul : function () {
		return this.x * this.y;
	}
}

In this way, you A variable a is defined. In addition to the two public members x and y, this variable also has two functions (public methods) add and mul. However, there are two disadvantages of this definition method:

1. It is very inconvenient to generate objects in batches. If you var b=a; then every time you modify the members of b, the members of a will be changed at the same time. Because of the reference mechanism of JavaScript

2. If you need to customize some members every time you generate an object, you must write the corresponding assignment operation and increase the number of lines of code.

So, before defining a JavaScript object, we can first define a constructor.

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

Then, define an object

a = new A(1, 2);

The above code looks simple, but it needs to be compared with C++ etc. To distinguish object-oriented languages, A is not the concept of "class" in the strict sense, because JavaScript does not have classes, it just calls the constructor.

Now the question comes, how do we implement inheritance? C++ clearly implements the three object-oriented features of encapsulation, inheritance, and polymorphism. However, for a relatively rough language like JavaScript, there is no strict inheritance mechanism. Instead, the following methods are used to simulate it.

JavaScript prototype

In order to explain the later apply or call function, prototype is introduced here. Prototype is only available to Function.

To use inheritance well, you must first understand why inheritance is designed? It's nothing more than "extracting the common parts" to achieve code reuse.

So in JavaScript, the public part is also placed in the prototype of Function.

Let’s compare two examples of using prototype to implement inheritance

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

function B(x,y){
	
}

B.prototype=new A(1,2);

console.log(new B(3,4).add());　　//3

In this example, the prototype of the subclass points to a class A object

Let’s implement another example where B inherits A:

function A() {
	
}

A.prototype = {
	x : 1,
	y : 2,
	add : function () {
		return this.x + this.y;
	},
	mul : function () {
		return this.x * this.y;
	}
}
A.prototype.constructor=A;

function B(){
	
}

B.prototype=A.prototype;
B.prototype.constructor=B;

B’s prototype object refers to A’s prototype object. Because it is a reference, if B’s prototype is modified The prototype object and A's prototype object are also modified, because essentially they all point to a piece of memory. Therefore, every time you change the prototype of type B, you must manually change the constructor back to prevent confusion. Compared with the two examples, this problem does not occur in the previous example because there is no reference.

Create an object of type B

b=new B();

The b object has all members of type A

console.log(b.add());  //3

Because each prototype object has two important members: constructor and _proto_, constructor is essentially a function pointer, so after B.prototype=A.prototype is executed, the constructor is overwritten, so the constructor must be pointed to again later. Constructor of type B.

JavaScript constructor binding

After defining a constructor of type A, define a type B, and then inside the constructor of type B, " Embedded execution" constructor of type A.

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

function B(x, y, z) {
	A.apply(this, arguments);
	this.z = z;
}

console.log(new B(1,2,3));

The apply function is basically the same as the call function, and the A type constructor can be executed inside the B type constructor. At the same time, you can also inherit all members of A.

Display results:

Here is a formula: write A.apply(this) in the B constructor, so that the object constructed by B can Has all members in the A constructor.

When it comes to apply and call, multiple inheritance can also be achieved

function IA(){
	this.walk=function(){
		console.log("walk");
	}
}

function IB(){
	this.run=function(){
		console.log("run");
	}
}

function Person(){
	IA.apply(this);
	IB.apply(this);
}

var p=new Person();
p.walk();　　//walk    
p.run();　　//run

The above is the detailed content of Difficulties in JavaScript: Detailed explanation of prototype and constructor binding examples. For more information, please follow other related articles on the PHP Chinese website!