Skip to content

Commit 1d7b174

Browse files
anbanganbang
committed
防篡改对象
1 parent 35da460 commit 1d7b174

2 files changed

Lines changed: 133 additions & 96 deletions

File tree

‎JS高级技巧/防篡改对象.md‎

Lines changed: 123 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ ECMAScript 5也增加了几个方法，通过它们可以指定对象的行为
1313
- 密封的对象
1414
- 冻结的对象
1515

16-
# 不可扩展(禁止新增属性和方法)
16+
# 不可扩展(不可添加、可以删除、可以修改、可以查)
17+
18+
**【增、删、改、查】 -- Object.preventExtension() --> 【删、改、查】**
1719

1820
有两个方法
1921

20-
- Object.preventExtension(obj)
21-
- Object.isExtensible(obj)
22+
- Object.preventExtension(obj) 禁止扩展
23+
- Object.isExtensible(obj) 判断是否可以扩展
2224

2325
##### Object.preventExtension(obj)
2426

@@ -38,21 +40,34 @@ ECMAScript 5也增加了几个方法，通过它们可以指定对象的行为
3840

3941
**Object.preventExtensions(obj)** 可以禁止向obj添加新属性和方法，但是obj本身有的属性是可以修改的；如下
4042

41-
var testObj={
42-
name:"testObj",
43-
age:"1"
44-
};
45-
console.log(testObj.age);
46-
Object.preventExtensions(testObj);//禁止新增属性；
47-
testObj.age="2";
48-
testObj.testKey="2";
49-
console.log(testObj.age,testObj.testKey);//2 undefined
50-
51-
var obj1=testObj;
52-
53-
obj1.age="isChange";
54-
console.log(testObj.age);
55-
console.log(testObj.testKey);//undefined
43+
var testObj={
44+
name:"testObj",
45+
age:"1"
46+
};
47+
console.log(testObj);
48+
Object.preventExtensions(testObj);//禁止新增属性；
49+
testObj.age="2";
50+
testObj.testKey="2";
51+
delete testObj.name;
52+
console.log(testObj.name,testObj.age,testObj.testKey);//2 undefined
53+
54+
var obj1=testObj;
55+
56+
obj1.age="isChange";
57+
console.log(testObj.age);
58+
console.log(testObj.testKey);//undefined
59+
60+
看下面的代码；
61+
62+
var person={
63+
name:"person name",
64+
age:23
65+
};
66+
Object.preventExtensions(person);
67+
person.job="WEB";//增 失败
68+
delete person.name;//删 成功
69+
person.age=52;//改 成功
70+
console.log(person);//查 成功 {age: 52}
5671

5772
在非严格模式下，给对象添加新成员会导致静默失败，因此 testObj.age 将是 undefined 。而在严格模式下，尝试给不可扩展的对象添加新成员会导致抛出错误。
5873

@@ -70,5 +85,94 @@ ECMAScript 5也增加了几个方法，通过它们可以指定对象的行为
7085
Object.preventExtensions(testObj);
7186
console.log(Object.isExtensible(testObj)); //false
7287

73-
# 密封的对象；
88+
# 密封的对象；(不可添加、不可删除、可以修改、可以查)
89+
90+
**【增、删、改、查】 -- Object.seal() --> 【改、查】**
91+
92+
- Object.seal() 密封对象
93+
- Object.isSealed 对象是否密封
94+
95+
##### Object.seal()
96+
97+
密封对象不可扩展，不可删除（原理是：已有成员[[configryable]]特性被设置成了false；）
98+
99+
> [[configurable]] 是否可删改，该特性默认是true；（表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。） [更多信息](../面向对象和继承方式/理解对象.md)
100+
101+
var person={
102+
name:"person name",
103+
age:23
104+
};
105+
Object.seal(person);
106+
person.job="WEB";//增 失败
107+
delete person.name;//删 失败
108+
person.age=52;//改 成功
109+
console.log(person);//查 成功 {name: "person name", age: 52}
110+
111+
添加 job 属性的行为被忽略了。而尝试删除 age 属性的操作也被忽略了，但是可以修改已有的age属性,因此只要不修改，这个属性没有受任何影响。在严格模式下，尝试添加或删除对象成员都会导致抛出错误。
112+
113+
##### isSealed()
114+
115+
使用 Object.isSealed() 方法可以确定对象是否被密封了。因为被密封的对象不可扩展，所以用Object.isExtensible() 检测密封的对象也会返回 false 。
116+
117+
var person={
118+
name:"person name",
119+
age:23
120+
};
121+
console.log(Object.isExtensible(person));//true
122+
console.log(Object.isSealed(person));//false
123+
124+
Object.seal(person);
125+
console.log(Object.isExtensible(person));//false
126+
console.log(Object.isSealed(person));//true
127+
128+
# 冻结的对象 (不可添加、不可删除、不可修改、可以查)
129+
130+
131+
**【增、删、改、查】 -- Object.freeze() --> 【查】**
132+
133+
最严格的防篡改级别是冻结对象。冻结的对象既不可扩展，又是密封的，而且对象数据属性的 [[Writable]] 特性会被设置为 false 。如果定义 [[Set]] 函数，访问器属性仍然是可写的。ECMAScript 5定义的 Object.freeze() 方法可以用来冻结对象。
134+
135+
- Object.freeze()
136+
- Object.isFrozen()
137+
138+
var person={
139+
name:"person name",
140+
age:23
141+
};
142+
Object.freeze(person);
143+
person.job="WEB";//增 失败
144+
delete person.name;//删 失败
145+
person.age=52;//改 失败
146+
console.log(person);//查 成功 {name: "person name", age: 23}
147+
148+
149+
##### Object.isFrozen()
150+
151+
Object.isFrozen() 方法用于检测冻结对象。因为冻结对象既是密封的又是不可扩展的，所以用 Object.isExtensible() 和 Object.isSealed() 检测冻结对象将分别返回 false和 true 。
152+
153+
var person={
154+
name:"person name",
155+
age:23
156+
};
157+
console.log(Object.isExtensible(person));//true
158+
console.log(Object.isSealed(person));//false
159+
console.log(Object.isFrozen(person));//false
160+
161+
Object.freeze(person);
162+
console.log(Object.isExtensible(person));//false
163+
console.log(Object.isSealed(person));//true
164+
console.log(Object.isFrozen(person));//true
165+
166+
# 总结
167+
168+
按照有宽松到严格是排序是；
169+
170+
- **【增、删、改、查】 -- Object.preventExtension() --> 【-、删、改、查】 **
171+
- **【增、删、改、查】 -- Object.seal() --> 【-、-、-、查】 **
172+
- **【增、删、改、查】 -- Object.freeze() --> 【-、-、-、查】 **
173+
174+
对应的检测方法分别是：
74175

