javascript的3个对象声明有什么区别 [英] What is the difference of 3 object declarations of javascript

问题描述

全部，我发现有三种方法可以在javascript中声明对象。

All, I found there are 3 ways to declare object in javascript.

var Waffle = {
   tastes:'yummy'
};

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

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

第一种方式是对象文字它没有构造函数。
我认为 Object literal 的等价方式如下。

The first way is Object literal it doesn't have a constructor. I think the equal way to Object literal is below.

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

（如果我的理解是错误的。请纠正我。）

(If my understanding is wrong. Please correct me.)

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

I want to know what the difference of these 3 ways is.

哪一个是最佳选择？

谢谢。

推荐答案

字面符号和 new Object（）创建一个对象，其原型直接是 Object 。此外，属性和方法附加在实例上。

The literal notation and new Object() creates an object whose prototype is directly the Object. Also, properties and methods are attached on the instance.

/*

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

构造函数方法（声明函数或赋值函数表达式方法）在实例和<$ c $之间有一个额外的原型级别c> Object ，其中包含附加到构造函数原型的原型函数。连接到构造函数原型的任何内容都是共享所有实例。

The constructor approach, either the declared function or the assigned function expression approach, has an additional prototype level between the instance and the Object, which contains your prototype functions attached to the constructor's prototype. Anything attached to the constructor's prototype are shared across all instances.

/*

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 ，创建了一个文字的附加属性和方法，并将其返回。

The third approach returns a new literal. You don't get the benefits of the constructor method and prototype sharing. It's as if you just called Waffle like an ordinary function, created a literal, attached properties and methods, and returned it.

最佳选择取决于目的。

对象文字：

• 短于新对象并且可以在定义时附加方法/属性。


• 实例上存在属性/方法，没有运行原型链，这意味着更快的查找。


• 未经优化的对象创建可能会导致重复，从而浪费内存。例如，为每个实例创建函数而不是通过原型共享。

• Shorter than new Object and can attach methods/properties upon definition.
• Properties/methods live on the instance, no running up the prototype chain which means faster look-up.
• Unoptimized creation of objects might lead to duplicates, which waste memory. For example, creating functions per instance instead of sharing via the prototype.

构造函数：

• 经典OOP样式


• 继承


• 通过原型的共享方法意味着使用更少的内存，而不是每个实例方法。


• 忘记 new 可能会产生不必要的后果，例如附加全局变量（如果 window 是上下文）

• Classical OOP style
• Inheritance
• Shared methods via the prototype means less memory used, as opposed to per instance methods.
• Forgetting the new might have unwanted consequences, like attaching globals (if window is the context)

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

You can check these out in the Chrome Developer tools. Create them in the Console, and watch these expressions in the Sources tab

这篇关于javascript的3个对象声明有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！