JavaScript 객체 재작성을 비활성화하는 방법-JS 튜토리얼-php.cn

JavaScript 객체 재작성을 비활성화하는 방법

不言

풀어 주다： 2018-07-09 10:41:37

원래의

1553명이 탐색했습니다.

이 글에서는 특정 참고 가치가 있는 JavaScript 객체 재작성을 금지하는 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있습니다.

번역기 보도자료: JavaScript 객체 재작성을 방지하려면 Object.preventExtensions(), Object.seal() 및 Object.freeze()를 사용하세요.

번역자: Fundebug
원문: JavaScript 객체 수정 방지
#🎜🎜 #

JavaScript의 유연성 덕분에 다른 사람이 쉽게

overridesome object(object) 정의할 수 있습니다. 즉, 누구나 우리가 정의한 객체를 재정의할 수 있습니다. 이는 많은 개발자가 특정 개체의 동작을 확장하거나 수정하려는 데 관심을 갖는 매우 강력한 기능입니다. 예를 들어 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); // 参数为其他类型时，弹出对话框

로그인 후 복사

Sample Code 1에서 windows.alert를 수정했습니다. 매개변수가 문자열이면 콘솔에 인쇄되고, 매개변수가 다른 유형이면 대화 상자가 표시됩니다. 가 나타납니다. 이러한 수정은 분명히 경고 방법을 사용하는 다른 개발자에게 영향을 미칠 것입니다. getElementById()와 같은 DOM 객체를 수정하면 매우 심각한 결과를 초래할 수 있습니다.

객체에 새 메서드를 추가하는 경우에도 문제가 발생할 수 있습니다.

// 示例代码2
Math.cube = function(n) {  
    return Math.pow(n, 3);
};
console.log(Math.cube(2)); // 8

로그인 후 복사

이 작업의 가장 큰 문제는 나중에 이름 충돌이 발생할 수 있다는 것입니다. 현재 Math 개체에는 큐브 메서드가 없지만 다음 버전의 JavaScript 표준에서는 큐브 메서드를 추가할 수 있습니다(물론 그럴 가능성은 낮습니다). 이는 기본 큐브 메서드를 대체한다는 의미입니다. 실제 사례에서 Prototype 라이브러리는 나중에 JavaScript 표준에 추가된 document.getElementsByClassName() 메서드를 정의했습니다.

안타깝게도 다른 개발자가 우리가 정의한 객체를 다시 작성하는 것을 막을 수는 없습니다. 그렇다면 이 문서에 소개된 메서드가 필요합니다.

우선 A를 통과하는 것이 좋습니다. Object.preventExtensions(), Object.seal() 및 Object.freeze()를 비교하는 표:

method# 🎜🎜# Object.preventExtensions()예NoNo#🎜🎜 #예# 🎜🎜#Object.freeze( )isisis

#🎜🎜 #It 속성 추가 금지

속성 삭제 금지

속성 수정 금지

Object.seal()

예

아니요

#🎜🎜 #

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

로그인 후 복사

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