176+
- Object.isExtensible()
177+
- Object.isSealed()
178+
- Object.isFrozen()

‎test-file.html‎

Lines changed: 10 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -28,86 +28,19 @@
2828
<a href="javascript:;" id="btn">cbi-input-invalid j-cbi-input-wpakey </a>
2929
<script src="index.js"></script>
3030
<script>
31-
//这里是事件工具库；
32-
var EventUtil = {
33-
addHandler: function (element, type, handler) {
34-
if (element.addEventListener) {
35-
element.addEventListener(type, handler, false);
36-
} else if (element.attachEvent) {
37-
element.attachEvent("on" + type, handler);
38-
} else {
39-
element["on" + type] = handler;
40-
}
41-
},
42-
removeHandler: function (element, type, handler) {
43-
if (element.removeEventListener) {
44-
element.removeEventListener(type, handler, false);
45-
} else if (element.detachEvent) {
46-
element.detachEvent("on" + type, handler);
47-
} else {
48-
element["on" + type] = null;
49-
}
50-
},
51-
52-
getEvent: function (event) {
53-
return event ? event : window.event;
54-
},
55-
getTarget: function (event) {
56-
return event.target || event.srcElement;
57-
},
58-
preventDefault: function (event) {
59-
if (event.preventDefault) {
60-
event.preventDefault();
61-
} else {
62-
event.returnValue = false;
63-
}
64-
},
65-
stopPropagation: function (event) {
66-
if (event.stopPropagation) {
67-
event.stopPropagation();
68-
} else {
69-
event.cancelBubbles = true;
70-
}
71-
},
72-
getRelatedTarget: function (event) {
73-
if (event.relatedTarger) {
74-
return event.relatedTarget;
75-
} else if (event.toElement) {
76-
return event.toElement;
77-
} else if (event.fromElement) {
78-
return event.fromElement;
79-
} else { return null; }
80-
81-
}
82-
83-
};
84-
85-
//这里是绑定函数的代码；
86-
var handler = {
87-
message: "Event handled",
88-
handleClick: function(name, event){
89-
console.log(this.message + ":"+ name + ":"+ event.type);
90-
}
31+
var person={
32+
name:"person name",
33+
age:23
9134
};
92-
function bind(fn,context){
93-
var args=Array.prototype.slice.call(arguments,2);
94-
return function (){
95-
var innerArgs=Array.prototype.slice.call(arguments);
96-
var finnalArgs=args.concat(innerArgs);
97-
console.log("args->"+args+" innerArgs->"+innerArgs+" finnalArgs->"+finnalArgs);
98-
return fn.apply(context,finnalArgs);
99-
}
100-
}
35+
console.log(Object.isExtensible(person));//true
36+
console.log(Object.isSealed(person));//false
37+
console.log(Object.isFrozen(person));//false
10138

102-
var oBtn=document.getElementById("btn");
103-
// EventUtil.addHandler(oBtn,"click",bind(handler.handleClick, handler, "btn"));
39+
Object.freeze(person);
40+
console.log(Object.isExtensible(person));//false
41+
console.log(Object.isSealed(person));//true
42+
console.log(Object.isFrozen(person));//true
10443

105-
oBtn.onclick=function(){
106-
var target="cbi-input-invalid j-cbi-input-wpakey";
107-
console.log("1"+target);
108-
var end=target.replace(/(cbi-input-invalid)|(j-cbi-input-wpakey)/g, ' ');
109-
console.log("2"+end);
110-
}
11144
</script>
11245
</body>
11346
</html>

0 commit comments

Comments
 (0)