js继承

作者: 月半女那 | 来源:发表于2019-03-06 01:24 被阅读0次
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayhi = function() {
        console.log('hellow',this.name,this.age)
    }
}
Person.prototype.sayNo = function() {
    console.log('no',this.name,this.age)
}

1.通过构造函数(call)

优点:

  1. 可以实现多继承(call多个父类对象)
    缺点:
  2. 只能继承父类的实例属性和方法,不能继承原型链上的属性/方法
  3. 实例不是父类的实例,而是子类的实例,
  4. 无法实现函数的复用,每个子类都有父类实例函数的副本,影响性能
function Student(name, age) {
    Person.call(this, name, age)
}

var p = new Student('hhah', 21)
p.sayhi();

p instanceof Person // false
p instanceof Student  // true

2. prototype(原型链继承)

优点:

  1. 简单易于实现
  2. 父类新增原型方法/属性,子类都能访问到
    缺点:
  3. 创建子类实例的时候无法向父类构造函数传参
  4. 来自原型对象的所有属性被实例共享
function Student1() {}
Student1.prototype = new Person('haha', 22)
var p1 = new Student1();
p1.sayhi();
p1.sayNo()

3.组合继承

优点:

  1. 不存在引用属性共享问题
  2. 既可以继承实例方法/属性 ,也可以继承原型属性/方法
    缺点:
  3. 调用了两次父类构造函数,生成两份实例 // 会多消耗一点内存
function Student2(name, age) {
    Person.call(name, age)
}
Student2.prototype = new Person()
var p2 = new Student2('heie', 22)
p2.sayhi();
p2.sayNo();

4. 拷贝继承

优点:

  1. 可以实现多继承
    缺点:
  2. 无法获取父类的不可枚举属性
  3. 效率低,内存占用高
function Student3(name, age) {
    var person = new Person(name, age);
    for (const key in person) {
        Student3.prototype[key] = person[key]
    }
}

var p3 = new Student3('hehhe', 22)
p3.sayhi()
p3.sayNo()

5. 寄生式继承

优点:

  1. 原型式继承的一种扩展
    缺点:
  2. 较为复杂
  3. 没有类的概念
function objectCreat(obj) {
  function F() {}
  F.prototype = obj;
  return new F()
}

var person = new Person()

function createSubObj(obj) {
  var sub = objectCreat(obj)
  sub.name = 'heheh';
  sub.age = 22;
  return sub;
}

var p4 = createSubObj(person)
p4.sayhi()
p4.sayNo()

5.寄生组合继承

优点:

  1. 修复了组合继承的问题
var con = createSubObj(Person.prototype);

function Sub(name, age) {
    Person.call(this, name, age)
}
Sub.prototype = con;
con.constructor = Sub;
var sub1 = new Sub('hhhh', 22);
sub1.sayhi()
sub1.sayNo()


// 一种简单的写法
function F() {}
F.prototype = Person.prototype;

function Student5(name, age) {
    Person.call(this, name, age)
}
Student5.prototype = new F();
var p5 = new Student5('he', 33)
p5.sayhi();
p5.sayNo()

相关文章

  • 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/fhtzuqtx.html