面向对象编程与JavaScript

Question

我有面向对象编程的背景，开始大量使用JavaScript。随着项目的发展，它变得越来越难以维护。在Java中，我应用面向对象编程原则来控制事物。对于JavaScript，我应该做什么，应该学习什么来使JavaScript应用程序保持可控？

- SBel

---

看看Backbone.js，也许再试试Coffeescript。它们很好地协同工作。 - asawyer

JavaScript 是面向对象的。 - Gumbo

请查看helephant以获取一些面向对象编程的想法。 - jbabey

可能是JavaScript中是否可能使用面向对象编程？的重复问题。 - PeeHaa

这里有许多关于Web开发相关的JS方面的好建议。对于将其视为一种语言，Flanagan的“JavaScript权威指南”是非常宝贵的。 - EBarr

阅读《JavaScript权威指南》这本书——如果你从其他传统语言转向JS，那么这是必读的。 - bryanmac

Answer 1

你也可以将面向对象编程的原则应用到Javascript开发中。Javascript使用原型继承，但这只是一种实现细节。概念仍然是相同的。你熟悉的大多数概念在Javascript中都有直接对应物。

其他经过验证的方法也同样适用： 1) 保持DRY -- 不要重复自己。重复的代码总是不好的。 2) 分离关注点 -- 使用MVC或MVVM模式来保持代码整洁，只做一件事情。 3) 测试 -- 当我听到“难以维护”时，我会理解为缺乏测试。你可以为Javascript项目编写单元测试。 4) 代码审查 -- 代码审查可以成为拒绝重复代码、不恰当编码、不规范等问题的好方法……

- hvgotcodes

---

...嗯，足够接近了。然而，了解这个区别非常重要；它绝对值得深入研究。 - Jeffrey Sweeney

“Close enough”是什么意思？你不同意吗？ - hvgotcodes

原型不等同于子类；在字段和函数“继承”方面有一些区别。例如，多个对象共享一个原型时，它们真正共享一个原型字段，并且更改它可能会更改所有子对象的属性。 - Jeffrey Sweeney

好的。我没有说是同义词。我是说类比的。 - hvgotcodes

Answer 2

这是在JavaScript中定义对象和方法的方式。

function SomeObj() {

    this.someMethod = function() {
        alert('boo');
    }
}

var o_obj = new SomeObj();
o_obj.someMethod(); //alerts "boo"

希望这有所帮助。

您也可以使用原型来创建静态函数。

this.prototype.someMethod = function() {
    alert('boo');
}

- C0D3

---

请在 someObj 中使用 首字母大写。这是 JavaScript 中的标准命名规则。它表明应该使用 new 来创建对象的实例。与例如 var now = new Date(); 相比较。 - Oleg

没错。对象名称甚至变成了蓝色，因为它们以大写字母开头。 - C0D3

我建议您使用http://www.jslint.com/来验证代码。在您之前的代码中，您会看到“构造函数名'someObj'应以大写字母开头”的消息。此外，您会发现在`this.someMethod = function() { alert('boo'); }`之后应该包括';'，因为它是赋值语句。 - Oleg

Answer 3

在JavaScript中定义简单对象和方法的另一种方式（无需使用new）。

function creaeSomeObj() {
    var that = {};
    that.someMethod = function() {
        alert('boo');
    }
    return that;
}

var o_obj = createSomeObj();
o_obj.someMethod(); //alerts "boo"

这种模式不支持继承，但很多时候它已经足够了。

- viebel

Answer 4

当我遇到相同的情况时，我开始研究“别人是如何做的”。最终我发现了http://dojotoolkit.org/和http://jquery.com，我想知道他们是如何实现小部件/插件的，以便其他人可以扩展这个框架。

- Simon Edström

Answer 5

为什么要使用“vs”？JavaScript支持面向对象编程，但不是像Java那样传统的基于类的方式。

JavaScript的面向对象编程通常被称为“原型继承”，更具体地说是“委托式原型继承”。这可以简化为“如果你在一个对象中寻找属性'foo'，并且在该对象中找不到它，那么尝试在对象的原型中查找'foo'。也就是说，属性的查找被委托给了对象的原型（我们说对象从原型中继承属性）。

原型继承的工作方式有一些影响。例如：

JavaScript中的对象是“动态”的，因为它们只是一堆名称-值对。在运行时可以添加和删除新属性，因此它们比典型类意义上的对象更少“静态”。

委托原型继承的工作方式（“如果你在这里找不到原型，那么就在这里找”）意味着它比经典OOP要简单得多。从纯粹的原型角度来看，例如，您不需要构造函数。“方法”只是附加到原型的常规函数（这意味着它们在所有继承对象上都可用作属性）。

使用原型和经典继承都有优点和缺点，但重要的是要记住它们是不同的。

现在，JavaScript在某些方面受到Java和其他经典语言的启发，因此他们决定使语法“类似于类”，以便习惯于类的人更容易入手。我不会详细阐述这一点；它已经在其他地方得到了广泛的记录。

一些有趣的帖子：

• hughfdjackson的JavaScript面向对象编程介绍 -- 简短而且更加直接明了，
• Sorella的更长的"理解JavaScript面向对象编程" -- 相当深入和非常完整的资源。

- FireFly

Answer 6

Pluralsight有一门关于这个主题的课程：JavaScript代码结构，可能会提供一些见解。两个注意事项：1.我还没有参加过这门课程——但内容看起来很棒，我对我参加过的其他Pluralsight课程印象深刻；2.它不是免费的（但如果它能节省你更好的代码结构所需的时间，那么花点小钱也许是值得的）。不，我不在Pluralsight工作。

除了本帖中提到的js框架之外，还可以看看Knockoutjs——这里有很棒的教程learnknockoutjs.com。Knockout专注于MVVM。请注意，在stackoverflow上有一个很好的讨论比较Backbone和Knockout，Pluralsight也有一门关于使用Knockout的课程，我已经观看并推荐。

- Chris Marcus

Answer 7

在JavaScript中，函数是对象；Mozilla Developer Network, McKoss, SitePoint, 和 JavaScript Kit 进一步解释了这一点。

示例JavaScript对象

function myObj() {
  this.myMethod = function() {
    alert('hello');
  } 
}
var demo_obj = new myObj(); 
demo_obj.myMethod();

模式以保持事情的控制

• 这里列出的模式是特定于JavaScript的。
  1. 使用脚本加载器。
  2. 使用JS框架。
  3. 对您的JavaScript进行Lint处理。 - 可在Rhino或node上运行此工具。
  4. 压缩您的JS。
• 这里列出的模式是OOP语言的典型，而不是特定于JavaScript的。
  1. DRY-不要重复自己。
  2. 观察者（Pub / Sub）模式。

反模式以让事情失去控制

1. 污染命名空间
2. 使用eval()
3. 针对Object对象的原型
4. 内联脚本标签
5. 使用document.write

- TMB

---

这怎么回答问题呢？ - user395760