在JavaScript中，创建属性时，哪个是正确或更好的语法？

StackOverflow https://stackoverflow.com/questions/4735004

  •  12-10-2019
  •  | 
  •  

题

可以使用点符号以及方括号访问属性（键）并设置。任何何时使用点原型语法的建议

var myObj = {};   
myObj.myProp1 = 'value1'; //works, an expando property   
myObj[myProp2] = 'value2'; // FAILS, myProp2 is undefined
myObj["myProp2"] = 'value2'; // works, an expando property
myObj[2010]= 'value'; //note the key is number, still works, an expando property??   
myObj.2010 = 'value'; // FAILS. to use dot notation, key must be a string

myObj.prototype.myProp3 = 'value3' // whats the advantage?
有帮助吗？

解决方案

使用DOT语法时，Propery名称是标识符：

var myObj = {};
myObj.myProp1 = "value1";
myObj.myProp2 = "value2";

由于属性名称必须遵循标识符命名的规则，因此可以不从数字开始。

使用括号语法时，属性名称是字符串：

var myObj = {};
myObj["myProp1"] = "value1";
myObj["myProp2"] = "value2";

括号中使用的内容可以是变量，也可以是导致字符串的任何类型的表达式：

var myObj = {};
var prop1 = "myProp1";
myObj[prop1] = "value1";
myObj["myProp" + 2] = "value2";

如果使用数字作为属性名称，它将自动转换为字符串，因此具有相同的结果：

myObj[2010] = "value";
myObj["2010"] = "value";

您还可以使用对象字面设置值：

var myObj = { myProp1: "value1", myProp2: "value2" };

（注意 {} 也是对象字面的，只有没有属性。）

使用对象的原型只有在命名对象类型（或以其他方式为对象分配原型）时才有用。当您使用对象创建对象时，每个对象都有其自己的原型，因此将任何内容放入原型中的效果与将其放在对象中相同。

其他提示

财产的增加应该是 myObj.myProp 或者 myObj["myProp"]. 。在JavaScript中使用时，这是理想的遵循场景，也是一种很好的做法。

在您的情况下 myObj.prototype.myProp3 = 'value3' 应该 不是 之所以使用，是因为对象文字没有原型。好吧，他们做到了，但是他们没有 prototype 财产（您会看到 myObj.prototype 是不确定的）。

原型用于 功能 设置使用该函数构造的所有对象的默认属性 new 关键词。它并不是要用于将属性分配给单个对象。

对我来说，这取决于我将如何使用对象。

如果我要像关联阵列，哈希地图或点语法一样使用它，我会使用 [ 和 ].

但是，如果我像对待对象一样对待它们，我会使用 . 句法。

基本上，通过“”访问对象的属性没有区别。语法或通过键。

var obj = new function(){this.x = "value";}
alert(obj.x === obj['x']); //it will output true

有时您无法使用“”。 ，因为您要访问的属性的名称不是有效的变量名称（如您指向数字密钥）： 

var obj = new function(){this['my-value'] = "my value";}
alert(obj['my-value']); // it will output "my value"
alert(obj.my-value); // it will trigger an exception , because the javascript 
//interpretor interprets "obj.my-value" as the 
//property "my" of obj minus the variable "value"

最大的区别是浏览器处理您的语法的方式。如你看到的 这里 ，我的一个朋友进行了一些测试，看来Chrome和IE使用DOT语法工作得更快，而Firefox和Safari则更加“敏锐地”。
总而言之，尽管在某些情况下，您几乎每次都可以使用其中一个。有点“没有准备”。

关于原型语法，好吧，当您定义一个对象时，您可以将成员连接到每个实例，但是您也可以将成员附加到对象的原型上，这意味着每当创建定义类型的新对象时，它都会自动继承该成员的原型。我认为最好以一个例子理解： 

function Point(x,y){this.x = x;this.y = y;}
Point.prototype.toString = function(){
  return "I am a point with my x coord at "+this.x+" and my y coord at "+this.y;
}

function Point2(x,y){
  this.x = x;
  this.y = y;
  this.toString = function(){
    return "I'm a point too.I'm at x:"+this.x+", y:"+this.y;
  };
}

当您创建一个 new Point2, ， 它的 toString 方法一个实例方法和JavaScript解释器为此方法分配内存。
当您创建一个“新点”时，它是 toString 方法将在其原型属性上链接。这意味着没有为该方法分配内存。 

var p = [], p2 = [];
for(var i = 0; i < 100000000; i++)
   {
     p.push(new Point(0,0));
     p2.push(new Point2(0,0));
   }

如果您测试了这一点，您会发现两个对象都可以正常工作，但是您的 Point2 对象将从您的系统中抽出更多内存。这是为什么？
事情是当您打电话给 new Point()' toString() 方法，该对象意识到它没有一个名为“ Tostring”的成员，并且开始搜索它的原型链，并返回对象声明中发现的“ ToString”成员。
在上面的示例中，所有 p的物品将指向他们的 toString 原型中提到的一种方法，而所有 p2的项目将指向其方法的每个副本。
另外，如果您以后要修改 toString 方法，将其修改非常容易 Point 实例：
Point.prototype.toString = function(){return "I'm a smarter point";};之后，每个实例 new Point 当您打电话时，将返回“我是一个更聪明的点” toString 方法。
如果您尝试将其修改为 Point2 实例，有点困难。你会发现 Point2.toString = function(){return "I'm a dumber point";} 将无法按预期工作，您将必须手动更改每个实例的方法： 

for(var i in p2)
  p2[i].toString = function(){return "I'm a dumber point";};

我会让您决定哪种方法更好：P

var myObj = function () {

};
myObj.prototype.myProp3 = 'value3' // whats the advantage?

如果要将MyOBJ用作构造来创建多个对象，则应使用此功能。 IE 。 

var obj1 = new myObj();

然后OBJ1也将获得MyProp3属性

编辑： 编辑了上述示例。要使用MyOBJ作为构造函数，应将其声明为函数

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top