模拟ExtJS底层继承(原理)

本文探讨ExtJS的底层继承实现,详细解释了如何同时继承父类的模板、原型对象,以及通过call和apply实现在子类实例化时传递参数,并确保仅一次继承父类的原型对象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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属性就不可以枚举出来了。
         	}
         	
         }

小博主在这里就说到这些了,希望大家多多交流,互相进步。。。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值