• 请不要在回答技术问题时复制粘贴 AI 生成的内容
liujianwei
V2EX  ›  程序员

JavaScript 继承,看过来

  •  
  •   liujianwei ·
    jianliuwei · Apr 3, 2019 · 2403 views
    This topic created in 2602 days ago, the information mentioned may be changed or developed.

    JavaScript 有多种方式实现继承,下面这些大家哪种用的比较多,还有没有其它方式?

    ES6 引入的 class 是不是最佳实践呢? ES5 时代,大家都用什么方式?

    组合 /模块模式的方式是不是可以作为继承的替代?

    请大家指导,各抒己见。

    构造函数

    function SuperClass(p) {
        this.prop = p
        this.method = function () {return this.prop}
    }
    
    function SubClass(p2) {
        this.prop2 = p2
        this.method2 = function () {return this.prop2}
    }
    
    SubClass.prototype = new SuperClass('prop') // inherit/extends
    
    let so = new SubClass('prop2') // create instance
    
    console.log(so.method())
    console.log(so.method2())
    

    Object.create

    let SuperObject = {
        prop: 'prop',
        method: function () {
            return this.prop
        }
    }
    
    let SubObject = Object.create(SuperObject) // equals to inheritance/extension
    
    let so = Object.assign(SubObject, { // equals to instantiation
        prop2: 'prop2',
        method2: function () {
            return this.prop2
        }
    })
    
    console.log(so.method())
    console.log(so.method2())
    

    Object.setPrototypeOf

    let SuperObject = {
        prop: 'prop',
        method: function () {
            return this.prop
        }
    }
    
    let SubObject = {
        prop2: 'prop2',
        method2: function () {
            return this.prop2
        }
    }
    
    let so = Object.setPrototypeOf(SubObject, SuperObject) // equals to inheritance/extension, and  equals to instantiation also
    
    console.log(so.method())
    console.log(so.method2())
    

    Class

    class SuperClass {
        constructor(p) {
            this.prop = p
        }
    
        method() {
            return this.prop
        }
    }
    
    class SubClass extends SuperClass { // inherit/extends
        constructor(p2) {
            super('prop')
            this.prop2 = p2
        }
    
        method2() {
            return this.prop2
        }
    }
    
    let so = new SubClass('prop2') // create instance
    
    console.log(so.method())
    console.log(so.method2())
    

    组合或模块模式

    let SuperClass = {
        createNew: function (p) {
            let prop = p
            let o = {}
            o.method = function () {
                return prop
            }
            return o
        }
    }
    
    let SubClass = {
        createNew: function (p2) {
            let prop2 = p2
            let o = SuperClass.createNew('prop') // equals to inheritance/extension, you can use composition also
            o.method2 = function () {
                return prop2
            }
            return o
        }
    }
    
    let so = SubClass.createNew('prop2') // equals to instantiation
    
    console.log(so.method())
    console.log(so.method2())
    
    6 replies    2019-04-08 18:54:41 +08:00
    yemoluo
        1
    yemoluo  
       Apr 3, 2019
    9102 年了,当然是 ES6 + Babel
    leemove
        2
    leemove  
       Apr 3, 2019
    es6 时代肯定用 class,es5 的时候基本都用你这个列表的第一种,详细的可以参考高程,没记错里面应该有六种.
    murmur
        3
    murmur  
       Apr 3, 2019
    用了 vue 之后就发现对于应用层来说,mixin+plugin 的方法比 js 假 oo 好得多
    KuroNekoFan
        4
    KuroNekoFan  
       Apr 3, 2019
    用 class 就好
    love
        5
    love  
       Apr 3, 2019
    都 9102 年了,还在整这个,直接 class 走起
    ourleven
        6
    ourleven  
       Apr 8, 2019 via iPhone
    @murmur +1
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   933 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 21:01 · PVG 05:01 · LAX 14:01 · JFK 17:01
    ♥ Do have faith in what you're doing.