创建 JavaScript 类的最佳方法是什么？ [复制]

Question

可能重复：
Use of ‘prototype’ vs. ‘this’ in Javascript?
Object Oriented questions in Javascript

您能否推荐以下哪些是最好的或它们的优缺点？

方法一

function User() {

    this.name = "my name";
    this.save = function() {

    };
}

方法二

function User() {

    this.name = "my name";
}

User.prototype.save = function() {

}

Answer 1

来自 Java 和 PHP 的背景，我最初对 JavaScript 中的整个“类”概念感到困惑。这里有几点需要考虑。

建筑

首先，因为您可能会将您的类定义为..

Customer = function () {}
Customer.prototype = new Person();

如果您在构造过程中定义属性和方法，您最终会遇到各种各样的代码噩梦。原因是像Customer.prototype = new Person(); 这样的一段代码要求在 Customer 构造函数中调用 Person 以实现真正的继承。否则您最终将不得不始终知道原始代码的设置。举个例子：

Person = function (name) {
    this.name = name;
    this.getName = function () {return this.name}
}
Customer = function (name) {
    this.name = name;
}
Customer.prototype = new Person();

现在我们要更新 Person 以设置它们是否是“新的”：

Person = function (name, isNew) {
    this.name = name;
    this.isNew = isNew;
    this.getName = function () {return (this.isNew ? "New " : "") + this.name; }
}

现在在任何从 Person 继承的“类”上，您必须更新构造函数以遵循形式。您可以通过执行以下操作来解决此问题：

Customer = function () {
    Person.apply(this, arguments);
}

这将在新的“客户”范围内调用“人员”，让您不必了解人员构造。

速度

看看这些基准测试：http://jsperf.com/inherited-vs-assigned。
基本上，我在这里试图证明的是，如果您要en masse 创建这些对象，那么最好的方法是在prototype 上创建它们。像这样创建它们：

Person = function (name) {
    this.name = name;
    this.getName = function () {return this.name}
}

非常慢，因为对于每个对象创建，它都会创建一个新函数 - 它不会简单地查找已经存在的原型链。相反，如果您只有几个对象的方法被极其频繁地调用，则在本地定义它们有助于降低查找原型链所损失的速度。

共享属性

这总是让我着迷。假设您有以下内容：

Person = function () {
    this.jobs = {};
    this.setJob = function (jobTitle, active) {this.jobs[jobTitle] = active; }
}

Employee = function () {}
Employee.prototype = new Person();

var bob = new Employee();
bob.setJob('janitor', true);

var jane = new Employee();
console.log(jane.jobs);

你猜怎么着？简是个看门人！可不是闹着玩的！这就是为什么。由于您没有将 this.jobs 定义为实例化 Employee 的新对象，因此它现在只是查找原型链，直到找到“工作”并按原样使用它。很有趣，对吧？

因此，如果您想跟踪实例，这很有用，但在大多数情况下，您会发现它非常令人沮丧。您可以通过执行以下操作来解决此问题：

Employee = function () { Person.apply(this); }

这会强制“Person”创建一个新的“this.jobs”。

私有变量

由于在 JavaScript 中没有什么是真正“私有”的，所以获取私有变量的唯一方法是在构造函数中创建它们，然后在构造函数中初始化依赖它们的任何东西。

Person = function () {
    var jobs = {};
    this.setJob = function (jobTitle, active) {jobs[jobTitle] = active; }
    this.getJob = function (jobTitle) { return jobs[jobTitle]; }
}

但是，这也意味着您必须在继承类的每个实例化时调用该构造函数。

---

建议

http://ejohn.org/blog/simple-javascript-inheritance/

这是一个超级基础的课程设置。这很容易。有用。它会在 90% 的时间里做你需要做的事情，而不必处理 JavaScript 必须提供的所有疯狂:)

</rant>

Answer 2

最佳是一个非常主观的术语。

方法 1 提供了真正私有变量的可能性。例如：

function User() {
   var name = "fred";
   this.getName = function () { return name;};
}

方法 2 将使用更少的内存，因为所有用户对象都共享一个保存函数。

“最佳”将由您的具体要求决定。

Answer 3

JavaScript 是一种“基于对象”的语言，而不是“基于类”的语言。共享行为，即类概念，是通过链接原型实现的。

方法 1 不创建类。每次调用它时，您都会按照定义创建属性和函数，并且它们不会与其他“实例”共享。如果您替换 this.save，那么只有一个实例的行为会发生变化。

方法 2 实现共享行为。因此，它是人们与类和实例相关联的东西。如果您将 this.save 替换为不同的函数，则所有派生实例将立即具有新行为。

如果“最佳”意味着没有消耗内存的函数重新定义和共享常见行为（这是基于类的编程倾向于等同的），那么方法 2 就是要走的路。

Answer 4

正如其他人所提到的，有两个主要区别：

• 方法 1 将为 User 的每个实例创建一个新函数
• 方法 1 将能够访问构造函数范围内的局部变量

这里有一个例子来证明这些：

function User() {

    var name = "my name";

    this.foo = function() {
        // one function per User instance
        // can access 'name' variable
    };
}

User.prototype.bar = function() {
    // one function shared by all User instances
    // cannot access 'name' variable
};

var a = new User();
var b = new User();

console.log(a.foo === b.foo); // false; each instance has its own foo()
console.log(a.bar === b.bar); // true; both instances use the same bar()