深入剖析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());//3alert(triangle.getArea());//25var rectangle = new Rectangle(10, 10);alert(rectangle.getEdge());//4alert(rectangle.getArea());//100//利用反射机制和prototype实现继承function class1(){  //构造函数}class1.prototype={  method:function(){   alert(1);  },  method2:function(){   alert("method2");  }}function class2(){  //构造函数}//让class2继承于class1for(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继承于class1for(var p in class1.prototype){   class2.prototype[p]=class1.prototype[p];}//可以改写为：//让class2继承于class1class2.inherit(class1)//这样代码逻辑变的更加清楚，也更容易理解。通过这种方法实现的继承，有一个缺点，就是在class2中添加类成员//定义时，不能给prototype直接赋值，而只能对其属性进行赋值