Heim > Artikel > Web-Frontend > So deaktivieren Sie das Umschreiben von JavaScript-Objekten
So deaktivieren Sie das Umschreiben von JavaScript-Objekten
- 不言Original
- 2018-07-09 10:41:371435Durchsuche
Dieser Artikel stellt hauptsächlich vor, wie man das Umschreiben von JavaScript-Objekten verbietet. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.
Anmerkung des Übersetzers: Verwenden Sie Object.preventExtensions(), Object.seal() und Object.freeze(), um das Umschreiben von JavaScript-Objekten zu verhindern.
Übersetzer: Fundebug
Originaltext: Änderung von JavaScript-Objekten verhindern
Aufgrund von JavaScript Flexibilität, wir können leicht überschreiben einige Objekte , die von anderen definiert wurden. Mit anderen Worten: Jeder kann die von uns definierten Objekte überschreiben. Dies ist eine sehr leistungsstarke Funktion, mit der viele Entwickler versuchen möchten, das Verhalten bestimmter Objekte zu erweitern oder zu ändern. Beispielsweise kann die DOM-Methode document.getElementById() überschrieben werden. Im Allgemeinen sollten wir dies vermeiden, da es die Wartung des Codes erschwert und einige Fehler hinterlässt, die schwer zu finden sind. ECMAScript 5 führt Methoden ein, die es Entwicklern ermöglichen, das Umschreiben von Objekten einzuschränken. Wenn Sie einige Tool-Bibliotheken wie jQuery, Fundebug usw. entwickeln oder Ihr Entwicklungsteam sehr groß ist, sind die in diesem Artikel vorgestellten Methoden sehr nützlich.
Überschreiben Sie nicht die Objekte anderer Leute
Überschreiben Sie nicht die Objekte anderer Leute, das ist die goldene Regel von JavaScript. Wenn Sie beispielsweise eine Methode überschreiben, ist es wahrscheinlich, dass sich dies auf Bibliotheken auswirkt, die von dieser Methode abhängen, was für andere Entwickler sehr verwirrend sein kann.
// 示例代码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); // 参数为其他类型时，弹出对话框
In Beispielcode 1 habe ich „windows.alert“ geändert: Wenn der Parameter eine Zeichenfolge ist, wird er auf der Konsole ausgegeben; wenn es sich bei dem Parameter um einen anderen Typ handelt, wird ein Dialogfeld angezeigt . Solche Änderungen wirken sich offensichtlich auf andere Entwickler aus, die die Warnmethode verwenden. Wenn Sie ein DOM-Objekt wie getElementById() ändern, hat dies sehr schwerwiegende Folgen.
Dies kann auch zu Problemen führen, wenn Sie dem Objekt nur neue Methoden hinzufügen.
// 示例代码2
Math.cube = function(n) {
return Math.pow(n, 3);
};
console.log(Math.cube(2)); // 8
Das größte Problem dabei ist, dass es in Zukunft zu Namenskonflikten kommen kann. Obwohl das Math-Objekt derzeit keine Cube-Methode hat, wird die nächste Version des JavaScript-Standards möglicherweise eine Cube-Methode hinzufügen (natürlich ist dies unwahrscheinlich), was bedeutet, dass wir die native Cube-Methode ersetzen werden. In einem realen Fall definierte die Prototype-Bibliothek die Methode document.getElementsByClassName(), die später zum JavaScript-Standard hinzugefügt wurde.
Leider können wir andere Entwickler nicht daran hindern, die von uns definierten Objekte neu zu schreiben. Dann benötigen wir die in diesem Artikel vorgestellten Methoden:
Zuerst können wir es genauso gut über ein Tabellenobjekt vergleichen .preventExtensions(), Object.seal() und 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中文网！
相关推荐：
Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie das Umschreiben von JavaScript-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!