こんにちはフロントエンドエンジニアのまさにょんです!
今回は、JavaScriptでTypeError: Cannot define property xxx, object is not extensible エラーの解決方法について解説していきます。
目次
TypeError: Cannot define property xxx, object is not extensible エラーとは?
TypeError: Cannot define property xxx, object is not extensible エラーとは、拡張不可能なオブジェクトに新しいプロパティを追加しようとすることによって、発生するエラーです。
TypeError: Cannot define property xxx, object is not extensible を翻訳すると「TypeError: プロパティ xxx を定義できません。オブジェクトは拡張できません」という意味になります。
通常、オブジェクトは拡張可能であり、新しいプロパティを追加できます。
ただし、Object.preventExtensions()
のような Objectの拡張を抑制するメソッドによって、プロパティの追加が抑制されている場合は、新しいプロパティは追加できなくなります。
つまり、Object.preventExtensions()
によって、ObjectがReadonly状態になっているということです。
TypeError: Cannot define property xxx, object is not extensible エラーの解決方法
TypeError: Cannot define property xxx, object is not extensible エラーを解決するには、次の3つの方法があります。
Object.preventExtensions()
以前の段階で、Object に Data を追加する。- Strict Mode で、Code を実行しない。
- このErrorは、Strict Mode でしか発動しません。
- Deep Copy で、Object を Copy する。
Object.preventExtensions()
というObjectプロトタイプのメソッドの挙動や、今回のエラーの3番の解決方法を示す Sample Code を用意しました。
ぜひ、実際に、Consoleで確認してみてください。
/** 1. Strict Mode であることが前提条件 */
"use strict";
const Robotama = { name: "ロボ玉" };
/**
* 2. Object.isExtensible() で、オブジェクトが拡張可能であるかどうかを確認する
* => 通常は、Objectは、拡張可能
*/
console.log(Object.isExtensible(Robotama)); // 出力: true
Robotama.like = "ひま種";
/**
* 3. Object.preventExtensions() で、オブジェクトを拡張不可能にする
*/
Object.preventExtensions(Robotama);
// オブジェクトが拡張可能であるかどうかを確認
console.log(Object.isExtensible(Robotama)); // 出力: false
/**
* 4. Error・パターン
* => オブジェクトが拡張不可の状態で、Object に Dataを追加しようとする Errorが発生する
*/
// Robotama.power = 1000;
// 出力: TypeError: Cannot add property power, object is not extensible
/**
* 5. Error を回避するには、3つ手段があります。
* => 1. Object.preventExtensions() 以前の段階で、Data を追加する。
* => 2. Strict Mode で、Code を実行しない。
* => 3. Deep Copy で、Object を Copy する。
*/
const deepCopyRobotama = JSON.parse(JSON.stringify(Robotama));
// オブジェクトが拡張可能であるかどうかを確認
console.log(Object.isExtensible(deepCopyRobotama)); // 出力: true
deepCopyRobotama.from = "Tokyo";
/** Readonly状態(拡張不可) の Object */
console.log("Robotama", Robotama);
// 出力: Robotama {name: 'ロボ玉', like: 'ひま種'}
/** Deep Copy して Custom できるようにした Object */
console.log("deepCopyRobotama", deepCopyRobotama);
// 出力: deepCopyRobotama {name: 'ロボ玉', like: 'ひま種', from: 'Tokyo'}
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!