第3章闭包和高阶函数
3.1闭包
3.1.1 变量的作用域
3.1.2 变量的生存周期
var Type = {};
for(var i = 0, type; type = ['String','Array','Number'][i++];){
(function(type){
Type['is'+type] = function(obj){
return Object.prototype.toString.call(obj) === '[object '+type+']';
}
})(type)
}
var a = Type.isArray([]);//true
var b = Type.isString('str');//true
console.log(a);
console.log(b);
3.1.3 闭包的更多作用
1封装变量
var mult = (function(){
var cache = {};
var calculate = function(){
for(var i = 0, l = arguments.length; i<1; i++){
a = a*arguments[i];
}
return a;
};
return function(){
var args = Array.pototype.join.call(arguments,',');
if(args in cache){
return cache[args];
}
return cache[args] = calculate.apply(null,arguments);
}
})()
2延续局部变量的寿命
3.1.4 闭包和面向对象设计
var extent = function(){
var value = 0;
return {
call : function(){
value++;
console.log(value);
}
}
}
var extent = extent();
extent.call();
extent.call();
extent.call();
//面向对象的写法
var extent = {
value:0,
call:function(){
this.value++;
console.log(this.value);
}
}
extent.call();//1
extent.call();//2
extent.call();//3
//或者
var Exent = function(){
this.value = 0;
}
Exent.prototype.call = function(){
this.value+;
console.log(this.value);
}
var extent = new Exent;
extent.call();//1
extent.call();//2
extent.call();//3
3.1.5用闭包实现命令模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="execute">点击我执行命令</button>
<button id="undo">点击我执行命令</button>
<script>
var Tv = {
open:function(){
console.log("打开电视");
},
close:function(){
console.log("关上电视")
}
};
var OpenTvCommand = function(receiver){
this.receiver = receiver;
}
OpenTvCommand.prototype.execute = function(){
this.receiver.open();
}
OpenTvCommand.prototype.undo = function(receiver){
this.receiver.close();
}
var setCommand = function(command){
document.getElementById('execute').onclick = function(){
command.execute();
}
document.getElementById('undo').onclick = function(){
command.undo();
}
};
setCommand(new OpenTvCommand(Tv));
//把请求封装为对象，从而分离请求的发起者和请求的接收者（执行者）之间的耦合关系
</script>
</body>
</html>
闭包版本
var Tv = {
open:function(){
console.log('打开电视');
},
close:function(){
console.log('关上电视');
}
}；
var createCommand = function(receiver){
var execute = function(){
return receiver.open();
}
var undo = function(){
return receiver.close();
}
return {
execute:execute,
undo:undo
}
};
var setCommand = function(command){
document.getElementById('execute').onclick = function(){
command.execute();
}
document.getElementById('undo').onclick = function(){
command.undo();
}
};
setCommand(createCommand(Tv));
3.1.3 闭包与内存管理
C++以COM对象的方式实现BOM和DOM COM对象的垃圾收集机制采用的是以引用计数策略
把循环引用中的变量设为null
3.2 高阶函数
3.2.1函数作为参数传递
1回调函数
var appendDiv = function(){
for(var i = 0; i<100; i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div);
if(typeof callback === 'function'){
callback(div);
}
}
}
appendDiv(function(){
node.style.display = 'none'
});
2Array.prototype.sort
[1,4,3].sort(function(a,b){
return a-b;
}) //[1,3,4]
[1,4,3].sort(function(a,b){
return b-a;
}) //[4,3,1]
3.2.2函数作为返回值输出
1判断数据的类型
var isType = function(type) {
return function(obj){
return Object.prototype.toString.call(obj) ==='[object ' + type+']';
}
}
var isString = isType('Sting');
var isArray = isType('Array');
var isNumber = isType('Number');
console.log(isArray([1,2,3])); //true
2getSingle
var getSingle = function(fn){
var ret;
return function(){
return ret || (ret = fn.apply(this,arguments))
}
}
var getSingle = getSingle(function(){
return document.createElement('script');
})
var script1 = getSingle();
var script2 = getSingle();
console.log(script1===script2);
3.2.3高阶函数实现AOP
Function.prototype.before = function(beforefn){
var _self = this;
return function(){
beforefn.apply(this,arguments);
return _self.apply(this,arguments);
}
}
Function.prototype.after = function(afterfn){
var _self = this;
return function(){
var ret = _self.apply(this,arguments);
afterfn.apply(this,arguments);
return ret;
}
};
var func = function(){
console.log(2);
}
func = func.before(function(){
console.log(1);
}).after(function(){
console.log(3);
});
func();
网友评论