javascript - javascript的3个对象声明有什么区别

Question

总而言之，我发现在javascript中有3种声明对象的方法。

var Waffle = {
   tastes:'yummy'
};

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

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

第一种方式是对象字面量，它没有构造函数。我认为下面是 Object literal 的相同方法。

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

(如果我的理解有误，请指正。)

我想知道这3种方式有什么区别。

哪个是最好的选择？

谢谢。

Answer 1

文字符号和new Object() 创建一个对象，其原型(prototype)直接是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 之间都有一个额外的原型(prototype)级别，它包含附加到构造函数原型(prototype)的原型(prototype)函数。所有实例都共享附加到构造函数原型(prototype)的任何内容。

/*

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!'

第三种方法返回一个新的文字。您无法获得构造函数方法和原型(prototype)共享的好处。就好像您只是像普通函数一样调用 Waffle，创建一个文字、附加的属性和方法，然后返回它。

最佳选择:取决于目的。

对象字面量:

• 比 new Object 更短，可以在定义时附加方法/属性。
• 属性/方法存在于实例中，没有沿着原型(prototype)链运行，这意味着查找速度更快。
• 未优化的对象创建可能会导致重复，从而浪费内存。例如，为每个实例创建函数而不是通过原型(prototype)共享。

构造函数:

• 经典的 OOP 风格
• 继承
• 与每个实例方法相比，通过原型(prototype)共享方法意味着使用更少的内存。
• 忘记 new 可能会产生不良后果，例如附加全局变量(如果 window 是上下文)

您可以在 Chrome 开发者工具中查看这些内容。在控制台中创建它们，并在“源”选项卡中查看这些表达式