JS 继承

作者: 古月丶 | 来源:发表于2020-03-17 21:04 被阅读0次

一、原型链继承
原理:利用原型让一个引用类型继承另一个引用类型的属性和方法。

function SuperFn() {
  this.text= "hello world!";
}
SuperFn.prototype.say = function() {alert(this.text)};
function SubFn() {}
SubFn.prototype = new SuperFn();

var a = new SubFn();
a.say();

缺点:
1.超类型构造函数的属性会被所有实例所共享。
2.无法在不影响所有实例对象的情况下给超类型构造函数传递参数。


二、构造函数继承
原理:也叫伪造对象继承或者经典继承,即在子类型构造函数内部调用超类型构造函数,它解决了无法向超类型构造函数传参的问题。

function SuperFn(text) {
  this.text = text;
}
SuperFn.prototype.say = function() {alert(this.text)};
function SubFn(text) {
  SuperFn.call(this, text);
}

var a = new SubFn('hello world!');
a.say();  // 会报错

缺点:
1.无法继承超类型构造函数的原型属性。


三、组合继承
原理:组合使用原型链继承和构造函数继承,利用原型链继承方式实现对原型属性和方法的继承,利用构造函数继承方式实现对实例的属性和方法的继承。

function SuperFn(text) {
  this.text = text;
}
SuperFn.prototype.say = function() {alert(this.text)};
function SubFn(text) {
  SuperFn.call(this, text);
}
SubFn.prototype = new SuperFn();

var a = new SubFn('hello world!');
a.say();

缺点:
调用了两次超类型构造函数。


四、寄生组合继承(推荐)
解决了组合继承会调用两次超类型构造函数的缺陷。

function SuperFn(text) {
  this.text = text;
}
SuperFn.prototype.say = function() {alert(this.text)};
function SubFn(text) {
  SuperFn.call(this, text);
}
function inheritPrototype(SuperFn, SubFn) {
  var proto = Object.create(SuperFn.prototype); //创建对象
  proto.constructor = SubFn;  //增强对象
  SubFn.prototype = proto;  //制定对象
}
inheritPrototype(SuperFn, SubFn);
SubFn.prototype.sleep = function() {alert('sleepping')}

var a = new SubFn('hello world!');

相关文章

  • Js的继承

    js的继承 @(js)[继承, js, 前端] 组合继承是原性链继承和构造函数继承的合体,它汲取了二者各自的有点,...

  • JS继承

    JS中的继承 许多OO语言都支持两种继承方式:接口继承和实现继承; 因为JS中没有类和接口的概念 , 所以JS不支...

  • #js继承

    js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 类式继承是...

  • js继承遇到的小问题

    这两天在看js继承方面,它不像OC那种传统的类继承。js继承方式还是挺多的。比如:原型继承、原型冒充、复制继承 原...

  • JS中继承的实现

    JS中继承的实现 #prototype (js原型(prototype)实现继承) 全局的Function对象没有...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • JavaScript 10

    js继承的概念 1.通过原型链方式实现继承(对象间的继承) 2.类式继承(构造函数间的继承) 由于js不像Java...

  • JS继承的实现的几种方式

    前言 JS作为面向对象的弱类型语言,继承也是非常强大的特性之一,那么如何在JS实现继承呢? JS继承的实现方式 既...

  • 2019-03-25 继承

    js中通过原型来实现继承 组合继承:原型继承+借用构造函数继承

  • 继承方式(6种)1.7

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。 JS继承...

网友评论

      本文标题:JS 继承

      本文链接:https://www.haomeiwen.com/subject/qintyhtx.html