最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JavaScript中的继承实现

    正文概述 掘金(him8)   2021-02-14   447

    非ES6代码实现继承的主流方式主要可以分为:
    构造继承、原型链继承、构造继承+原型链继承组合继承、以及在组合继承上衍生出的继承方式。

    构造继承 (借助call实现)

    • 实现
    function Super(age){
      this.age = age;
      this.say = function(){
        console.log(this.age)
      }
    }
    function Child(name,age){
      Super.call(this,age)
      this.name = name;
    }
    var child = new Child("min",23)
    console.log(child instanceof Super); // false
    console.log(child instanceof Child); // true
    
    • 优点

    (1) 可以实现多继承(call多个父类对象)
    (2) 构造函数中可向父级传递参数

    • 缺点

    (1) 只能继承父类实例的属性和方法,不能继承原型上的属性和方法
    (2) 实例并不是父类的实例,只是子类的实例

    原型链继承 (借助原型链实现)

    • 实现
    function Super(){
      this.getName = function(){
        console.log(this.name)
      }
    }
    function Child(name){
    	this.name = name;
    }
    Child.prototype = new Super();  // 这里可以传构造参数
    Child.prototype.constructor = Child;
    var child = new Child("min");
    console.log(child instanceof Super); // true
    console.log(child instanceof Child); // true
    console.log(child.constructor);  // Child
    
    • 优点

    (1) 父类原型属性与方法,子类都能访问到
    (2) 实例是子类的实例,也是父类的实例

    • 缺点

    (1) 无法实现多继承 (2) 创建子类实例时,无法向父类构造函数传参

    组合继承 (构造继承+原型链继承)

    • 实现
    function Super(age){
      this.age = age;
      this.getAge = function(){
        console.log(this.age);
      }
    }
    function Child(name,age){
      Super.call(this,age)
      this.name = name;
    }
    Child.prototype = new Super(1);  
    Child.prototype.constructor = Child;
    var child = new Child("min",23);
    console.log(child instanceof Super); // true
    console.log(child instanceof Child); // true
    console.log(child.constructor);  // Child
    
    • 优点

    (1) 结合了构造+原型链继承的优点

    • 缺点

    (1) Child.prototype = new Super(); 多调用了一次,使得原型对象中存在一些不必要属性,如上面例子中age属性

    寄生组合继承

    • 实现
    function Super(age){
      this.age = age;
      this.getAge = function(){
        console.log(this.age)
      }
    }
    function Child(name,age){
      Super.call(this,age)
      this.name = name;
    }
    (function(){
      function Copy(){}
      Copy.prototype = Super.prototype;
      Child.prototype = new Copy();
    })()
    Child.prototype.constructor = Child;
    var child = new Child("min",23);
    
    • 备注

    问:为什么没有直接使用 Child.prototype = Super.prototype;
    答:Child.prototype.constructor = Child;关键代码,上面写Super.prototype 也会变(引用类型,指向同一地址)

    • 优点

    (1) 这应该是实现继承最完美的方案了,es6的extends关键字,在babel转换后代码也是通过这种方式实现的继承。

    额外:借助(Object.create)

    • 实现
    function Super(age){
      this.age = age;
      this.getAge = function(){
        console.log(this.age)
      }
    }
    function Child(name,age){
      Super.call(this,age)
      this.name = name;
    }
    Child.prototype = Object.create(Super.prototype,{
      constructor:{   // 构造函数修复
        value: Child
      }
    })
    var child = new Child("min",23);
    console.log(child instanceof Super); // true
    console.log(child instanceof Child); // true
    console.log(child.constructor);  // Child
    

    起源地下载网 » JavaScript中的继承实现

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元