javascript オブジェクトのプロパティの拡張が禁止されているかを判定する
- 作成日 2021.03.03
- 更新日 2022.08.08
- javascript
- javascript

javascriptで、isExtensibleを使用して、オブジェクトのプロパティの拡張が禁止されているかを判定するサンプルコードを記述してます。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 103.0.5060.134
isExtensible使い方
「isExtensible」を使用すると、オブジェクトのプロパティの拡張が禁止されているかを判定することが可能です。
※「preventExtensions」を使用すると、オブジェクトへのプロパティの追加を禁止することが可能です。
const site = {
name: 'mebee',
url: 'https://mebee.info/'
};
console.log(
Object.isExtensible(site) // true
);
Object.preventExtensions(site); // 追加禁止
console.log(
Object.isExtensible(site) // false
);
文字列や数値に使用すると「false」が返ります。
let str = "abc"
console.log(
Object.isExtensible(str) // false
);
Object.preventExtensions(str); // 追加禁止
console.log(
Object.isExtensible(str) // false
);
const num = 123
console.log(
Object.isExtensible(str) // false
);
Object.preventExtensions(str); // 追加禁止
console.log(
Object.isExtensible(str) // false
);
配列に使用
配列に使用すると、オブジェクトと同じ動作になり、実際に値も追加することができません。
let arr = ["aaa","bbb"]
console.log(
Object.isExtensible(arr) // true
);
arr[2] = "ccc"
console.log(
arr // ['aaa', 'bbb', 'ccc']
);
Object.preventExtensions(arr); // 追加禁止
console.log(
Object.isExtensible(arr) // false
);
arr[3] = "ddd"
console.log(
arr // ['aaa', 'bbb', 'ccc']
);
サンプルコード
以下は、
「実行」ボタンをクリックすると、「0」と「1」のランダムな整数を生成して「1」なら拡張を禁止して、拡張が禁止されているかを判定する
サンプルコードとなります。
※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。関数はアロー関数を使用してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<style>
.main {
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 30px;
}
</style>
<script>
const hoge = () => {
const site = {
name: 'mebee',
url: 'https://mebee.info/'
};
// 0 と 1のランダムな整数を生成して「1」なら拡張を禁止
~~(Math.random() * 2) == 1 ? (() => { Object.preventExtensions(site); ex.innerHTML ='拡張禁止'})() : ex.innerHTML ='拡張可能'
// 結果を表示
result.innerHTML = Object.isExtensible(site);
}
window.onload = () => {
// クリックイベントを登録
btn.onclick = () => { hoge(); }; // document.getElementById('btn');を省略
}
</script>
<body>
<div class="main container">
<h2><span id="result" class="badge bg-info">結果</span></h2>
<h2><span id="ex" class="badge bg-info">拡張状態</span></h2>
<div class="row">
<button id="btn" type="button" class="btn btn-warning">
実行
</button>
</div>
</div>
</body>
</html>
判定されていることが確認できます。

-
前の記事
go言語 文字列を指定した文字で分割する 2021.03.03
-
次の記事
SourceTree プッシュ後のコミットを取り消す 2021.03.03
コメントを書く