一、继承
1、一般的面向对象语言中继承有两种方式:接口继承与实现继承。其中接口继承只继承方法签名,而实现继承则继承实际的方法。在JavaScript中,函数没有签名,所以ECMAScript中无法实现接口继承,只支持实现继承,且其实现继承主要依靠的是原型链来实现的。
二、原型链
1、原型链实现继承的基本思想是利用原型让一个引用类型继承另外一个引用类型的属性和方法。由于每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,让原型对象等于另一个类型的实例,则该原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含着一个指向另一个构造函数的指针;假如另一个原型又是另一个类型的实例,那么就能实现多重继承,就构成了实例与原型的链条,这就是原型链的基本概念。
2、实现原型链的基本模式如下:
function Parent() {
this.parentValue = true;
}
Parent.prototype.getParentValue = function() {
return this.parentValue;
};
function Child() {
this.childValue = false;
}
// 继承Parent
Child.prototype = new Parent();
Child.prototype.getChildValue = function() {
return this.childValue;
};
var instance = new Child();
instance.getParentValue(); // true
其中的Child类型继承了Parent类型,继承是通过创建Parent类型实例,并将该实例赋值给Child.prototype来实现的。实现的本质是用一个Parent类型实例来重写了Child的原型对象,所以原来存在于Parent实例中的所有属性和方法现在都存在于Child.prototype中了。最后再为Child.prototype添加了一个新的方法。其关系如下:
3、通过实现原型链,本质上也就扩展了原型搜索机制。在通过原型链实现继承的情况下,属性搜索过程会沿着原型链继续向上。
4、默认的原型
所有引用类型默认都继承了Object,该继承方式也是通过原型链来实现的。而且所有函数的默认原型都是Object的实例,所以默认原型都会包含一个内部指针,指向Object.prototype,这就是所有自定义类型都会继承toString()、valueOf()等默认方法的原因。所以上面的关系图实际上还有一层继承关系,完整的原型链关系图如下:
5、确定原型和实例的关系
有两种方式可以确定原型和实例之间的关系:
- 使用instanceof操作符:只要用该操作符来测试实例与原型链中出现过的构造函数就会返回true
instance instanceof Object; // true
instance instanceof Parent; // true
instance instanceof Child; // true
- 使用isPrototypeOf方法:只要是原型链中出现过的原型都可以说是该原型链所派生的实例的原型,使用该方法就会返回true
Object.prototype.isPrototypeOf(instance); // true
Parent.prototype.isPrototypeOf(instance); // true
Child.prototype.isPrototypeOf(instance); // true
6、子类型添加新方法或覆写父类型方法
function Parent() {
this.parentValue = true;
}
Parent.prototype.getParentValue = function() {
return this.parentValue;
};
function Child() {
this.childValue = false;
}
// 继承Parent
Child.prototype = new Parent();
// 添加新方法
Child.prototype.getChildValue = function() {
return this.childValue;
};
// 覆写父类型的方法
Child.prototype.getParentValue = function() {
return false;
};
var instance = new Child();
instance.getParentValue(); // false
覆写的getParentValue方法就会覆盖父类型中的对应的方法,所以这里的instance.getParentValue()调用返回了false;但是通过Parent的实例来调用getParentValue()依然是调用原来的方法,返回true。要注意的是,子类型添加和覆写的这两个方法一定要在用Parent实例替换Child的原型之后再定义这两个方法。
function Parent() {
this.parentValue = true;
}
Parent.prototype.getParentValue = function() {
return this.parentValue;
};
function Child() {
this.childValue = false;
}
// 继承Parent
Child.prototype = new Parent();
// 使用对象字面量添加新方法,会导致上一行代码无效
Child.prototype = {
getChildValue: function() {
return this.childValue;
}
};
var instance = new Child();
instance.getParentValue(); // 出现错误
8、原型链存在的问题
function Parent() {
this.colors = ["red", "blue", "green"];
}
function Child() {}
// 继承Parent
Child.prototype = new Parent();
var instance01 = new Child();
instance01.colors.push("black");
instance01.colors; // red, blue, green, black
var instance02 = new Child();
instance02.colors; // red, blue, green, black
Parent的构造函数定义了一个colors属性,Parent的每个实例都会各自包含自己的colors属性,当Child通过原型链继承了Parent之后,Child.prototype就变成了一个Parent的实例,所以它有一个自己的colors属性,结果就导致了Child的所有实例共享了这个colors属性。
function Parent() {
this.colors = ["red", "blue", "green"];
}
function Child() {
// 继承了Parent
Parent.call(this);
}
var instance01 = new Child();
instance01.colors.push("black");
instance01.colors; // red, blue, green, black
var instance02 = new Child();
instance02.colors; // red, blue, green
其中的代码"Parent.call(this)"借调了父类型的构造函数,通过使用call()方法(apply()方法也可以),实际上是在(未来将要)新创建的Child实例的环境下调用了Parent的构造函数,这样就会在新Child对象上执行Parent()函数中定义的所有对象初始化代码,结果就是Child的每个实例都会具有自己的colors属性的副本了。这也解决了原型链存在的问题一。
function Parent(name) {
this.name = name;
}
function Child(name, age) {
// 继承了Parent,同时还传递了参数
Parent.call(this, name);
this.age = age;
}
var instance = new Child("zhangsan", 21);
instance.name; // zhangsan
instance.age; // 21
如果要确保父类构造函数不会重写子类型的属性,应该在调用父类型的构造函数后,再添加应该在子类型中定义的属性。
function Parent(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
Parent.prototype.getName = function() {
return this.name;
};
function Child(name, age) {
// 继承了Parent的实例属性,同时还传递了参数
Parent.call(this, name);
this.age = age;
}
// 继承Parent原型方法
Child.prototype = new Parent();
Child.prototype.getAge = function() {
return this.age;
};
var instance01 = new Child("zhangsan", 21);
instance01.colors.push("black");
instance01.colors; // red, blue, green, black
instance01.getName(); // zhangsan
instance01.getAge(); // 21
var instance02 = new Child("lisi", 22);
instance02.colors; // red, blue, green
instance02.getName(); // lisi
instance02.getAge(); // 22
instance01和instance02两个实例就分别拥有自己的属性(name,age,colors),但是它们又拥有相同的方法getName和getAge。组合继承避免了原型链和借用构造函数的缺陷,是最常用的继承模式,这样的模式对于instanceof操作符和isPrototype()方法也能够用于识别基于组合继承创建的对象。
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
在object函数内部,先创建了一个临时的构造函数,然后将传入的对象作为该构造函数的原型对象,最后返回这个临时构造函数的一个新实例,从本质上看,object()对传入其中的对象执行了一次浅复制。如下:
var person = {
name: "zhangsan",
colors: ["red", "blue", "green"]
};
var p1 = object(person);
p1.name = "lisi";
p1.colors.push("black");
var p2 = object(person);
p2.name = "wangwu";
p2.colors.push("pink");
person.colors; // red, blue, green, black, pink
这里把person对象传入object()函数,然后该函数就会返回一个新对象,这个新对象将person对象作为自己的原型对象,所以它的原型对象中就包含一个基本类型值属性和一个引用类型值属性,所以person.colors不仅属于person,还被p1和p2共享,name属性虽然也被共享了,但是p1和p2对象都定义了自己的name属性,屏蔽掉了原型对象中的name属性。
var person = {
name: "zhangsan",
colors: ["red", "blue", "green"]
};
var p1 = Object.create(person);
p1.name = "lisi";
p1.colors.push("black");
var p2 = Object.create(person);
p2.name = "wangwu";
p2.colors.push("pink");
person.colors; // red, blue, green, black, pink
Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同:每个属性都是通过自己的描述符来定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性,如下:
var person = {
name: "zhangsan",
colors: ["red", "blue", "green"]
};
var p = Object.create(person, {
name: {
value: "lisi"
}
});
p.name = "lisi";
支持Object.create()方法的浏览器有:IE9+、Firefox4+、Safari5+、Opera12+、Chrome。
function createPerson(original) {
// 这里的object函数就是原型式继承中的object函数
// 以original作为新创建对象的原型创建了新对象
var clone = object(original);
// 增强新创建的对象
clone.sayHi = function() {
return "hi";
};
return clone;
}
var person = {
name: "zhangsan",
colors: ["red", "blue", "green"]
};
var p = createPerson(person);
p.sayHi(); // hi
不过,使用寄生式继承来为对象添加方法,会由于不能做到函数复用而导致降低效率,这点与构造函数模式类似。
function Parent(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
Parent.prototype.getName = function() {
return this.name;
};
function Child(name, age) {
// 继承了Parent的实例属性,同时还传递了参数
// 属于第二次调用父类型构造函数
Parent.call(this, name);
this.age = age;
}
// 继承Parent原型方法
// 属于第一次调用父类型构造函数
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Child.prototype.getAge = function() {
return this.age;
};
var instance = new Child("zhangsan", 21);
在第一次调用Parent构造函数时,Child.prototype会得到两个属性:name和colors,它们都是Parent的实例属性,只不过现在位于Child的原型对象中;当调用Child的构造函数时,又会调用一次Parent的构造函数,这次又在新对象上创建了实例属性name和colors,于是这两个属性就屏蔽了原型中的两个同名属性,如下图:有两组name和colors属性,一组在实例instance上,另一组在Child的原型上,这就是两次调用父类构造函数的结果。
function inheritPrototype(child, parent) {
// 这里的object函数就是原型式继承中的object函数
// 使用父类型的原型对象作为新对象的原型来创建一个新对象
var prototype = object(parent.prototype); // 创建对象
prototype.constructor = child; // 增强对象
child.prototype = prototype; // 指定对象
}
function Parent(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
Parent.prototype.getName = function() {
return this.name;
};
function Child(name, age) {
Parent.call(this, name);
this.age = age;
}
inheritPrototype(Child, Parent);
Child.prototype.getAge = function() {
return this.age;
};
其中在inheritPrototype函数中,第一步是创建父类型原型对象的一个副本;第二步是为创建的副本添加constructor属性,从而弥补因重写原型而失去的的默认的constructor属性。最后将新创建的副本对象赋值给子类型的原型,这样就避免了两次调用父类型构造函数而造成的属性屏蔽的问题了,现在它只调用了一次父类型构造函数,从而避免了在Child.prototype上创建不必要的、多余的属性。同时,原型链还能保持不变,所以还可以正常使用instanceof操作符和isPrototypeOf()方法。这种模式在一般情况下是最理想的继承模式。
参考书籍:《JavaScript高级程序设计》(第三版)