闭包的例子
function outer(){
var localVal = 30;
return localVal;
}
outer();//30
//闭包
function outer(){
var localVal = 30;
return function(){
return localVal;
}
}
var func = outer();
func();//30
闭包-无处不在
!function(){
var localData = "localData here";
document.addEventListener('click',function(){
console.log(localData);
});
}();
!function(){
var localData = "localData here";
var url = "http://www.baidu.com";
$.ajax({
url:url,
success:function(){
//todo
console.log(loaclData);
}
});
}();
闭包-常见错误之循环闭包
//点击div aaa、bbb、ccc显示1、2、3,实际显示都为4,因为i的值最后等于4,点击后所有都是4
document.body.innerHTML="
+"
for(var i = 1;i<4;i++ ){
document.getElementById('div' + i).
addEventListener('click',function(){
alert(i);//all are 4;
});
}
//如何显示1,2,3
document.body.innerHTML="
+"
for(var i = 1;i<4;i++ ){
!function(i){
document.getElementById('div' + i).
addEventListener('click',function(){
alert(i);//all are 4;
});
}(i);
}
闭包-封装
(function(){
var _userId = 23492;
var _typeId = 'item';
var export = 0;
function converter(userId){
return +userId;
}
export.getUserId = function(){
return converter(_userId);
}
export.getTypeId = function(){
return _typeId;
}
window.export = export;
}());
export.getUserId();//23492
export.getTypeId();//item
export._userId;//undefined
export._typeId;//undefined
export.converter;//undefined
//闭包可以封装私有变量,直接无法访问
闭包的概念
- 在计算机科学中,闭包(也称词法闭包或函数闭包)是指一个函数或函数的引用,与一个引用环境绑定在一起。这个引用环境是一个存储该函数每个非局部变量(也叫自由变量)的表。
- 闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍可访问非本地变量。
优点 缺点
闭包灵活和方便 空间浪费
内存泄漏
封装 性能消耗
作用域
全局、函数、eval
var a = 10; //全局
(function(){
var b = 20; //函数作用域
})();
console.log(a);//10
console.log(b);//error,b in ont defined
for(var item in {a:1,b:2}){ //var item 全局
console.log(item);//
}
console.log(item);//item still in scope
eval("var a - 1;");
作用域链
function outer2(){
var local2 = 1;
function outer1(){
var local1 = 1;
}
outer1();
}
var global3 = 1;
outer2();
function outer(){
var I = 1;
var func = new Function("console.log(typeof i);");
func();//undefined
利用函数作用域封装
匿名函数,前面加一个!不会被先处理掉 ,函数声明被前置 ,所以被优先处理掉
(function(){
var a,b;
})();
!function(){
var a,b;
}();
ES3执行上下文(忽略)可以去网上找找看看呀!