5.闭包
一个函数的作用域可以访问另一个函数的局部变量，这个变量所在的函数就是闭包函数
闭包使得内部函数可以访问外部函数的属性（变量或方法）
在 JavaScript 中， 每当创建一个函数， 闭包就会在函数创建的同时被创建出来
闭包本身就是 javascript 的重要知识点
5.1变量的作用域复习
变量根据作用域的不同分为两种：全局变量和局部变量。
- 函数内部可以使用全局变量。
- 函数外部不可以使用局部变量。
- 当函数执行完毕，本作用域内的局部变量会销毁。
5.2什么是闭包
闭包（closure）指有权访问另一个函数作用域中变量的函数。
简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
5.3闭包的作用
- 作用：延伸变量的作用范围。
- 变量不会销毁（核心作用）
- 变量什么时候不会销毁：变量被引用并且有内存
- 闭包的缺点：内存泄漏（栈溢出）
- 闭包的场景：以下代码
var liList = ul.getElementsByTagName('li') for(var i=0; i<6; i++){ !function(ii){ //立即执行函数 liList[ii].onclick = function(){ alert(ii) // 0、1、2、3、4、5 } }(i) } //注：如果不加立即执行函数全局变量i==6 ,点击任何一个li都是6（因为只有在for循环结束才会触发事件）
闭包形成的条件
1,函数嵌套
2.将内部函数作为返回值返回
3.内部函数必须使用到外部的变量
function fn() {
var num = 10;
function fun() {
console.log(num);
}
return fun;
}
var f = fn();// return后面的返回值和fn()相等 即fn()===fun
f();
5.4闭包的案例
立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
- 利用闭包的方式得到当前li 的索引号
for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
(function(i) {
lis[i].onclick = function() {
console.log(i);
}
})(i);
}
- 闭包应用-3秒钟之后,打印所有li元素的内容
for (var i = 0; i < lis.length; i++) {
(function(i) {
setTimeout(function() {
console.log(lis[i].innerHTML);
}, 3000)
})(i);
}
- 闭包应用-计算打车价格
/*需求分析
打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费*/
var car = (function() {
var start = 13; // 起步价 局部变量
var total = 0; // 总价 局部变量
return {
// 正常的总价
price: function(n) {
if (n <= 3) {
total = start;
} else {
//起步价加上超出的公里数的价格
total = start + (n - 3) * 5
}
return total;
},
// 拥堵之后的费用
yd: function(flag) {
return flag ? total + 10 : total;
}
}
})();
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33
5.5案例
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
return function() {
return this.name;
};
}
};
console.log(object.getNameFunc()())
-----------------------------------------------------------------------------------
var name = "The Window";
var object = {
name: "My Object",
getNameFunc: function() {
var that = this;
return function() {
return that.name;
};
}
};
console.log(object.getNameFunc()())
\
