前端面试之JavaScript中的闭包!
前端面试之JavaScript中的闭包!
闭包
闭包( closure )指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计
闭包其实可以理解为是一个函数
简单理解就是,一个作用域可以访问另外一个函数内部的局部变量。
<script>
// 闭包(closure)指有权访问另一个函数作用域中变量的函数。
function fn() {
var num = 29;
function fn2() {
console.log(num); // 29
}
fn2();
}
debugger
fn();
</script>
闭包就是当前作用域可以访问另一个函数的作用域中的局部变量!另一个函数就叫做闭包函数!也就是说产生了闭包!
被访问的这个变量的这个函数就叫做闭包函数!
闭包的作用!
闭包的作用:延伸了变量的作用范围!
// 闭包(closure)指有权访问另一个函数作用域中变量的函数。
// 一个作用域可以访问另外一个函数的局部变量
// 我们fn外面的作用域可以访问fn内部的局部变量
function fn() {
var num = 29;
// function fn2() {
// console.log(num); // 29
// }
// return fn2; // 把fn2这个函数返回回去!
// 简化
return function () {
console.log(num); // 29
}
}
var f = fn(); // f接收的就是一个函数, 那么我们调用他不就可以实现外面的作用域可以访问fn内部的局部变量了嘛!
f(); // 29
闭包的案例
点击li输出当前li的索引号
// 闭包应用-点击1i输出当前1i的索引号
// 闭包应用-点击1i输出当前1i的索引号
// 我们可以利用动态添加属性的方式
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(this.index)
// }
// }
// 2.利用闭包的方式得到当前小li的索引号
for (var i = 0; i < lis.length; i++) {
// 利用for循环创建了4个立即执行函数
// 立即执行函数也成为小闭包因为立即执行函数里面的任何个函数都可以使用它的i这变量
(function(i) {
// console.log(i)
lis[i].onclick = function() {
debugger
console.log(i)
}
})(i);
}
闭包应用-3秒钟之后,打印所有1i元素的内容
// 闭包应用-3秒钟之后,打印所有1i元素的内容
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
(function(i) {
setTimeout(function() {
console.log(lis[i].innerHTML)
}, 2000)
})(i);
}
计算打车价格
//闭包应用-计算打车价格
// 打车起步价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)); // 23
console.log(car.yd(true)); // 33
console.log(car.price(1)); // 13
console.log(car.yd(false)); // 13
关于闭包的思考题!
下面的函数中有没有产生闭包呢?
var names = 'The Window';
var obj = {
names: 'My obj',
getNameFunc: function() {
return function() {
return this.names;
}
}
}
console.log(obj.getNameFunc()()); // The Window
// Why
var names = 'The Window';
var obj = {
names: 'My obj',
getNameFunc: function() {
var that = this;
return function() {
return that.names;
}
}
}
console.log(obj.getNameFunc()());
前端面试之JavaScript中的闭包!的更多相关文章
- 前端面试之JavaScript中数组的方法!【残缺版!!】
前端面试之JavaScript中数组常用的方法 7 join Array.join()方法将数组中所有元素都转化为字符串并连接在-起,返回最后生成的字 符串.可以指定一个可选的字符串在生成的字符串中来 ...
- 前端面试之JavaScript中this的指向【待完善!】
JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...
- 一篇文章把你带入到JavaScript中的闭包与高级函数
在JavaScript中,函数是一等公民.JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式. funct ...
- 前端开发:Javascript中的数组,常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
- 让你分分钟学会Javascript中的闭包
Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...
- 难道这就是JavaScript中的"闭包"
其实对于JavaScript中的"闭包"还没真正理解,这次在实际Coding中似乎遇到了"闭包"的问题,仅此摘录,以待深究. 表现为jQuery的post方法回 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- javascript中的闭包解析
学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去 ...
- JavaScript中的闭包理解
原创文章,转载请注明:JavaScript中的闭包理解 By Lucio.Yang 1.JavaScript闭包 在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第 ...
随机推荐
- 6 个例子教你重构 Python 代码
1. 合并嵌套的 if 条件 太多的嵌套会使代码难以理解,这在 Python 中尤为如此,因为 Python 没有括号来帮助区隔不同的嵌套级别. 阅读深度嵌套的代码容易让人烦躁,因为你必须理清哪些条件 ...
- html嵌入腾讯视频的方法
1.首先我们从腾讯视频网站上找到一个视频网页的连接,格式是这样的 https://v.qq.com/x/page/b0136et5ztz.html 上面我标红色的是视频的vid 2.我们把vid放到接 ...
- Core3.0使用Caching.Memory
前言 参考链接: 使用缓存:https://www.cnblogs.com/gygg/p/11275417.html 过期时间:https://www.cnblogs.com/maijin/p/704 ...
- C#中使用NPOI提示(找到的程序集清单定义与程序集引用不匹配)
问题 找到的程序集清单定义与程序集引用不匹配. (异常来自 HRESULT:0x80131040) 描述 使用NPOI导出word文档,需要C#的解压缩类,所以引用了ICSharpCode.Sharp ...
- Windows无法访问共享文件夹
问题描述 今天打开vss连接代码,提示如下信息 解决办法 可行:重置登录用户信息 原博文 https://zhidao.baidu.com/question/1174230805440255699.h ...
- [WPF] 让第一个数据验证出错(Validation.HasError)的控件自动获得焦点
1. 需求 在上一篇文章 <在 ViewModel 中让数据验证出错(Validation.HasError)的控件获得焦点>中介绍了如何让 Validation.HasError 的控件 ...
- three.js WebGLRenderTarget
今天郭先生说一说WebGLRenderTarget,它是一个缓冲,就是在这个缓冲中,视频卡为正在后台渲染的场景绘制像素. 它用于不同的效果,例如把它做为贴图使用或者图像后期处理.线案例请点击博客原文. ...
- java中自定义一个异常类 在某些情况抛出自定的异常 ----------阻断程序
//=============定义异常类 package org.springblade.flow.engine.errorException; /** * 自定义异常处理写入sap失败 */ pub ...
- [LeetCode]144. Binary Tree Preorder Traversal二叉树前序遍历
关于二叉树的遍历请看: http://www.cnblogs.com/stAr-1/p/7058262.html /* 考察基本功的一道题,迭代实现二叉树前序遍历 */ public List< ...
- [leetcode]543. Diameter of Binary Tree二叉树的直径
题目中的直径定义为: 任意两个节点的最远距离 没想出来,看的答案 思路是:diameter = max(左子树diameter,右子树diameter,(左子树深度+右子树深度+1)) 遍历并更新结果 ...