目录

• 第二章 - 03： 前端 进阶技巧之高阶函数 一、防篡改对象 1-1：Configurable 和 Writable
• 1-2：Enumerable
• 1-3：get 、set
• 2-1：不可扩展对象
• 2-2：密封的对象
• 2-3：冻结的对象

第二章 - 03： 前端 进阶技巧之高阶函数

一、防篡改对象

JavaScript共享的本质一直是开发人员心头的痛，因为任何对象都可以被在同一个环境中运行的代码修改。

ECMAScript5致力于解决这个问题，可以让开发人员定义

防篡改对象

通过设置每个对象的属性的一下的默认属性：

• [[Configurable]] --- 是否可配置
• [[Writable]] --- 是否可以重新赋值
• [[Enumerable]] --- 是否可列举的
• [[Value]] --- 默认值
• [[Get]]
  
• [[Set]]

1-1：Configurable 和 Writable

下面我们就针对以上每一个属性进行 解析一下：

// Demo one
var o = {}
Object.defineProperty(o, 'name', {
value: 'zhang',
configurable: false
})
console.log(o)

Object.defineProperty(o, 'name', {
writable: false
})

o.name = 'Li'

console.log(o)  // {name: 'zhange'}  属性未被改变

上面的 Demo 中 我们将 configurable 属性设置成为 false， 再对比下面的 Demo 来看 configurable 属性作用

// Demo two
var o = {}
Object.defineProperty(o, 'name', {
value: 'zhang',
configurable: false
})
console.log(o)

Object.defineProperty(o, 'name', {
writable: true
})

o.name = 'Li'

// Uncaught TypeError: Cannot redefine property: name 报错

1-2：Enumerable

我们还是用 Demo 来进行对比解释：

var o = {}
Object.defineProperty(o, 'age', {
enumerable: true,
value: 18
})

for(item in o) {
console.log(item, o[item])   // age 18
}

var o = {}
Object.defineProperty(o, 'age', {
enumerable: false,
value: 19
})

for(item in o) {
console.log(item, o[item])   // undefined
}

1-3：get 、set

get 和 set 这对双胞胎我们已经说过多次了。这次我们仔细来看下这个～

var o = {}
var v = 'coder'
Object.defineProperty(o, 'job', {
get: function() {
console.log('get:', v)
return v
},
set: function(newV) {
console.log('set:', newV)
v = newV
}
})
o.job = 'xxx'   // set: xxx

// 很奇怪的一点就是 当我们在 浏览器控制台点开 o 对象的时候，再次去点击 job 属性，就会触发 get 方法。

2-1：不可扩展对象

var o = {name: 'zhang'}
Object.preventExtensions(o)

o.age = '12'
console.log(o)      // {name: 'zhang'}

// 已经阻止了给对象添加属性和方法了。再去添加 也未能添加上

var o = {name: 'zhang'}
var res1 = Object.isExtensible(o)
Object.preventExtensions(o)
var res2 = Object.isExtensible(o)
console.log(res1, res2)     // true false

2-2：密封的对象

var o = {name: 'Li'}
Object.isSealed(o)  // false
Object.seal(o)
Object.isSealed(o)  // true

2-3：冻结的对象

最严格的防篡改级别就是冻结对象（frozen object）。冻结的对象不能扩展，又是密封的，而且对象属性的[[Writable]]特性会被设置为false。

如果定义了[[Set]]函数，访问器属性仍然是可写的。

var obj = {age: 123}
Object.freeze(obj)
Object.isFrozen(obj)            // true
Object.isSealed(obj)            // true
Object.isExtensible(obj)        // false

检查是否被冻结

二、自定义事件

观察者模式

function EventTarget(){
this.handlers = {};
}

EventTarget.prototype = {
constructor : EventTraget,
addHandler : function(type,handler){
if(typeof this.handlers[type] === 'undefined'){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire : function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i = 0,len = handlers.length; i < len; i++){
handlers[i](event);//执行回调函数
}
}
},
removeHandler : function(type,handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i = 0,len = handlers.length; i < len; i++){
if(handlers[i] === handler){
break;
}
}
handlers.splice(i,1);//删除
}
}
}