javascript - {} 和 function(){} 之间的区别

Question

我认为这些是等价的。

var __Panel = {
 this.header = null;
};

var __Panel = function() {
 this.header = null;
};

第一个为 提供编译器错误“预期标识符或字符串”，为 提供this“预期'，'” ;。

有人可以为我澄清一下吗？

Answer 1

{}用于定义对象，function(){}用于定义函数。

里面的主体{}必须是一系列以逗号分隔的key: value对，如下所示：

var man = {
  age: 24,
  height: 6,
  occupation: "programmer"
};

您的示例不起作用有三个原因。首先，this.header它不是一个有效的键，因为它包含一个点，:而不是=用于将键与值分开的标记，并且,用于代替;分隔键值对。

Answer 2

这对我来说很有趣：

js> var p = { this.header = null; };
js: "<stdin>", line 11: invalid property id
js: var p = { this.header = null; };
js: ..............^
js: "<stdin>", line 11: syntax error
js: var p = { this.header = null; };
js: ..............................^

对此的夸张解释如下：

犀牛提出了答案：this.header文本将被解释为属性 id，而作为属性 id，它是无效的。因此，您了解到{ }的是一个“包含”属性的对象，而属性名称不能看起来像this.header. 您可以进一步检查“对象”的语法；它看起来很简单{ propertyId1 : value1, propertyId2 : value2, ...}。

js> var p = { header:0, doit: function(){this.header=null;} };

这被接受了，实际上“对象语法”得到了尊重；我们定义了一个具有两个属性的对象，一个header是整数 0，doit另一个是一个函数。

现在你可以想知道为什么有{this.header=null;}接受；这是因为您不必将对象的语法与{}“分隔”代码“块”的用法混淆，在这种情况下，“包含”函数本身，即其代码。那些{}并不代表“赤裸”所代表的同一事物{}，而在他们面前的存在则清楚地表明了这一点function()。

js> p.header;
0

这表明该属性header为 0，这是一个简单明了的事实。

js> p.doit();

这将执行属性中保存的函数doit。我们期望它发生什么？这个问题源于询问是什么this。

js> p.header;
null

当我们再次检查属性的内容时header，我们看到它被修改为 null。这意味着this在函数中的属性doit是指“包含”该属性的对象，即对象 p 本身。

原始的、已删除的社区 wiki 帖子是：

这对我来说很有趣：

js> var p = { this.header = null; };
js: "<stdin>", line 11: invalid property id
js: var p = { this.header = null; };
js: ..............^
js: "<stdin>", line 11: syntax error
js: var p = { this.header = null; };
js: ..............................^
js> var p = { header:0, doit: function(){this.header=null;} };
js> p.header;
0
js> p.doit();
js> p.header;
null

原帖结束

所有这些可能以不同的方式回答了这个问题，通过一条路径，以一种默契和隐含的方式，社区 Wiki 模式本可以通过更多的“说话的例子”（通过实践学习和解释错误技术）帮助成长。

但它并没有被“抓住”，而是添加了明确的“演绎”步骤。