不尋常的對象定義

Question

我偶然發現了這個奇怪的物體聲明。

var config = {};
{ 
  config.foo = 'foo';
  config.bar = 'bar';
};

它有效，但我猜它不會。

困惑我在Chrome DevTools中打開控制台，然后輸入：

var a = {};
// => undefined

到目前為止沒什么奇怪的。 但后來我輸入：

{ a.b = 'b'; }
// => Uncaught SyntaxError: Unexpected token .

好吧，嗯......這不應該有用嗎？ 另一種嘗試，沒有單獨評估報表：

var a = {}; {a.b = 'b'};
// => "b"

嗯，沒有拋出SyntaxError。 如果我評估一個，我可以看到它是按照我的意圖定義的。

a;
// => Object {b: "b"}

怎么了？ 我試圖谷歌它，但我不知道要搜索什么，我缺乏某種知識來弄清楚發生了什么。 有人可以解釋一下嗎？

Answer 1

在代碼中，

var config = {};
{ 
  config.foo = 'foo';
  config.bar = 'bar';
};

第二個{和}內的代碼只是一個塊中的語句。 該塊用於對多個語句進行分組，並且是有效的語法，因此不會引發錯誤。

代碼相當於

var config = {};
config.foo = 'foo';
config.bar = 'bar';

執行塊內的代碼， config對象是

{foo: "foo", bar: "bar"}

執行塊后。

不使用上面的語法， 最好使用對象文字語法來定義對象。

var config = {
    foo: 'foo',
    bar: 'bar
};

與代碼相同

var a = {}; {a.b = 'b'};

這相當於

var a = {};
a.b = 'b';

並且可以寫成

var a = {
    b: 'b';
};

塊語句 （或其他語言中的復合語句 ）用於對零個或多個語句進行分組。 該塊由一對花括號分隔。

{ ab = 'b'; } { ab = 'b'; } throws Uncaught SyntaxError：意外的令牌。

如果未聲明變量a則會拋出錯誤。

Answer 2

添加以前說過的內容..

在JavaScript中，這是一個對象文字：

{x: 3}

這是一個塊：

{
  console.log("Hello, world!");
}

任何聲明都可以進入塊內。

麻煩的是， {x: 3}通常會被解釋為一個塊，它本身就是一個塊。

要使它成為JavaScript的對象文字，你必須用括號括起來：

({x: 3})

這就是Chrome DevTools在看到您的輸入是未被包圍的對象文字時所執行的操作。 它會將{x: 3}變為({x: 3}) ， {y: 15, z: 'kar'}變為({y: 15, z: 'kar'}) ，依此類推。

麻煩的是，它也會為塊做到這一點。 它將{x = y}變為({x = y}) ，這當然是語法錯誤。 JavaScript認為你給它一個對象文字，所以它不期望一個語句。

但是，如果在對象文字之前有一個語句，DevTools完全忽略了將未加括號的對象文字轉換為帶括號的對象文字的規則。 這樣可行：

console.log('Bananas!'); {x = y}

和聲明並不真正需要的是一個說法。 在塊之前實際上只需要一個分號：

;{x = y}

這只是Chrome DevTools的奇怪怪癖。 它應該幫助那些剛接觸JavaScript（和對象文字）編碼的人，但對於有經驗的人來說可能會有些混亂！