创建Javascript类的正确方法是什么? [英] What is the correct way to create a Javascript class?

问题描述

我试图弄清楚如何正确构造我的Javascript类(或单例对象).

I'm trying to figure out how to construct my Javascript classes (or singleton objects) correctly.

var obj = new Object();
obj.foo = 'bar';
obj.method = function() { ...}

var obj = {
    foo : 'bar',
    method : function() { ...}
}

var obj = function(){}
obj.prototype = {
    foo : 'bar',
    method: function() { ... }
}

我希望能够设置几个属性并分配可用的方法.我还希望能够使用

I want to be able to set a couple of properties and assign the methods available. I would also like to be able to use things like mixins on the objects so I can extend these objects with things like events.

推荐答案

我试图弄清楚如何正确构造我的Javascript类(或单例对象).

I'm trying to figure out how to construct my Javascript classes (or singleton objects) correctly.

这些(类"和单例对象)之间有很大的区别.您的前两个示例是一次性对象(单例).您的第三个(最后一个)示例创建一个构造函数，该函数可让您创建共享同一原型的多个对象.我建议在构造函数上 augmenting prototype属性，而不是在执行操作时将其替换，例如:

There's a big difference between those ("classes" and singleton objects). Your first couple of examples are one-off objects (singletons). Your third (last) example creates a constructor function that will allow you to create multiple objects sharing the same prototype. I would recommend augmenting the prototype property on the constructor function rather than replacing it as you're doing, e.g.:

var Thingy = function() {   // Or use a function declaration rather than expression
    // Optional initialization code here
};
Thingy.prototype.foo = 'bar';
Thingy.prototype.method = function() {
    // Method code here
};

(按照惯例，构造函数以大写字母开头.)

(Constructor functions, by convention, start with an upper case letter.)

您使用哪种(单例或构造函数)取决于您的需求.

Which you use (singleton or constructor function) depends on what you need.

从ES2015开始(又称"ES6")，它更简单，尽管没有用于定义非方法原型属性的新语法(您的foo)；一旦此提议提出，ES2017或ES2018中可能就会出现这种情况.向前，但直到那时:

As of ES2015 (aka "ES6"), it's simpler, although there's no new syntax for defining a non-method prototype property (your foo); there probably will be in ES2017 or ES2018, once this proposal moves forward, but until then:

class Thingy {
    constructor() {
        // Optional initialization code here
    }
    method() {
    // Method code here
    }
}
Thingy.prototype.foo = 'bar';

如果您需要进入继承层次结构，则在旧的ES5语法中会涉及很多方面:

If you need to get into inheritance hierarchies, in the old ES5 syntax there's a fair bit of plumbing involved:

var Base = function() {
};
Base.prototype.method = function(arg1) {
    // ...
};

var Derived = function() {
    Base.call(this);
};
Derived.prototype = Object.create(Base.prototype);
Derived.prototype.constructor = Derived;
Derived.prototype.method = function(arg1) {
    // Using Base's `method`, if desired, is a bit ugly:
    Base.prototype.method.call(this, arg1);
};

...这就是为什么您经常看到像Prototype的Class之类的东西或我自己的

...which is why you used to see libraries stepping in, like Prototype's Class stuff, or my own Lineage; those are outdated by ES2015 syntax, though, whcih makes it downright easy:

class Base {
    method(arg1) {
        // ...
    }
}
class Derived extends Base {
    method(arg1) {
        // Use's the superclass's `method`, if desired, is easy:
        super.method(arg1);
    }
}

重新输入问题的标题:

创建Javascript类的正确方法是什么?

What is the correct way to create a Javascript class?

因为JavaScript是一种非常灵活的语言，所以有几种同样正确的方法可以在JavaScript中创建对象的类".有标准的构造函数，构建器"函数，Object.create(在启用ES5的环境中)，使您可以进行更多直接的原型继承，以及其他一些功能. JavaScript的一大优点是您可以选择类"的样式.

There are several equally-correct ways to create "classes" of objects in JavaScript, because JavaScript is a very flexible language. There are standard constructor functions, "builder" functions, Object.create (on ES5-enabled environments) which lets you do more direct prototypical inheritance, and several others. One of the great things about JavaScript is that you get to choose your style of "class".

这篇关于创建Javascript类的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！