模拟ExtJS底层继承(原理)

ExtJS底层继承实现的比较完美，既实现了继承父类的模板，又继承了父类的原型对象，又用call，apply实现了子类实例化传参，还只继承了一遍父类的原型对象。其中的原理呢，看下面代码有详细的解释。

// 原型继承的方式：既继承了父类的模板，又继承了父类的原型对象 如 Boy.prototype = new Persion();

//混合继承：原型继承和类继承
//  父类
function Persion(name,age){
this.name = name;
this.age = age;
}
Persion.prototype = {
constructor:Persion, //此处可以不这样写  也可以通过Object.defineProperty()
sayHello:function  () {
alert('Hello world');
}
}

// 子类
function Boy(name,age,sex){
//call apply 实现继承 只复制了父类的模板
//为了更好的解耦  此处Persion = Boy.superClass.constructor
Boy.superClass.constructor.call(this,name,age);
this.sex = sex;
}
extend(Boy,Persion);
//这个方法就实现了Boy只继承了一遍Persion的原型对象 但是需要在原型对象赋值以后才能调用 否则报sayHello 不是一个function
var b = new Boy('c5',27,'男');
for(var i in b){
alert(i);//name age sex sayHello constructor  constructor被枚举出来了 也可以通过Object.defineProperty()
}
alert(b.name)// c5
alert(b.sex)//男
b.sayHello();//Hello world
Boy.superClass.sayHello.call(b); //Hello world 可以直接使用父类的方法
alert(Boy.superClass.constructor); //function Persion() {}构造体
//混合继承的缺点：做了3件事：继承父类的2遍模板，继承了1次父类的原型对象
//extend方法优点：做了2件事：继承父类的1遍模板，继承了1次父类的原型对象
function  extend(sub,sup) {
//目的：实现只继承父类的原型对象
var F = new Function(); //创建一个空函数 目的：空函数进行中转  这一想法不是一般人能想到的 实现中最重要的一步
F.prototype = sup.prototype; // 实现空函数的原型对象和超类的原型对象转换 间接实例F而不是超类
sub.prototype = new F();//原型继承
sub.prototype.constructor = sub;//还原子类的构造器
//保存一下父类的原型对象：一方面方便解耦 另一方面方便获得父类的原型对象
sub.superClass = sup.prototype;//此处实现了保存 自定义一个子类的静态属性 接受父类的原型对象
//判断父级的原型对象的构造器（加保险）
if(sup.prototype.constructor == Object.prototype.constructor){
sup.prototype.constructor = sup; //手动还原父类原型对象的构造器  也可以通过Object.defineProperty()的方法更好，constructor属性就不可以枚举出来了。
}

}