青岛建设银行股份有限公司网站首页/腾讯与中国联通
文章目录
- 变量作用域
- 闭包
- 1.什么是闭包
- 2.调试闭包
- 3.闭包的作用
- 4.闭包的案例
- 4.1.循环注册点击事件
- 4.2.定时器中的闭包
- 4.3.打车价格
变量作用域
变量根据作用域的不同分为两种:全局变量和局部变量。 1.函数内部可以使用全局变量。 2.函数外部不可以使用局部变量。 3.当函数执行完毕,本作用域内的局部变量会销毁。闭包
1.什么是闭包
闭包(closure)指有权访问另一个函数作用域中变量的函数。---- JavaScript高级程序设计
简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。
代码如下（示例）：
<script>// 闭包（closure）指有权访问另一个函数作用域中变量的函数。// 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 numfunction fn() {var num = 10;function fun() {console.log(num);}fun();}fn();</script>
在fun这个作用域里面可以访问另外一个函数fn作用域中的局部变量，那就产生了闭包。事实上能打印出10。
被访问的变量所在的函数就是闭包函数即fn为闭包函数。
2.调试闭包
1.打开浏览器,按F12键启动chrome调试工具。
2.在sources中设置断点，并且重新刷新页面。
3.找到scope选项(Scope 作用域的意思)。
4.当我们重新刷新页面，会进入断点调试，Scope里面会有两个参数(global 全局作用域、local局部作用域)。
5.当执行到 fun ()时,Scope里面会多一个Closure参数，这就表明产生了闭包。
3.闭包的作用
闭包的主要作用: 延伸了变量的作用范围
fn 外面的作用域可以访问 fn 内部的局部变量，f函数也可使用fn里面的num局部变量，当fn函数执行完毕后，num 局部变量就会销毁，但是f函数等着调用fn，所以等着f调用完毕后，才会销毁num变量。
代码如下（示例）：
<script>function fn() {var num = 10;return function() {console.log(num);}}var f = fn();f();</script>
4.闭包的案例
4.1.循环注册点击事件
因为for循环是同步的，而dom元素绑定事件click是异步的，所以如果直接console.log(i)，得到的结果是4。
代码如下（示例）：
<body><ul class="nav"><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li><li>大猪蹄子</li></ul><script>// 闭包应用-点击li输出当前li的索引号// 1. 我们可以利用动态添加属性的方式var lis = document.querySelector('.nav').querySelectorAll('li');for (var i = 0; i < lis.length; i++) {lis[i].index = i;lis[i].onclick = function() {// console.log(i);console.log(this.index);}}// 2. 利用闭包的方式得到当前小li 的索引号for (var i = 0; i < lis.length; i++) {// 利用for循环创建了4个立即执行函数// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量(function(i) {// console.log(i);lis[i].onclick = function() {console.log(i);}})(i);}</script>
</body>
2中点击事件函数用到了传递的参数i，所以此时产生了闭包。
立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
4.2.定时器中的闭包
代码如下（示例）：
<body><ul class="nav"><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li><li>大猪蹄子</li></ul><script>// 闭包应用-3秒钟之后,打印所有li元素的内容var lis = document.querySelector('.nav').querySelectorAll('li');for (var i = 0; i < lis.length; i++) {(function(i) {setTimeout(function() {console.log(lis[i].innerHTML);}, 3000)})(i);}</script>
</body>
4.3.打车价格
代码如下（示例）：
<body><script>// 闭包应用-计算打车价格 // 打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格// 如果有拥堵情况,总价格多收取10块钱拥堵费// function fn() {};// fn();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)); // 23console.log(car.yd(true)); // 33console.log(car.price(1)); // 13console.log(car.yd(false)); // 13</script>
</body>