Javascript 面向对象编程：封装与继承

常见定义：

所谓”构造函数”，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

 

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

一、 构造函数绑定

第一种方法也是最简单的方法，使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

二、 prototype模式

第二种方法更常见，使用prototype属性。

如果”猫”的prototype对象，指向一个Animal的实例，那么所有”猫”的实例，就能继承Animal了。

代码的第一行，我们将Cat的prototype对象指向一个Animal的实例。

　　Cat.prototype = new Animal();

它相当于完全删除了prototype 对象原先的值，然后赋予一个新值。但是，第二行又是什么意思呢？

　　Cat.prototype.constructor = Cat;

原来，任何一个prototype对象都有一个constructor属性，指向它的构造函数。如果没有”Cat.prototype = new Animal();”这一行，Cat.prototype.constructor是指向Cat的；加了这一行以后，Cat.prototype.constructor指向Animal。

　　alert(Cat.prototype.constructor == Animal); //true

更重要的是，每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。

　　alert(cat1.constructor == Cat.prototype.constructor); // true

因此，在运行”Cat.prototype = new Animal();”这一行之后，cat1.constructor也指向Animal！

　　alert(cat1.constructor == Animal); // true

这显然会导致继承链的紊乱（cat1明明是用构造函数Cat生成的），因此我们必须手动纠正，将Cat.prototype对象的constructor值改为Cat。这就是第二行的意思。

这是很重要的一点，编程时务必要遵守。下文都遵循这一点，即如果替换了prototype对象，

　　o.prototype = {};

那么，下一步必然是为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数。

　　o.prototype.constructor = o;

 

四、 利用空对象作为中介

由于”直接继承prototype”存在上述的缺点，所以就有第四种方法，利用一个空对象作为中介。

JavaScript

var F = function(){}; F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat;

1 2 3 4 5 6 7

var F = function(){};   F.prototype = Animal.prototype;   Cat.prototype = new F();   Cat.prototype.constructor = Cat;

F是空对象，所以几乎不占内存。这时，修改Cat的prototype对象，就不会影响到Animal的prototype对象。

JavaScript

alert(Animal.prototype.constructor); // Animal

1	alert(Animal.prototype.constructor); // Animal

我们将上面的方法，封装成一个函数，便于使用。

JavaScript

function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prototype; }

1 2 3 4 5 6 7 8 9 10 11 12 13

function extend(Child, Parent) {   var F = function(){};   F.prototype = Parent.prototype;   Child.prototype = new F();   Child.prototype.constructor = Child;   Child.uber = Parent.prototype;   }

使用的时候，方法如下

extend(Cat,Animal);

var cat1 = new Cat(“大毛”,”黄色”);

alert(cat1.species); // 动物
这个extend函数，就是YUI库如何实现继承的方法。

另外，说明一点，函数体最后一行

　　Child.uber = Parent.prototype;

意思是为子对象设一个uber属性，这个属性直接指向父对象的prototype属性。（uber是一个德语词，意思是”向上”、”上一层”。）这等于在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。

五、 拷贝继承

上面是采用prototype对象，实现继承。我们也可以换一种思路，纯粹采用”拷贝”方法实现继承。简单说，如果把父对象的所有属性和方法，拷贝进子对象，不也能够实现继承吗？这样我们就有了第五种方法。

首先，还是把Animal的所有不变属性，都放到它的prototype对象上。

　　function Animal(){}

Animal.prototype.species = “动物”;

然后，再写一个函数，实现属性拷贝的目的。

JavaScript

function extend2(Child, Parent) { var p = Parent.prototype; var c = Child.prototype; for (var i in p) { c[i] = p[i]; } c.uber = p; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function extend2(Child, Parent) {   var p = Parent.prototype;   var c = Child.prototype;   for (var i in p) {   c[i] = p[i];   }   c.uber = p;   }

这个函数的作用，就是将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象。

使用的时候，这样写：

　　extend2(Cat, Animal);

var cat1 = new Cat(“大毛”,”黄色”);

alert(cat1.species); // 动物

三、浅拷贝

除了使用”prototype链”以外，还有另一种思路：把父对象的属性，全部拷贝给子对象，也能实现继承。

如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，而不是真正拷贝，因此存在父对象被篡改的可能。

四、深拷贝

所谓”深拷贝”，就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难，只要递归调用”浅拷贝”就行了。

 

详见：

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html