js面向对象编程（转）

来源文章作者：阮一峰

———————————————————————————————————————————————————————————————————

 

Javascript继承机制的设计思想：

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

首先，Brendan Eich不打算引入“类”，不打算把js设计成一种完整的面向对象编程语言。

考虑到c++与java用new命令生成实例，所以有了new。

但是js没有“类”，为了能表示原型对象，考虑到c++与java使用new命令时，会调用“类”的构造函数（constructor），于是做了一个简化的设计。

在js中，new命令后面跟的不是类，而是构造函数。

但通过构造函数生成的实例无法共享属性和方法（实例间的值改变不相互影响，同时每个对象相同的方法都要各自占用空间），

所以为构造函数设置了prototype属性。prototype属性包含一个对象，所有实例要共享的属性与方法都放在这个对象中，不需要共享的则放在构造函数里。

———————————————————————————————————————————————————————————————————

Javascript 面向对象编程（一）：封装

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

一、原始模式：

var cat1 = {name:"1",color:"red"};
var cat2 = {name:"2",color:"blue"};

麻烦。

二、构造函数模式：

function Cat(name, color){
　　this.name = name;
　　this.color = color;
　　this.eat = function(){alert("吃老鼠");};
}

var cat1 = new Cat("1","red");
var cat2 = new Cat("2","blue");

alert(cat1.constructor == Cat); //true
alert(cat1 instanceof Cat); //true
alert(cat1.eat == cat2.eat); //false

对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。

 

三、prototype模式  *

function Cat(name,color){
　　　　this.name = name;
　　　　this.color = color;
}

Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};

var cat1 = new Cat("1","red");
var cat2 = new Cat("2","blue");

alert(cat1.eat == cat2.eat); //true

 对象间各自特异的的值用this.属性，对象间共享的属性放入prototype中。

prototype模式的验证方法：

1、 isPrototypeOf():某个proptotype对象和某个实例之间的关系。

alert(Cat.prototype.isPrototypeOf(cat1)); //true

 

2、 hasOwnPrototype():判断某一个属性到底是本地属性，还是继承自prototype对象的属性。

alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false

 

3、 in运算符：可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。

alert("name" in cat1); // true

遍历某个对象的所有属性。

for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

 

———————————————————————————————————————————————————————————————————

Javascript面向对象编程（二）：构造函数的继承　

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

 

function Animal(){
　　this.species = "动物";
}

function Cat(name,color){
　　this.name = name;
　　this.color = color;
}

 一、构造函数绑定  *

使用call或apply方法，将父对象的构造函数绑定在子对象上。

function Cat(name,color){
　　Animal.apply(this, arguments);  //重点
　　
    this.name = name;
　　this.color = color;
}

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

alert(cat1.species); // 动物

 

二、prototype模式

使用prototype属性。

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

第一行将Cat的prototype对象指向一个Animal的实例，它相当于完全删除了原先prototype对象的值，然后赋予一个新值。

同时，此时Cat.prototype.constructor指向Animal，其实例的cat1.constructor也指向Animal。

这导致继承链紊乱（cat1明明是用构造函数Cat生成的），因此第二行我们必须手动纠正。

要注意让constructor保持正确。o.prototype = {};o.prototype.constructor = o;

 

三、直接继承prototype

第三种方法是对第二种方法的改进。

由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过 Animal()，直接继承Animal.prototype。

function Animal(){ }
Animal.prototype.species = "动物";

Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;

var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

与前一种方法相比，这样做的优点是效率比较高（不用执行和建立Animal的实例了），比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象，那么任何对Cat.prototype的修改，都会反映到Animal.prototype。

所以，上面这一段代码其实是有问题的。请看第二行

Cat.prototype.constructor = Cat;

这一句实际上把Animal.prototype对象的constructor属性也改掉了！

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

 

四、利用空对象为中介  *

由于"直接继承prototype"存在上述的缺点，所以利用一个空对象作为中介。

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

Cat.prototype = new F();
Cat.prototype.constructor = Cat;

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

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

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

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是一个德语词，意思是"向上"、"上一层"。）这等于在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。

 

二、三、四三种方法的不同：

原型模式方式：直接把Cat.prototype指向new Animal（）实例。　　因为父类可能有其他非prototype的属性，所以建立其实例比较消耗内存、效率。

直接继承prototype：直接把Cat.prototype = Animal.prototype。　　因为为“=”为引用，子父类的prototype相互影响。不好。不用。

空对象中介：F.prototype = Animal.prototype;后，Cat.prototype = new F();。　　推荐。

注意：记得都要纠正constructor。

 

五、拷贝继承  *

纯粹采用"拷贝"方法实现继承。简单说，把父对象的所有属性和方法，拷贝进子对象。

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

function Animal(){}
Animal.prototype.species = "动物";

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

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); // 动物

 

———————————————————————————————————————————————————————————————————

Javascript面向对象编程（三）：非构造函数的继承　　

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

 

一、什么是"非构造函数"的继承？

 

比如，现在有一个对象，叫做"中国人"。

var Chinese = {
　　nation:'中国'
};

还有一个对象，叫做"医生"。

var Doctor ={
　　career:'医生'
}

请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？

这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。

二、object()方法  *

json格式的发明人Douglas Crockford，提出了一个object()函数，可以做到这一点。

function object(o) {
　　function F() {}
　　F.prototype = o;

　　return new F();
}

这个object()函数，其实只做一件事，就是把子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起。

使用的时候，第一步先在父对象的基础上，生成子对象，再加上子对象本身的属性，这时，子对象已经继承了父对象的属性了：

var Doctor = object(Chinese);
Doctor.career = '医生';

alert(Doctor.nation); //中国

 

三、浅拷贝（略）

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

下面这个函数，就是在做拷贝：

function extendCopy(p) {
　　var c = {};
　　for (var i in p) { 
　　　　c[i] = p[i];
　　}
　　c.uber = p;

　　return c;
}

使用的时候，这样写：

var Doctor = extendCopy(Chinese);
Doctor.career = '医生';

alert(Doctor.nation); // 中国

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

请看，现在给Chinese添加一个"出生地"属性，它的值是一个数组。

Chinese.birthPlaces = ['北京','上海','香港'];

var Doctor = extendCopy(Chinese);
Doctor.birthPlaces.push('厦门');

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

所以，extendCopy()只是拷贝基本类型的数据，我们把这种拷贝叫做"浅拷贝"。这是早期jQuery实现继承的方式。

 

四、深拷贝   *

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

function deepCopy(p, c) {
　　var c = c || {};

　　for (var i in p) {
　　　　if (typeof p[i] === 'object') {
　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　deepCopy(p[i], c[i]);
　　　　} else {
　　　　　　　c[i] = p[i];
　　　　}
　　}

　　return c;
}

使用的时候这样写：

var Doctor = deepCopy(Chinese, Doctor);

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

目前，jQuery库使用的就是这种继承方法。