浅谈JavaScript 继承机制的实现

对象冒充的方法实现:

function Human() { //定义Human类  
    this.species = "Human";  
}  
function Sex(sex) { //定义Sex类  
    this.sex = sex;  
}  
function Chinese(name,sex) {  
    this.name = name;  
    this.newMethod1 = Human;    //对象冒充,指向Human对象  
    this.newMethod1();          //调用方法,实现继承  
    delete this.newMethod1; //删除该对象的引用,避免错误调用  
      
    this.newMethod2 = Sex;      //对象冒充,指向Sex对象  
    this.newMethod2(sex);       //调用方法,实现继承  
    delete this.newMethod2; //删除该对象的引用,避免错误调用  
}  
var chin1 = new Chinese("小明","Male"); 

　　

对象冒充的方法很简单易懂,原理就是利用方法的调用,在函数内实现属性的定义.

而且,对象冒充还能实现多继承.但也有不好地方.

如下:

function Human(){ //定义Human类  
    this.species = "Human";  
}  
function Sex(sex) { //定义Sex类  
    this.sex = sex;  
    this.species = "Animal"; //因为调用顺序,会替换Human类的species属性  
}  
function Chinese(name,sex){  
    this.name = name;  
    this.newMethod1 = Human;    //对象冒充,指向Human对象  
    this.newMethod1();          //调用方法,实现继承  
    delete this.newMethod1; //删除该对象的引用,避免错误调用  
      
    this.newMethod2 = Sex;      //对象冒充,指向Sex对象  
    this.newMethod2(sex);       //调用方法,实现继承  
    delete this.newMethod2; //删除该对象的引用,避免错误调用  
}  
var chin1 = new Chinese("小明","Male");  

　　

因为是通过调用函数来"继承"的,如果多继承时,父类出现同名属性时,会被优先级高的替代.

例如上面的代码中,Sex类会替换Human类的同名属性.

也可以通过call()和apply()方法来实现继承,

其实原理和对象冒充一样.

function Human(){       //定义Human类  
    this.species = "Human";  
}  
function Sex(sex) {     //定义Sex类  
    this.sex = sex;  
}  
function Chinese(name,sex){  
    this.name = name;  
    Human.call(this);  //call()方法  
    Sex.apply(this,[sex]);//apply()方法  
}  
var chin1 = new Chinese("小明","Male"); 

　　

这里是call()和apply()方法的介绍:http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp

其实对象冒充最大的问题就是,无法通过子类找到继承的父类.

所以这并非真正意义的继承.

chin1 instanceof Chinese;//true  
chin1 instanceof Human;//false  
chin1 instanceof Sex;//false  

　　

当继承的父类中有定义对应的方法时,每次定义的对象都会重新生成一个对应的方法,这样十分浪费内存,而且不便于管理.

function Human(){       //定义Human类  
    this.species = "Human";  
    this.fun = function() {};  
}  
function Sex(sex) {     //定义Sex类  
    this.sex = sex;  
}  
function Chinese(name,sex){  
    this.name = name;  
    Human.call(this);   //call()方法  
    Sex.apply(this,[sex]);  //apply()方法  
}  
var chin1 = new Chinese("小明","Male");  
var chin2 = new Chinese("小红","Female");  
chin1.fun === chin2.fun; //false  

　　

因此,下面要讨论的是原型继承(prototype).

function Human(){       //定义Human类  
    this.species = "Human";  
}  
function Chinese(name){  
    this.name = name;  
}  
Chinese.prototype = new Human(); //原型对象指向Human类  
Chinese.prototype.constructor = Chinese; //constructor属性时指向它的构造函数  
var chin1 = new Chinese("小明");  
chin1 instanceof Chinese; //true  
chin1 instanceof Human; //true  

这样就实现了真正意义上的继承.

相比对象冒充的方法,这样的写法不够直观.

但同时也解决了重复生成函数的问题.

最后,把原型继承实现简单的封装:

Object.prototype.extendTo = function(parent) {  
    this.prototype = new parent();  
    this.prototype.constructor = this;  
    this.uber = parent.prototype;  
}  
  
function Human(){       //定义Human类  
    this.species = "Human";  
    this.fun = function() {  
        return 0;  
    };  
}  
  
function Chinese(name){  
    this.name = name;  
}  
  
Chinese.extendTo(Human); //实现继承.  
  
var chin1 = new Chinese("小明");