很多同学甚至在相当长的时间里，都忽略了JavaScript也可以进行面向对象编程这个事实。一方面是因为，在入门阶段我们所实现的各种页面交互功能，都非常顺理成章地使用过程式程序设计解决了，我们只需要写一些方法，然后将事件绑定在页面中的DOM节点上便可以完成。尤其像我这类一开始C++这类语言没好好学，第一门主力语言就是JavaScript的同学来说，过程化程序设计的思维似乎更加根深蒂固。另一方面，就算是对于Java、C++等语言的程序员来说，JavaScript的面向对象也是一个异类：JavaScript中没有class的概念（在ES5及之前版本中没有，ES6会单独介绍），其基于prototype的继承模式也与传统面向对象语言不同，而JavaScript的弱类型特性更会令这里面的很多人抓狂。当然，在熟悉了之后，这种灵活性也会带来很多好处。总之，封装、继承、多态、聚合这些面向对象的基本特性JavaScript都有其自己的实现方式，这些知识的学习是从入门级JS程序员进阶的必经之路。
JavaScript面向对象（2）——谈谈函数（函数、对象、闭包）
JavaScript面向对象（3）——原型与基于构造函数的继承模式（原型链）
JavaScript面向对象（4）——最佳继承模式（深拷贝、多重继承、构造器借用、组合寄生式继承）
一、基于对象工作模式的继承
我们知道，JavaScript中创建对象主要有两种方式：构造函数与对象直接量。上一篇中介绍的三种继承方法也都是基于构造函数进行工作的，这种方法更类似与Java式的继承方式，构造函数和原型对象就相当于Java中的类了。 然而，JavaScript中终究是没有类的概念的，一切的核心还是对象。下面介绍的就是这类方法：
1、浅拷贝
//浅拷贝
function extend(p){
var obj = {};
for(var i in p) obj[i] = p[i];
obj.father = p;
return obj;
}
var fatherObj = {
name: 'father',
toString: function(){return this.name;}
}
var a = extend(fatherObj);
a.name = 'aaa';
a.toString(); // 'aaa'这个继承函数的唯一参数是父对象（注意这里接受的是父对象，也就是父类的实例对象。上一节的拷贝法中接受的是父类的构造函数对象），将父对象的全部属性拷贝至子对象中，并在子对象中添加father属性以方便引用父对象。当然了，由于是直接拷贝，父对象中值为对象的属性依然是以引用的方式拷贝的，在子对象中修改此类属性会影响到父对象。 下面是这种方法得到的a对象的结构
2、深拷贝
//深拷贝
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 if(typeof p[i] === 'function'){
c[i] = p[i].prototype.constructor;
}else c[i] = p[i];
}
return c;
}
var fatherObj = {
name: 'father',
hobby: ['football','basketball'],
toString: function(){return this.hobby}
}
//测试
var a = deepCopy(fatherObj);
console.log(a.toString()); // ['football','basketball']
console.log(a.hobby === fatherObj.hobby); //false
console.log(a.toString === fatherObj.toString); //false
相对于之前的浅拷贝，深拷贝则是对于对象做了特殊的处理：在遍历父对象属性是，一旦发现该对象为对象属性，递归调用自身将该对象进行复制。另外，由于函数对象无法直接通过属性遍历的方法进行深拷贝，这里通过访问方法对象的原型对象的constructor属性并将其进行赋值这个小技巧，完成了属性的深拷贝。这个方法由于在处理对象深拷贝时需要递归调用，没有在方法内添加父对象的引用，在使用的时候可以手动进行添加或者对这个方法进行二次封装。
拷贝与深拷贝其实也是聚合的实现了，将其他对象的属性拿过来扩展自身对象。若是两对象为父级子级关系，则为继承；若是两对象同级扩展，则可以视作聚合。其核心点就是深拷贝。
3、通过直接设置原型对象进行继承
//直接设置原型对象
function extend(p) {
function F(){};
F.prototype = p;
var c = new F();
c.father = p;
return c;
}4、多重继承
显然，JavaScript不可能为多重继承提供语法单元。但是对于JavaScript这类语言来说，模拟出多重继承也是非常容易的。这里提供了一种基于对象拷贝的多重继承实现：
//多重继承
function multiple(){
var c = {},
stuff,
len = arguments.length;
c['father'] = [];
for(var j = 0;j < len;j++){
stuff = arguments[j];
for(var i in stuff) c[i] = stuff[i];
c['father'].push(stuff);
}
return c;
}//多重继承2
function multiple(/*第一个参数为子对象，其余为父对象*/){
var c = arguments[0],
stuff,
len = arguments.length;
c['father'] = [];
for(var j = 1;j < len;j++){
stuff = arguments[j];
for(var i in stuff) c[i] = stuff[i];
c['father'].push(stuff);
}
return c;
}二、构造函数借用
还有一类很重要的继承实现方式，称为构造器借用（构造函数借用）。这里是利用了call()或apply()方法在子对象构造函数中调用父对象的构造函数。
//构造器借用
function Animal(age){
this.age = age;
}
Animal.prototype.getAge = function(){ return this.age + ' years old.'};
function Bird(){
Animal.apply(this, arguments);
}
Bird.prototype.className = 'Bird';
var a = new Bird(10);
console.log( a.className ); // 'Bird'
console.log( a.age); // 10
console.log( a.getAge ); // undefined三、找出最佳的继承方法
1、寄生式继承
这个方法其实是对原型对象法的升级，将继承后对象的扩展也封装进方法中。“这样在创建对象的函数中直接吸收其他对象的功能，进行扩展并返回，好像所有工作都是自己做的”，便是寄生式继承名字的由来了。这里直接使用了Object.create()方法，也可以用上文中给出的方法。
//寄生式继承
function extend(p){
var c = Object.create(p);
//在此对c进行扩展，添加子对象的自有属性和方法
//......
//......
return c;
}2、组合继承
这个方法是构造器借用法的延伸。由于构造器借用法无法继承原型属性，无法实现函数复用。便在该方法上做了简单改动： BIrd.prototype = new Animal()
//组合继承
function Animal(age){
this.age = age;
}
Animal.prototype.getAge = function(){ return this.age + ' years old.'};
function Bird(){
Animal.apply(this, arguments);
}
Bird.prototype.className = 'Bird';
var a = new Bird(10);
console.log( a.className ); // 'Bird'
console.log( a.age ); // 10
console.log( a.getAge ); // '10 years old.'然而，这种方式也有个明显的缺点。在继承的过程中，父对象的构造函数会被调用两次：apply方法会调用一次，随后调用子对象构造函数时又会调用一次。父对象的自身属性实际上被继承了两次：
function Animal(age){
this.age = age;
}
function Bird(){
Animal.apply(this, arguments);
}
Bird.prototype = new Animal(100)
Bird.prototype.className = 'Bird';
var a = new Bird(200);
console.log(a.age); // 200
console.log(a.__proto__.age); // 100
delete a.age;
console.log(a.age); // 100
从a对象的结构中可以清晰的看出，其自身重建了父级属性age，又从原型中继承了age，该属性被继承了两次。
将继承原型的方式从本例中的方法替换为 JavaScript面向对象（3）——原型与基于构造函数的继承模式（原型链） 中的最后一种方法可以更正双重继承的问题。然而由于该方法本身的问题与局限性，这还不是最佳的方案。
3、最佳继承方法： 组合寄生式继承
说了这么多，终于该引出最佳方法了：组合寄生式继承法。这里直接搬出红宝书里的经典源码：
function inherit(subType, superType){
var protoType = Object.create(superType.prototype);
protoType.constructor = subType;
subType.prototype = protoType;
}function inherit(subType, superType){
var protoType = Object.create(superType.prototype);
protoType.constructor = subType;
subType.prototype = protoType;
}
function Animal(age){
this.age = age;
}
Animal.prototype.getAge = function (){ return '11'};
function Bird(){
Animal.apply(this, arguments);
}
inherit(Bird, Animal);
Bird.prototype.className = 'Bird';
Bird.prototype.getName = function(){ return '22'};
这便是目前公认最佳的JavaScript继承的实现模式了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
