谈JavaScript的继承

最近在忙前端的工做，由于以前作.net和php的开发比较多，前端开发喜欢把库拿来就用，几回事实证实，不懂原理，连改代码也改很差，因此仍是下定决心研究下JavaScript的几个技术难点。

0x1.JavaScript的对象和构造函数

定义一个JavaScript对象能够这么定义

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

这样，你就定义了一个变量a，这个变量除了有x和y两个公有成员外，还有两个add和mul两个函数（公有方法）。可是这样的定义方法的缺点有2条：

1.批量生成对象很不方便，若是你var b=a;那么你每次修改b的成员，都会同时改掉a的成员，由于JavaScript的引用机制

2.若是每次生成对象须要自定义一些成员，都要写出相应的赋值操做，增长代码行数。

因此，在定义一个JavaScript对象以前，咱们能够先定义一个构造函数。

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;
	}
}

而后，定义一个对象

a = new A(1, 2);

上面这句代码看起来简单，可是要和C++等面向对象的语言作个区分，A并非严格意义上“类”的概念，由于JavaScript是没有类的，只是调用了构造函数而已。

如今问题来了，咱们怎么实现继承？C++把封装，继承，多态这三个面向对象的特征实现得清清楚楚。可是对于JavaScript这样一个比较浪的语言，没有一个很严格的继承机制，而是采用如下几种方式来模拟。

0x2.JavaScript的prototype

为了可以讲清后面的apply或call函数，这里先引入prototype。prototype是只有Function才有的。

要用好继承，首先要明白为何要设计继承这个东西？无非就是“把公共的部分”提取出来，实现代码复用。

因此在JavaScript里，也是把公共部分放在Function的prototype里。

咱们来比较两个用prototype来实现继承的例子

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

这个例子中，子类的prototype指向一个A类对象

咱们再实现一个B继承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的prototype对象引用了A的prototype对象，由于是引用，因此若是修改了B的prototype对象，A的prototype对象也随之修改，由于本质上他们都指向一块内存。因此每次改动B类型的prototype都要手动将constructor改回，防止错乱。相比两个例子，上一个例子由于没有引用，因此不会发生这个问题。

建立一个B类型的对象

b=new B();

b对象具备A类型的一切成员

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

由于每一个prototype对象都有两个重要成员：constructor和_proto_，constructor本质上是一个函数指针，因此B.prototype=A.prototype执行后，覆盖掉了constructor，因此后面要让constructor从新指向B类型的构造函数。

0x3.JavaScript的构造函数绑定

在定义完一个A类型的构造函数后，再定义一个B类型，而后在B类型构造函数内部，“嵌入执行”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));

apply函数和call函数基本同样，能够在B类型构造函数内部执行A类型构造函数。同时也能够继承A的全部成员。

显示结果：

这里给个公式：在B构造函数里写A.apply(this)，可让B构造出来的对象能够拥有A构造函数里的全部成员。

谈到apply和call，还能够实现多重继承

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