ホームページ > 記事 > ウェブフロントエンド > JavaScript オブジェクトの書き換えを無効にする方法
JavaScript オブジェクトの書き換えを無効にする方法
- 不言オリジナル
- 2018-07-09 10:41:371489ブラウズ
この記事では、JavaScript オブジェクトの書き換えを禁止する方法を主に紹介します。これは、必要な友人に参照してもらいます。
Object.preventExtensions()、Object seal() を使用します。 ) および Object.freeze() は、JavaScript オブジェクトの書き換えを禁止することができます。翻訳者: Fundebug
- 原文: JavaScript オブジェクトの変更の防止
- JavaScript の柔軟性により、他の人によって定義された一部のオブジェクトを簡単に オーバーライド
。言い換えれば、誰でも定義したオブジェクトをオーバーライドできます。これは非常に強力な機能であり、多くの開発者が特定のオブジェクトの動作を拡張または変更することに関心を持っています。たとえば、DOM メソッド document.getElementById() はオーバーライドできます。一般に、これを行うとコードの保守が困難になり、見つけにくいバグが残るため、これは避けるべきです。 ECMAScript 5 では、開発者がオブジェクトの書き換えを制限できるメソッドが導入されています。 jQuery、fundebug などのツール ライブラリを開発している場合、または開発チームが非常に大規模な場合、この記事で紹介する方法は非常に役立ちます。 他の人のオブジェクトをオーバーライドしないでください 他の人のオブジェクトをオーバーライドしないでください。これは JavaScript の黄金律です。たとえば、メソッドをオーバーライドすると、そのメソッドに依存するライブラリに影響が出る可能性があり、他の開発者にとっては非常に混乱する可能性があります。
// 示例代码1
window.originalAlert = window.alert;
window.alert = function(msg) {
if (typeof msg === "string") {
return console.log(msg);
}
return window.originalAlert(msg);
};
alert('ooh so awesome'); // 参数为字符串时，打印到控制台
alert(3.14); // 参数为其他类型时，弹出对话框
サンプル コード 1
では、windows.alert を変更しました。パラメーターが文字列の場合はコンソールに出力され、パラメーターが他の型の場合はダイアログ ボックスが表示されます。このような変更は、アラート メソッドを使用する他の開発者に明らかに影響を与えます。 getElementById() などの DOM オブジェクトを変更すると、非常に深刻な結果が生じます。
これは、オブジェクトに新しいメソッドを追加するだけの場合にも問題を引き起こす可能性があります。 // 示例代码2
Math.cube = function(n) {
return Math.pow(n, 3);
};
console.log(Math.cube(2)); // 8 これを行う場合の最大の問題は、将来的に名前の競合が発生する可能性があることです。 Math オブジェクトには現在 cube メソッドがありませんが、JavaScript 標準の次のバージョンでは cube メソッドが追加される可能性があります (もちろんその可能性は低いですが)。これは、ネイティブ cube メソッドを置き換えることを意味します。実際のケースでは、プロトタイプ ライブラリで document.getElementsByClassName() メソッドが定義され、このメソッドは後に JavaScript 標準に追加されました。
残念ながら、私たちが定義したオブジェクトを他の開発者が書き換えることを防ぐことはできません。その場合、この記事で紹介されている次のメソッドが必要です。
まず、Object.preventExtensions()、seal() および Object を比較します。 .freeze():
メソッド| 属性の削除を禁止 | 属性の変更を禁止 | ||
|---|---|---|---|
| いいえ | いいえ | Object.seal() | |
| はい | いいえ | Object.freeze() | |
| はい | はい |
Object.preventExtensions()使用Object.preventExtensions()，可以禁止给对象添加新的方法或者属性。注意，修改或者删除对象已经存在的方法或者属性是没有问题的。使用Object.isExtensible()可以查看某个对象是否可以增加方法或者属性。 // 示例代码3
var song = {
title: 'Hope Leaves',
artist: 'Opeth'
};
console.log(Object.isExtensible(song)); //true
Object.preventExtensions(song);
console.log(Object.isExtensible(song)); //false
song.album = 'Damnation';
console.log(song.album); // undefined
song.play = function() {
console.log('ahh soo awesome');
};
song.play(); // TypeError: song.play is not a function
由示例代码3可知，执行Object.preventExtensions()之后，为song对象新增album以及play方法都失败了！ 但是，当我们为song新增属性或者方法时，并没有报错。当我们使用了"use strict"采用严格模式时，情况就不一样了： // 示例代码4
"use strict";
var song = {
title: 'Hope Leaves',
artist: 'Opeth'
};
Object.preventExtensions(song);
song.album = 'Damnation'; // Uncaught TypeError: Cannot add property album, object is not extensible
在严格模式下，给已经Object.preventExtensions的对象新增属性时，会立即报错。广告：如果你希望实时监控应用中类似的错误，欢迎免费试用Fundebug。 Object.seal()使用Object.seal()，可以禁止给对象添加属性或者方法(这一点与Object.preventExtension()的作用一致)，同时禁止删除对象已经存在的属性或者方法。 // 示例代码5
"use strict"
var song = {
title: 'Hope Leaves',
artist: 'Opeth'
};
Object.seal(song);
console.log(Object.isExtensible(song)); //false
console.log(Object.isSealed(song)); //true
song.album = 'Damnation'; // Uncaught TypeError: Cannot add property album, object is not extensible
delete song.artist; // Uncaught TypeError: Cannot delete property 'artist' of #<Object>
Object.freeze()使用Object.freeze()，可以禁止为对象增加属性或者方法(这一点与Object.preventExtension()的作用一致)，同时禁止删除对象已经存在的属性或者方法（这一点与Object.seal()的作用一致），另外还禁止修改已经存在的属性或者方法。 // 示例代码6
"use strict"
var song = {
title: 'Hope Leaves',
artist: 'Opeth',
getLongTitle: function()
{
return this.artist + " - " + this.title;
}
};
Object.freeze(song);
console.log(Object.isExtensible(song)); // false
console.log(Object.isSealed(song)); // true
console.log(Object.isFrozen(song)); // true
song.album = 'Damnation'; // Uncaught TypeError: Cannot add property album, object is not extensible
delete song.artist; // Uncaught TypeError: Cannot delete property 'artist' of #<Object>
song.getLongTitle = function() // Uncaught TypeError: Cannot assign to read only property 'getLongTitle' of object '#<Object>'
{
return "foobar";
};
主流浏览器的最新版本都支持这些方法：
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！ 相关推荐： |
以上がJavaScript オブジェクトの書き換えを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。