Skip to content

Commit fe66613

Browse files
anbanganbang
committed
回家
1 parent 3af3eeb commit fe66613

4 files changed

Lines changed: 110 additions & 24 deletions

File tree

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# 防篡改对象
2+
3+
JS是若类型语言，变量和对象都可以被同一个运行环境中的代码修改掉；开发人员很可能会意外地修改别人的代码；
4+
5+
在[[理解对象](https://github.com/Broszhu/zhuanbang-javascript-notes/blob/master/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E5%92%8C%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/%E7%90%86%E8%A7%A3%E5%AF%B9%E8%B1%A1.md)]，【属性类型】的介绍里，对象可以手工设置每个属性的 [[Configurable]] 、[[Writable]] 、 [[Enumerable]] 、 [[Value]] 、 [[Get]] 以及 [[Set]] 特性，以改变属性的行为。
6+
7+
8+
ECMAScript 5也增加了几个方法，通过它们可以指定对象的行为。
9+
10+
不过请注意：**一旦把对象定义为防篡改，就无法撤销了。**
11+
12+
- 不可扩展
13+
- 密封的对象
14+
- 冻结的对象
15+
16+
# 不可扩展(禁止新增属性和方法)
17+
18+
有两个方法
19+
20+
- Object.preventExtension(obj)
21+
- Object.isExtensible(obj)
22+
23+
##### Object.preventExtension(obj)
24+
25+
默认情况下，对象属于引用数据类型，因为变量保存的只是一个内存地址，所以变量可以任意修改，同时如果别的变量也指向这个地址，值也会改变的；
26+
27+
var testObj={
28+
name:"testObj",
29+
age:"1"
30+
};
31+
console.log(testObj.age);
32+
33+
var obj1=testObj,
34+
obj2=testObj;
35+
36+
obj1.age="isChange";
37+
console.log(testObj.age,obj1.age,obj2.age);
38+
39+
**Object.preventExtensions(obj)** 可以禁止向obj添加新属性和方法，但是obj本身有的属性是可以修改的；如下
40+
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
56+
57+
在非严格模式下，给对象添加新成员会导致静默失败，因此 testObj.age 将是 undefined 。而在严格模式下，尝试给不可扩展的对象添加新成员会导致抛出错误。
58+
59+
虽然不能给对象添加新成员，但已有的成员则丝毫不受影响。你仍然还可以修改和删除已有的成员。
60+
61+
##### Object.isExtensible(obj)
62+
63+
使用 Object.istExtensible() 方法还可以确定对象是否可以扩展
64+
65+
var testObj={
66+
name:"testObj",
67+
age:"1"
68+
};
69+
console.log(Object.isExtensible(testObj)); //true
70+
Object.preventExtensions(testObj);
71+
console.log(Object.isExtensible(testObj)); //false
72+
73+
# 密封的对象；
74+

‎JS高级技巧/高级函数.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -461,4 +461,5 @@ ECMAScript 5 为所有函数定义了一个原生的 bind() 方法，进一步
461461
var oBtn=document.getElementById("btn");
462462
EventUtil.addHandler(oBtn,"click",bind(handler.handleClick, handler, "btn"));
463463

464-
JavaScript 中的柯里化函数和绑定函数提供了强大的动态函数创建功能。使用 bind() 还是 curry()要根据是否需要 object 对象响应来决定。它们都能用于创建复杂的算法和功能，当然两者都不应滥用，因为每个函数都会带来额外的开销。
464+
JavaScript 中的柯里化函数和绑定函数提供了强大的动态函数创建功能。使用 bind() 还是 curry()要根据是否需要 object 对象响应来决定。它们都能用于创建复杂的算法和功能，当然两者都不应滥用，因为每个函数都会带来额外的开销。
465+

‎index.js‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
1-
/*
2-
//function curry(fn){
3-
function bind(fn,context){
4-
//var args=Array.prototype.slice.call(arguments,1);
5-
var args=Array.prototype.slice.call(arguments,2);
6-
return function (){
7-
var innerArgs=Array.prototype.slice.call(arguments);
8-
var finnalArgs=args.concat(innerArgs);
9-
console.log("args->"+args+" innerArgs->"+innerArgs+" finnalArgs->"+finnalArgs);
10-
//return fn.apply(null,finnalArgs);
11-
return fn.apply(context,finnalArgs);
12-
}
13-
}
14-
15-
var handler = {
16-
message: "Event handled",
17-
handleClick: function(name, event){
18-
alert(this.message + ":"+ name + ":"+ event.type);
19-
}
1+
var testObj={
2+
name:"testObj",
3+
age:"1"
204
};
21-
var btn = document.getElementById("my-btn");
22-
EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler, "my-btn"));*/
5+
console.log(Object.isExtensible(testObj)); //true
6+
Object.preventExtensions(testObj);
7+
console.log(Object.isExtensible(testObj)); //false

‎test-file.html‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,27 @@
55
<title>Document</title>
66
</head>
77
<body>
8-
<a href="javascript:;" id="btn">00000000000</a>
8+
9+
10+
11+
<fieldset class="cbi-section" id="cbi-system-system">
12+
<legend>Reboots</legend>
13+
<span class="panel-title">Reboots the operating system of your device</span>
14+
<fieldset class="cbi-section-node">
15+
<div class="cbi-value">
16+
<label class="cbi-value-title">Reboot </label>
17+
<div class="cbi-value-field">
18+
<div>
19+
<a href="/cgi-bin/luci/;stok=b1bf433a70ef977c412861b6fee905fa/admin/system/reboot" class="cbi-input-reboot">Reboot System</a>
20+
</div>
21+
</div>
22+
</div>
23+
</fieldset>
24+
<br>
25+
</fieldset>
26+
27+
28+
<a href="javascript:;" id="btn">cbi-input-invalid j-cbi-input-wpakey </a>
929
<script src="index.js"></script>
1030
<script>
1131
//这里是事件工具库；
@@ -80,8 +100,14 @@
80100
}
81101

82102
var oBtn=document.getElementById("btn");
83-
EventUtil.addHandler(oBtn,"click",bind(handler.handleClick, handler, "btn"));
103+
// EventUtil.addHandler(oBtn,"click",bind(handler.handleClick, handler, "btn"));
84104

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+
}
85111
</script>
86112
</body>
87113
</html>

0 commit comments

Comments
 (0)