ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript オブジェクトの書き換えを無効にする方法

JavaScript オブジェクトの書き換えを無効にする方法

不言オリジナル: 2018-07-09 10:41:371549ブラウズ

この記事では、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.preventExtensions() はいはいはい

属性の削除を禁止	属性の変更を禁止
いいえ	いいえ	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"; }; 主流浏览器的最新版本都支持这些方法： IE 9+ Firefox 4+ Safari 5.1+ Chrome 7+ Opera 12+ 以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！相关推荐：如何解决JS高程中的垃圾回收机制与常见内存泄露的问题 JavaScript创建对象的四种方式

属性の削除を禁止

属性の変更を禁止

いいえ

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";
};

主流浏览器的最新版本都支持这些方法：

IE 9+
Firefox 4+
Safari 5.1+
Chrome 7+
Opera 12+

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

JavaScript オブジェクトの書き換えを無効にする方法

Object.preventExtensions()

Object.seal()

Object.freeze()

関連記事