美文网首页JavaScript
构造函数继承方法

构造函数继承方法

作者: 开着五菱宏光的小白 | 来源:发表于2020-05-13 21:03 被阅读0次

1.ES5方法

  // 组合继承
function Person(name) {
    this.name = name;
}
function Chinese(name) {
    Person.call(this, name)
}        
function proto(child, parent) {
    child.prototype = new parent()
    child.prototype.constructor = child
}
proto(Chinese, Person)

注意点

  • 需要注意的是子类继承父类时prototype不能直接用父类的prototype赋值,这样会共用父类的prototype地址,使子类可以修改父类prototype对象。
  • 指向父类的实例化对象,即子类的实例化对象proto指向父类的prototype对象。
  • 此时会出现子类的prototype中的constructor指向混乱的问题,所以需要对子类的constructor属性重新赋值

缺点

  • 上面的方法会使父构造函数执行两次 Father.call的调用、new Father, 不是很理想
// 寄生组合式继承
function Person(name) {
    this.name = name
}
function Chinese(name) {
    Person.call(this,name)
}
function create(prototype) {
    function Super() {}
    Super.prototype = prototype
    return new Super()
}
function proto(child, parent) {
    const prototype = create(parent.prototype)
    prototype.constructor = child
    child.prototype = prototype
}
proto(Chinese, Person)

2.ES6

class Father {
    constructor (x,y) {
        this.x = x;
        this.y = y;
    }
    sum() {
        console.log(this.x + this.y)
    }
}
class Son extends Father{
    constructor (x,y) {
        super(x,y);
    }
}
var son = new Son(1,1);
son.sum();

通过super调用父类的普通函数

相关文章

  • 三种常见继承

    1.原型继承 2.构造继承 对比 构造函数继承的方法类似于复制,消耗内存 构造函数继承的方法不能改变,而原型继承可...

  • ES6 类和继承

    构造函数 静态方法 继承

  • 浅谈javaScript继承

    原型和构造函数 prototype属性对Object添加属性和方法 构造函数实例化过程 原型和继承 简单继承 继承

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

  • ES5和ES6中继承的不同之处

    1、JS中是没有继承的,不过可以通过构造函数或是原型等实现继承,ES5实现继承的方法——构造函数,当一个构造函数加...

  • 继承

    1.构造函数实现继承,具体:在构造函数中,使用apply()和call()方法实现继承 function Pers...

  • js 继承

    构造函数继承 类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性。call和apply方法为类...

  • 构造函数继承方法

    1.ES5方法 需要注意的是子类继承父类时prototype不能直接用父类的prototype赋值,这样会共用父类...

  • Javascript如何实现继承

    构造函数继承 原型构造函数组合继承

  • JS继承方法详解以及优缺点

    前置阅读:理解原型、new、构造函数 构造函数直接实现 问题:通过构造方法继承的子类,可以获取到父类构造函数当中的...

网友评论

    本文标题:构造函数继承方法

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