So deaktivieren Sie das Umschreiben von JavaScript-Objekten-js-Tutorial-php.cn

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); // 参数为其他类型时，弹出对话框

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

由示例代码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

Nach dem Login kopieren

在严格模式下，给已经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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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