javascript的3种对象声明有什么不同？

Question

总之，我发现在javascript中声明对象有三种方法。

var Waffle = {
   tastes:'yummy'
};

var Waffle = function()
{
   this.tastes='yummy';
};

function Waffle() {
   var that = {};
   that.tastes = "yummy";
   return that;
}

第一种方式是Object literal，它没有constructor。我认为与Object literal相同的方式如下所示。

var Waffle = new Object();
Waffle.tastes = 'yummy';

(如果我的理解是错误的。请纠正我。)

我想知道这三种方式的区别是什么。

哪一个是最好的选择？

谢谢。

Answer 1

文字表示法和new Object()创建了一个对象，其原型直接是Object。此外，属性和方法也附加在实例上。

/*

Object
  A 
  | instance.__proto__
  | 
instance

*/

//all 3 yield the same result

var foo1 = {
  bar : 'bam!'
}

var foo2 = {}
foo2.bar = 'bam!';

var foo3 = new Object();
foo3.bar = 'bam!';

​

​

构造函数方法(声明函数或赋值函数表达式方法)在实例和Object之间有一个附加的原型级别，该级别包含附加到构造函数原型的原型函数。附加到构造器原型的任何内容都在所有实例之间共享。

/*

Object 
  A 
  | instance.__proto__.__proto__
  | 
constructor.prototype 
  A
  | instance.__proto__
  |
instance

*/

//these 2 are the same
//bar is attached at the instance

//function expression assigned to variable foo1
var foo1 = function(){
  this.bar = 'bam!'
}

//function declaration named foo2
function foo2(){
  this.bar = 'bam!'
}

//==========================================================================//

//these 2 are the same, but not the same as above
//methods live on the prototype level and are shared across instances

//function expression assigned to variable foo1
var foo1 = function(){}

//function declaration named foo2
function foo2(){}

foo1.prototype.bar = 'bam!'
foo2.prototype.bar = 'bam!'

​

​

第三种方法返回一个新的文本。你得不到构造器方法和原型共享的好处。这就像是像调用普通函数一样调用Waffle，创建一个文本，附加属性和方法，然后返回它。

最佳选择：取决于目的。

对象字面量：

• 比new Object短，可以在实例上的definition.
• Properties/methods上附加方法/属性，而不会运行原型链，这意味着更快的look-up.
• Unoptimized对象创建可能会导致重复，从而浪费内存。例如，为每个实例创建函数，而不是通过原型共享。

构造函数：

通过原型使用经典的OOP style

• Inheritance

• Shared方法意味着使用的内存更少，而不是按实例methods.

• Forgetting
• new可能会产生不想要的结果，比如附加全局变量(如果window是上下文)

你可以在Chrome开发者工具中查看这些。在控制台中创建它们，并在Sources选项卡中查看这些表达式

Answer 2

第一个是对象字面量，的与：

var Waffle = new Object();
Waffle.tastes = 'yummy';

这与以下内容相同：

var Waffle = {};
Waffle.tastes = 'yummy';

当然，它们的实例化需要多行代码。

你的第二个和第三个例子是函数。您的第二个示例是一个表达式，而您的第三个示例是一个声明。以下是对它们差异的解释：What is the difference between a function expression vs declaration in JavaScript?

注意第二个示例(表达式)，因为为了(正确地)修改this，您需要使用var waffle = new Waffle();。由于这是一个表达式，因此您也可以使用如下声明：

function Waffle() {
    this.tastes='yummy';
}

(要理解它与原始版本之间的主要区别，我认为这不会影响很多人，请阅读我提供的链接)

第三个示例是一个基本函数，它返回一个新的对象文字。

至于最好的选择……我不认为有一个具体的，明确的答案。

您的第一个示例创建了一个简单的单个对象。您可以在其上添加/更改属性和方法。但它直接继承自Object。当我需要一个大的对象来容纳许多东西，并且它的结构是静态的时，我喜欢使用它。要重用它，需要您的第三个示例。

您的第二个示例很方便，因为您可以调用new实例，从而获得我通常使用的经典OOP...and的效果。尽管需要注意的是，您必须让使用new，否则this的值将为window，这是不好的。同时，您可以修改该prototype，所有实例将共享该all。它还为您提供了拥有“私有”变量的灵活性，例如：

function Waffle() {
    var testing = 0;
    this.name = "A";
    this.myMethod = function () {
        return testing;
    };
}

您的第三个示例与第二个示例类似，不同之处在于您不能访问prototype，因为您将返回一个Object。它基本上是使用你的第一个例子，但使它可重用。它还允许像上面这样的“私有”变量。

因此，如果您正在寻找单个对象，请使用您的第一个示例。如果你在寻找可重用性，我建议你的第二个例子，而第三个仍然是一个例子。希望我对每一个都做了足够的解释，以便您确定哪一个适合您的需求。