将对象文字用于原型类 [英] Using object literal for prototype classes

问题描述

我正在编写一些JavaScript类（老派，不使用ES2015 / ES6，并且我不想使用Babel或其他编译器），并且我有一个继承自另一个的类，

I'm writing some JavaScript classes (old school and NOT using ES2015/ES6 and I don't want to use Babel or other transpilers) and I have one that inherits from the other, overriding one of the parent methods.

所以我有我的初始 App.Hello 类：

var App = {};
App.Hello = function(args) {
    this.name = args.name;
}
App.Hello.prototype = {
    constructor: App.Hello,
    sayHello: function() {
        console.log('Hello, ' + this.name);
    },
    sayGoodbye: function() {
        console.log('Goodbye, ', this.name);
    }
}

然后是我的 App。 Yo 继承自它的类：

An then my App.Yo class which inherits from it:

// inherits from App.Hello
App.Yo = function(args) {
    App.Hello.call(this, args);
}
App.Yo.prototype = Object.create(App.Hello.prototype);
App.Yo.prototype = { // want to combine this with above!
    constructor: App.Yo,
    sayHello: function() {
        console.log('Yo, ', this.name);
    }
}

但是，因为我使用的是对象文字结构，所以我覆盖了我将 App.Yo 的原型传递给构造函数和 sayHello Object.create 后的$ c>方法。因此，我不会从 App.Hello

However because I'm using Object literal structure I overwrite the prototype of App.Yo when I pass it the constructor and sayHello methods after setting the Object.create. So I don't inherit the sayGoodby method from App.Hello

1继承saysayGood方法。我该如何使用字面结构解决这个问题？

我知道我可以做到：

App.Yo.prototype = Object.create(App.Hello.prototype);
App.Yo.prototype.constructor = App.Yo;
App.Yo.prototype.sayHello = function sayHello() {
    console.log('Yo, ', this.name);
}

但是我想保留字面结构，因为我的课程将有一个其中有很多不同的方法。因此，请保持其整洁。

But I want to keep the literal structure as my classes are going to have a lot of different methods in them. So want to keep it nice and tidy.

2。 构造函数是否也嵌套为文字的一部分？

2. Is it possible to nest the complete class as a literal? So have the constructors as well nested as part of a literal?

eg

App.Hello = function(args) {
    this.name = args.name;
}

和

App.Yo = function(args) {
    App.Hello.call(this, args);
}

推荐答案

1. 如何使用字面结构解决这个问题？

使用 Object.assign ，它在ES2015中添加，但可以进行多填充，因此您不必进行转换：

Use Object.assign, which was added in ES2015 but which can be polyfilled so you don't have to transpile:

App.Yo.prototype = Object.assign(Object.create(App.Hello.prototype), {
    constructor: App.Yo,
    sayHello: function() {
        console.log('Yo, ', this.name);
    }
});

或者如果您不想进行polyfill，只需使用自己的帮助器，例如标准的 extend 函数（jQuery有一个称为 $。extend 的函数，许多其他实用程序库也是如此）：

Or if you don't want to polyfill, just use your own helper, like the standard extend function (jQuery has one called $.extend, as do many other utility libraries):

function extend(target) {
    var i, source;
    for (i = 1; i < arguments.length; ++i) {
        source = arguments[i];
        Object.keys(source).forEach(function(name) {
            target[name] = source[name];
        });
    }
    return target;
}

App.Yo.prototype = extend(Object.create(App.Hello.prototype), {
    constructor: App.Yo,
    sayHello: function() {
        console.log('Yo, ', this.name);
    }
});

1. 是

是的，可以通过进一步使用辅助函数来实现。例如：

Yes, by going further with helper functions. For instance:

function derive(base, props) {
    var cls = function() {
        return base.apply(this, arguments);
    };
    cls.prototype = Object.create(base.prototype);
    Object.assign(cls.prototype, props); // Or use your `extend` here
    return cls;
}

App.Yo = derive(App.Hello, {
    constructor: App.Yo,
    sayHello: function() {
        console.log('Yo, ', this.name);
    }
});

当然，其中缺少很多功能，例如控制 Yo 与传递给 Hello 的关系。

Of course, there are a lot of features missing from that, like controlling which arguments you use in Yo vs. passing on to Hello.

如果想要进一步探索，您可以查看我的 世系库，这使得在ES5及更早版本中创建类变得相当简单和声明性。就个人而言，由于ES2015和转译，我认为它已经过时了，但是您说过您不想使用转译器...

If you want to explore this further, you can look at my Lineage library, which makes creating classes in ES5 and earlier fairly simple and declarative. Personally, I consider it obsolete because of ES2015 and transpiling, but you've said you don't want to use a transpiler...

这篇关于将对象文字用于原型类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！