レッスンに戻る

構文チェク

重要性: 2

このコードの結果はなんでしょう?

let user = {
  name: "John",
  go: function() { alert(this.name) }
}

(user.go)()

P.S. 落とし穴があります :)

エラーです!

やってみましょう:

let user = {
  name: "John",
  go: function() { alert(this.name) }
}

(user.go)() // error!

ほとんどのブラウザでのエラーメッセージは何を間違えているのか理解できません。

user = {...} の後にセミコロンがないため、エラーになります。

JavaScript 括弧 (user.go)() の前にはセミコロンを想定していないので、このようにコードを解釈します:

let user = { go:... }(user.go)()

そして、このようなジョイント式は構文的にはオブジェクト { go: ...} を引数 (user.go) をもつ関数として呼びだすことができます。また、それは let user と同じ行で起こります。なので、user オブジェクトはまだ定義されていないのでエラーになります。

セミコロンを挿入すると、すべてうまく行きます。:

let user = {
  name: "John",
  go: function() { alert(this.name) }
};

(user.go)() // John

(user.go) の周りの括弧はここではなにもしないことに注意してください。通常それらは操作の順番のために設定されますが、ここではドット . がとにかく最初に動作するので影響がありません。セミコロンだけが関係します。