[解決済み] 同じエラーが発生しても、JavaScriptのスニペットの動作が異なるのはなぜですか?
2022-12-05 15:45:14
質問
var a = {}
var b = {}
try{
a.x.y = b.e = 1 // Uncaught TypeError: Cannot set property 'y' of undefined
} catch(err) {
console.error(err);
}
console.log(b.e) // 1
var a = {}
var b = {}
try {
a.x.y.z = b.e = 1 // Uncaught TypeError: Cannot read property 'y' of undefined
} catch(err) {
console.error(err);
}
console.log(b.e) // undefined
どのように解決するのですか?
実は、エラーメッセージをきちんと読むと、ケース1とケース2は異なるエラーを投げているのです。
ケース
a.x.y
:
不可 セット プロパティ 'y' が未定義です。
ケース
a.x.y.z
:
不可 読む プロパティ 'y' が未定義です。
簡単な英語でステップバイステップの実行で説明するのが一番いいんでしょうね。
ケース1
// 1. Declare variable `a`
// 2. Define variable `a` as {}
var a = {}
// 1. Declare variable `b`
// 2. Define variable `b` as {}
var b = {}
try {
/**
* 1. Read `a`, gets {}
* 2. Read `a.x`, gets undefined
* 3. Read `b`, gets {}
* 4. Set `b.z` to 1, returns 1
* 5. Set `a.x.y` to return value of `b.z = 1`
* 6. Throws "Cannot **set** property 'y' of undefined"
*/
a.x.y = b.z = 1
} catch(e){
console.error(e.message)
} finally {
console.log(b.z)
}
ケース2
// 1. Declare variable `a`
// 2. Define variable `a` as {}
var a = {}
// 1. Declare variable `b`
// 2. Define variable `b` as {}
var b = {}
try {
/**
* 1. Read `a`, gets {}
* 2. Read `a.x`, gets undefined
* 3. Read `a.x.y`, throws "Cannot **read** property 'y' of undefined".
*/
a.x.y.z = b.z = 1
} catch(e){
console.error(e.message)
} finally {
console.log(b.z)
}
コメントで ソロモン・タム 発見 割り当て操作に関するこの ECMA ドキュメント .
関連
-
[解決済み] プロパティ 'innerHTML' に null を設定できない。
-
[解決済み] JavaScript - 未定義のプロパティを設定することはできません。
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] jQueryやgetElementByIdのようなDOMメソッドが、要素を見つけられないのはなぜですか?
-
[解決済み] React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み】JavaScriptで何かが未定義でないかをテストする
-
[解決済み】Google MAP API Uncaught TypeError: nullのプロパティ'offsetWidth'を読み取れませんでした。
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]