深入剖析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直接赋值，而只能对其属性进行赋值