38

用大括号括起来的对象字面量 =name 值对。

构造函数= 用于使用关键字 new 创建多个实例的函数。

原型=用于文字的扩展。

这是我到目前为止所理解的。但是我研究得越多,我就越困惑它们各自的意义是什么。我在我的代码中使用过构造函数、原型和文字几次。但每次我使用它们时,我都觉得我仍然没有意识到它的全部潜力。我现在想比初学者领先一步。我希望stackoverflow的人们帮助我实现它

  1. 哪种是最好的编程方式(对象文字 vs 构造函数 vs 原型

  2. 可以仅使用对象文字而不使用构造函数和原型来编写具有构造函数和原型的代码 吗?

  3. 匿名函数的意义是什么。

一个非常简单的例子也可以证明它们的重要性。我知道它们是什么,但我不知道它们可以做什么魔法。

4

1 回答 1

29

对象文字和函数之间存在(在我看来是根本的)差异,即“私有”变量。由于无法实例化对象(因为它已经是 的实例Object),因此不可能拥有自己的(新)范围。它是高级 JS 编程的基本概念。拥有一个新的作用域可以让你做几乎所有的事情(你可以声明你自己的windowdocument或者你想要的任何东西,除了你自己的作用域内的 JS关键字)。现在,一些简单的例子:

假设您要创建同一对象的大量实例(使用尽可能少的行):

function MyObj(i) {
    var privateCounter = "I am the instantiated object " + i + " .";
    this.counter = function() {
        return privateCounter;
    };
}

var MyObjList = [],
    ObjLitList = [];
for (var i = 0; i < 100; i++) {
    MyObjList.push(new MyObj(i));
    ObjLitList.push({counter: "I am the literal object number " + i + "."});
}

现在您有 200 个对象,它们几乎但不完全一样。您可以根据需要扩展它们,因为函数对象,但对于函数,您不能private直接访问变量。让我们看看函数有哪些优点:

  • 它被视为Object
  • 它有自己的Prototype
  • 它有私有变量

Objects?

  • 一个Object
  • 它没有自己的Prototype,但您可以声明函数并扩展对象本身
  • 它没有私有变量

除了私有变量之外,它们彼此没有太大区别。

让我们看看一个函数的原型可以做什么:

MyObj.prototype.setX = function(x) {
    this.x = x;
}

使用原型允许您创建匿名函数的唯一实例(也可以命名然后分配),它将在实例之间共享。你怎么能用对象字面量做同样的事情呢?

function setX(x) {
    this.x = x;
}
var obj = {
    setX: setX
};

如您所见,您必须创建定义每次属性的对象,即setX. 否则,您可以扩展Object.prototype自身(但关于扩展原生 JS 对象的原型存在长期争论)。

那么最好的方法是什么?没有一个,这取决于你必须做什么,你需要从你的脚本中得到什么,这两者中的哪一个你觉得更舒服。

我更喜欢编写自己的函数并将它们视为类,因为它们更具可读性并且我能够使用“私有”变量。我不知道有人使用文字而不是函数。

至于问题:

哪种是最好的编程方式(对象文字 vs 构造函数 vs 原型)

回答。

可以仅使用对象文字而不使用构造函数和原型来编写具有构造函数和原型的代码吗?

是的,如果您不需要私有变量(并且如果脚本不是太大。想象一下 jQuery 写为对象文字 :D),您可以。

匿名函数的意义是什么。

哦,好吧,我可以举个例子来回答:

//code
myNamedFunction();
//code
function myNamedFunction() {
    alert("I'm defined everywhere! :)");
}

这有效,不会生成TypeError.

myAnonymousFunction();
var myAnonymousFunction = function() {
    alert("I'm defined after this declaration :(");
}
myAnonymousFunction(); // works!

这将导致Uncaught TypeError: undefined is not a function, 因为myAnonymousFunction只是对有效函数的引用(未命名,因此不能从脚本调用)。

关于这个论点有很多话要说,开始高级编程的一个好点是Javascript Garden。其他不错的读物是JS 中的 OOP 基础 - NetTutsPlus使用对象 - JS 中的 MDNOOP - Phrogz

希望这可以帮助!

旁注:函数也有一个很好的优势,因为它们可以this仅使用函数(call例如)来更改其上下文(),而对象则不能。

于 2013-06-23T13:44:54.020 回答