深入剖析JavaScript中的继承

JavaScript中的继承有以下几种方式：

一、对象冒充

function Parent(username) {
this.username = username;
this.hello = function() {
alert(this.username);
}
}

function Child(username, password) {
this.method = Parent;
this.method(username);
delete this.method;

this.password = password;
this.world = function() {
alert(this.password);
}
}

var p = new Parent("香雪海");
var c = new Child("宁采臣", "聊斋志异");

p.hello();
c.hello();
c.world();

二、使用call方法，call方法的第一个参数将作为调用call方法中函数的this

function Parent(username) {
this.username = username;
this.hello = function() {
alert(this.username);
}
}

function Child(username, password) {
Parent.call(this, username);

this.password = password;
this.world = function() {
alert(this.password);
}
}

var p = new Parent("香雪海");
var c = new Child("宁采臣", "聊斋志异");

p.hello();
c.hello();
c.world();

三、使用apply，与上一种类似

function Parent(username) {
this.username = username;
this.hello = function() {
alert(this.username);
}
}

function Child(username, password) {
//Parent.apply(this, new Array(username));
Parent.apply(this, [username]);
this.password = password;
this.world = function() {
alert(this.password);
}
}

var p = new Parent("香雪海");
var c = new Child("宁采臣", "聊斋志异");

p.hello();
c.hello();
c.world();

四、原型链方式

function Parent() {

}

Parent.prototype.username = "那一场风花雪月的故事";
Parent.prototype.hello = function() {
alert(this.username);
}

function Child() {

}

Child.prototype = new Parent();
Child.prototype.password = "恋爱I.N.G";
Child.prototype.world = function() {
alert(this.password);
}

var parent = new Parent();
var child = new Child();
parent.hello();
child.hello();
child.world();

五、混合方式（推荐）

function Parent(username) {
this.username = username;
}

Parent.prototype.hello = function() {
alert(this.username);
}

function Child(username, password) {
Parent.call(this, username);
//Parent.apply(this, new Array(username));
this.password = password;
}

Child.prototype = new Parent();
Child.prototype.world = function() {
alert(this.password);
}

var p = new Parent("尘间多少事");
var c = new Child("岂必消无踪", "未知尘缘是劫");

p.hello();
c.hello();
c.world();

下面是一个综合使用JavaScript面向对象和继承的小例子，有助于更深刻了解

function Shape(edge) {
this.edge = edge;
}

Shape.prototype.getArea = function() {
return 0;
}

Shape.prototype.getEdge = function() {
return this.edge;
}

function Triangle(bottom, height) {
Shape.call(this, 3);
this.bottom = bottom;
this.height = height;
}

Triangle.prototype = new Shape();
Triangle.prototype.getArea = function() {
return 0.5 * this.bottom * this.height;
}

function Rectangle(bottom, height) {
Shape.call(this, 4);
this.bottom = bottom;
this.height = height;
}

Rectangle.prototype = new Shape();
Rectangle.prototype.getArea = function() {
return this.bottom * this.height;
}

var triangle = new Triangle(10, 5);
alert(triangle.getEdge());//3
alert(triangle.getArea());//25

var rectangle = new Rectangle(10, 10);
alert(rectangle.getEdge());//4
alert(rectangle.getArea());//100

//利用反射机制和prototype实现继承
function class1(){
//构造函数
}
class1.prototype={
method:function(){
alert(1);
},
method2:function(){
alert("method2");
}
}
function class2(){
//构造函数
}
//让class2继承于class1
for(var p in class1.prototype){
class2.prototype[p]=class1.prototype[p];
}

//覆盖定义class1中的method方法
class2.prototype.method=function(){
alert(2);
}
//创建两个类的实例
var obj1=new class1();
var obj2=new class2();
//分别调用obj1和obj2的method方法
obj1.method();
obj2.method();
//分别调用obj1和obj2的method2方法
obj1.method2();
obj2.method2();

//为类添加静态方法inherit表示继承于某类
Function.prototype.inherit=function(baseClass){
for(var p in baseClass.prototype){
this.prototype[p]=baseClass.prototype[p];
}
}
//这里使用所有函数对象（类）的共同类Function来添加继承方法，这样所有的类都会有一个inherit方法，用以实//现继承，读者可以仔细理解这种用法。于是，上面代码中的：
//让class2继承于class1
for(var p in class1.prototype){
class2.prototype[p]=class1.prototype[p];
}
//可以改写为：
//让class2继承于class1
class2.inherit(class1)
//这样代码逻辑变的更加清楚，也更容易理解。通过这种方法实现的继承，有一个缺点，就是在class2中添加类成员//定义时，不能给prototype直接赋值，而只能对其属性进行赋值