JavaScript闭包详解及案例

一. 变量作用域

函数内部可以使用全局变量
函数外部不可以使用局部变量
当函数执行完毕时，本作用域内的局部变量会被销毁

二. 闭包

闭包:有权访问另一个函数作用域中变量的函数(变量所在的函数就是闭包函数，闭包就是典型的高阶函数)
闭包的作用：延申了变量的作用范围

//方法一
function fn() {var num = 10;return function() {console.log(num);}
}
var f = fn();
f();  //10

//方法二
function fn() {var num = 10;function fn1() {console.log(num);}return fn1();
}
fn();  //10

三. 案例

案例1：点击每一道菜会打印出相应索引号

<body><ul class="nav"><li>红烧茄子</li><li>凉拌海带丝</li><li>泡椒风爪</li><li>韩式烤肉</li></ul><script>//点击每一道菜会打印出索引号//方法1.利用动态添加属性的方法(传统方法)var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {lis[i].index = i;lis[i].onclick = function() {alert(this.index);}}//方法2.利用闭包的方法for (var i = 0; i < lis.length; i++) {(function(i) {lis[i].onclick = function() {console.log(i);}})(i); //立即执行函数最后一个小括号用来传递参数，第一个小括号用来接收参数}</script>
</body>

案例2：3秒钟之后打印所有li元素的内容

<body><ul class="nav"><li>红烧茄子</li><li>凉拌海带丝</li><li>泡椒风爪</li><li>韩式烤肉</li></ul><script>//3秒钟之后打印所有li元素的内容var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {(function(i) {setTimeout(function() {console.log(lis[i].innerHTML);}, 3000)})(i);}</script>
</body>

案例3：计算打车价格(在3公里内打车起步价13，之后多一公里多5元，用户输入公里数就可以计算打车价格，若出现拥堵情况，总价格多收10元)

var car = (function() {var start = 13;var total = 0;return {price: function(n) {if (n <= 3) {total = start;} else {total = (n - 3) * 5 + start;}return total;},jam: function(n) {if (n = 0) {return total = total;} else {return total = total + 10;}}};
})();
car.price(5);
var money = car.jam(1);
console.log(money);

四. 思考

下列代码的返回值

var name = 'The Window';var object = {name: "My Object",getNameFunc: function() {that = this;return function() {return that.name;};}};
console.log(object.getNameFunc()());  //My Object

下列代码的返回值

var name = 'The Window';var object = {name: "My Object",getNameFunc: function() {return function() {return this.name;};}};
console.log(object.getNameFunc()());  //The Window

你做对了吗？

JavaScript闭包详解及案例相关推荐

JavaScript 闭包详解
2019独角兽企业重金招聘Python工程师标准>>> 闭包是什么? 闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(Function Clo ...
JavaScript闭包详解
文章出自个人博客https://knightyun.github.io/2018/05/31/js-closure,转载请申明变量作用域首先来了解一下Javascript中变量的作用域,除了常见的 ...
JavaScript重难点解析4（作用域与作用域链、闭包详解）
JavaScript重难点解析4(作用域与作用域链.闭包详解) 作用域与作用域链作用域作用域与执行上下文作用域链闭包闭包理解将函数作为另一个函数的返回值将函数作为实参传递给另一个函数调用 ...
Javascript 函数详解
Javascript 函数详解 1)函数声明: 通过关键字function定义,把函数作为变量来声明函数声明后不会立即执行,会在我们需要的时候调用到. <script>function ...
Springboot 整合 Dubbo/ZooKeeper 详解 SOA 案例
摘要: 原创出处:www.bysocket.com 泥瓦匠BYSocket 希望转载,保留摘要,谢谢! "看看星空,会觉得自己很渺小,可能我们在宇宙中从来就是一个偶然.所以,无论什么事情,仔 ...
EMD算法之Hilbert-Huang Transform原理详解和案例分析
目录 Hilbert-Huang Transform 希尔伯特-黄变换 Section I 人物简介 Section II Hilbert-Huang的应用领域 Section III Hilbert ...
JavaScript正则表达式详解（一）正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
JavaScript事件详解-jQuery的事件实现（三）
正文本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
DL之DilatedConvolutions：Dilated Convolutions(膨胀卷积/扩张卷积)算法的简介(论文介绍)、架构详解、案例应用等配图集合之详细攻略
DL之DilatedConvolutions:Dilated Convolutions(膨胀卷积/扩张卷积)算法的简介(论文介绍).架构详解.案例应用等配图集合之详细攻略目录 Dilated Con ...

JavaScript闭包详解及案例

JavaScript闭包详解及案例

JavaScript闭包详解及案例相关推荐

最新文章

热门文章