JavaScript 继承,看过来

2019-04-03 13:55:01 +08:00
 liujianwei

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())
1545 次点击
所在节点    程序员
6 条回复
GTim
2019-04-03 14:16:07 +08:00
9102 年了,当然是 ES6 + Babel
leemove
2019-04-03 14:19:27 +08:00
es6 时代肯定用 class,es5 的时候基本都用你这个列表的第一种,详细的可以参考高程,没记错里面应该有六种.
murmur
2019-04-03 14:20:25 +08:00
用了 vue 之后就发现对于应用层来说,mixin+plugin 的方法比 js 假 oo 好得多
KuroNekoFan
2019-04-03 14:43:31 +08:00
用 class 就好
love
2019-04-03 14:48:23 +08:00
都 9102 年了,还在整这个,直接 class 走起
ourleven
2019-04-08 18:54:41 +08:00
@murmur +1

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/551644

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX