Question

我总是在努力处理JavaScript对象/类继承问题。我也不喜欢我能找到的所有示例中的重复代码（对象的名称需要写几次）。

据我所知，JavaScript中的正确继承如下所示：

function Parent(v) {
    console.log('Parent', v);
}
Parent.prototype.helloParent = function() {
    console.log('hello parent');
}


function Child(v) {
    Parent.call( this, 'from child');

    console.log('Child');
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.helloChild = function() {
    console.log('hello child');
}


c = new Child();

console.log(c instanceof Child);

c.helloParent();
c.helloChild();

在这个例子中，扩展＆＃34; Parent＆＃34;对象，我必须写＆＃34; Child＆＃34;四次，＆＃34;父母＆＃34;两次。我想只输入一次 - 因为DRY。

我也不想为这个继承内容定义自定义函数。这对我来说感觉很奇怪，需要一个用户函数来实现这样一个基本功能（并且很难读取未知代码，因为你永远不知道这个特定的继承函数究竟在做什么）。

所以我试图找到一个更简单的版本。但是我不确定我是否错过了什么？

function Parent(v) {
    console.log('Parent', v);

    this.helloParent = function() {
        console.log('hello parent');
    }
}


(Child = function(v) {
    this.constructor('from child');

    console.log('Child');

    this.helloChild = function() {
        console.log('hello child');
    }
}).prototype = Parent.prototype;


c = new Child();

console.log(c instanceof Child);

c.helloParent();
c.helloChild();

这可以，还是有严重的缺点？

编辑：关于评论，遗憾的是它似乎有一些严重的缺点。有没有其他解决方案可以减少至少多次写出父对象的名称？

Answer 1

我使用两个非常小的函数来简化JavaScript中的继承：

function defclass(prototype) {
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

function extend(constructor, keys) {
    var prototype = Object.create(constructor.prototype);
    for (var key in keys) prototype[key] = keys[key];
    return defclass(prototype);
}

使用如下：

var Parent = defclass({
    constructor: function (a) {
        console.log("Parent", a);
    },
    helloParent: function () {
        console.log("helloParent");
    }
});

var Child = extend(Parent, {
    constructor: function () {
        Parent.call(this, "fromChild");
        console.log("Child");
    },
    helloChild: function () {
        console.log("helloChild");
    }
});

最后：

var child = new Child;
console.log(child instanceof Child);
child.helloParent();
child.helloChild();

全部放在一起：

function defclass(prototype) {
    var constructor = prototype.constructor;
    constructor.prototype = prototype;
    return constructor;
}

function extend(constructor, keys) {
    var prototype = Object.create(constructor.prototype);
    for (var key in keys) prototype[key] = keys[key];
    return defclass(prototype);
}

var Parent = defclass({
    constructor: function (a) {
        console.log("Parent", a);
    },
    helloParent: function () {
        console.log("helloParent");
    }
});

var Child = extend(Parent, {
    constructor: function () {
        Parent.call(this, "fromChild");
        console.log("Child");
    },
    helloChild: function () {
        console.log("helloChild");
    }
});

var child = new Child;
console.log(child instanceof Child);
child.helloParent();
child.helloChild();

希望有所帮助。

Answer 2

在javascript中的oop是丑陋的。（至少在支持类和实现关键字的ES6之前），但即使是ES6也不支持多重继承。我为javascript写了a small class library (available on github)，这使得创建类和继承更容易开发和维护。例如，创建一个类只需执行此操作：

ds.make.class({
    type: 'a',
    constructor: function (x) { this.val = x; },
    mul: function (s) {
        this.val *= s;
        return this;
    }
});

// now to inherit class a just do this...
ds.make.class({
    type: 'b',
    inherits: a,              
    constructor: function (x) { this.val = x; },
    sub: function (s) {
        this.val -= s;
        return this;
    }
});
var o = new b(5);
var output = o.mul(3).sub(5).val;    // output = 10

更简单的JavaScript继承，没有重复的代码

2 个答案: