谈论javascript闭包
闭包看似很简单,其实牵扯了很多东西,例如:上下文作用域(事件处理程序)、内存占用、局部以及全局变量、回调函数以及编程模式等
首先我们谈论一个问题,为什么需要闭包?
1.var全局定义(全局污染)- 指的是同一变量名会影响到所有的同名变量。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="Test.js"></script>
<!-- <script src="Tests.js"></script> -->
<script>
console.log(ok);
</script>
</head> <body> </body> </html>
运行好像真的没问题,没关系,我们试一试下面

//Test.js var ok = "666";
//Tests.js
var ok = "999";

搞什么嘛,明明是不同JavaScript文件 - 牵扯到JavaScript引擎对JavaScript的处理机制。
2.ES6相对于ES5,增加了const 、let声明变量的方式(你该知道它们为什么出世的)。
//Test.js
let ok = "666";
//Tests.js var ok = "999";
当我们其中一个js文件使用了Let同名变量声明后,浏览器报错了

说该变量已经被使用了! 当我们更改了Tests.js同名变量以后,浏览器会作何反应呢?
//Tests.js var oks = "999";
它显示了let定义的变量值

Let只能被变量同名定义一次,记住了! 下面这个示例会告诉你
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="Test.js"></script>
<script src="Tests.js"></script>
<script>
let ok = "000";
console.log(ok);
</script>
</head> <body> </body> </html>
const 又是怎么回事呢?(const只能被赋值一次,且不可修改,以后可修改的只能是它的对象元素)
//Test.js // var ok ="666";
let ok = "666";
const ju = "888";
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="Test.js"></script>
<script src="Tests.js"></script>
<script>
const ju = "111";
console.log(ju);
</script>
</head> <body> </body> </html>
什么是闭包
闭包允许你从内部函数访问外部函数的作用域。
在JavaScript中,每次创建函数时都会在函数创建时创建闭包。
要使用闭包,只需在另一个函数内定义一个函数并将其暴露。要公开一个函数,将其返回或传递给另一个函数。
即使在外部函数返回后,内部函数也可以访问外部函数作用域中的变量。
在JavaScript中,闭包是用于启用数据隐私的主要机制。当您使用闭包实现数据隐私时,封闭变量只在包含(外部)函数的范围内。
除了通过对象的特权方法外,您无法从外部范围获取数据。在JavaScript中,在闭包范围内定义的任何公开方法都是有特权的。
data-private.js
const getSecret = (secret) => {
return {
get: () => secret
};
};
test('Closure for object privacy.', assert => {
const msg = '.get() should have access to the closure.';
const expected = 1;
const obj = getSecret(1);
const actual = obj.get();
try {
assert.ok(secret, 'This throws an error.');
} catch (e) {
assert.ok(true, `The secret var is only available
to privileged methods.`);
}
assert.equal(actual, expected, msg);
assert.end();
});
谈论javascript闭包的更多相关文章
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript闭包(Closure)
JavaScript闭包(Closure) 本文收集了多本书里对JavaScript闭包(Closure)的解释,或许会对理解闭包有一定帮助. <你不知道的JavsScript> Java ...
- Javascript闭包和C#匿名函数对比分析
C#中引入匿名函数,多少都是受到Javascript的闭包语法和面向函数编程语言的影响.人们发现,在表达式中直接编写函数代码是一种普遍存在的需求,这种语法将比那种必须在某个特定地方定义函数的方式灵活和 ...
- javascript闭包理解
//闭包理解一 function superFun(){ var _super_a='a'; function subfuc(){ console.log(_super_a); } return su ...
- Javascript闭包深入解析及实现方法
1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点:1. 作为一个函数变量的一个引用,当函数返回时 ...
- javascript闭包和作用域链
最近在学习前端知识,看到javascript闭包这里总是云里雾里.于是翻阅了好多资料记录下来本人对闭包的理解. 首先,什么是闭包?看了各位大牛的定义和描述各式各样,我个人认为最容易一种说法: 外部函数 ...
- JavaScript闭包深入解析
for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } --上面这段 ...
- JavaScript 闭包系列二(匿名函数及函数的闭包)
一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) { return 2*x; } 2)Function构造函数,把参数列表和函数体都作为字 ...
随机推荐
- IMX6核心板系列解决方案-工业级|商业级|四核|双核|Plus核心板
i.MX 6Quad四核商业级和工业级系列的应用处理器将可扩展平台与广泛的集成和高能效处理功能相结合,尤其适合多媒体应用.i.MX6 Quad处理器的特性包括: 满足操作系统和游戏的MIPS需求,增强 ...
- 面试必备【含答案】Java面试题系列(二
1.写clone()方法时,通常都有一行代码,是什么?答:super.clone(),他负责产生正确大小的空间,并逐位复制. 2.GC 是什么? 为什么要有GC?答:GC 是垃圾收集的意思(Gabag ...
- idea 一些设置
idea 中编码格式:VM options 中输入:-Dfile.Encoding=UTF-8 添加tomcat 当+号中没有tomcat时,先看有没有tomcat插件,没有则进行添加,然后 ...
- MySQL 中去重 distinct 用法
在使用MySQL时,有时需要查询出某个字段不重复的记录,这时可以使用mysql提供的distinct这个关键字来过滤重复的记录,但是实际中我们往往用distinct来返回不重复字段的条数(count( ...
- Vue+Bootstrap实现购物车程序(1)
先看下案例效果:(简单的数量控制及价格运算) 代码: <!DOCTYPE html> <html> <head lang="en"> <m ...
- Ubuntu16.04 python3.4.3升级到python3.7.1
python有两个版本,一个2版本,使用的是python:另一个是3版本,使用的是python3. 简易安装python后得到的3版本的版本号是python3.4.3. 可以使用下面的命令查看py版本 ...
- OneinStack 安装 LNMP 切换PHP版本
如果你的环境不是OneinStack安装的 ,可以略过这条博客了 注意:以下所有命令若提示权限不足 请在命令前加 sudo *** ①,首先查看当前已安装的PHP版本,我这里安装了好几个版本,你们可 ...
- Java 取本月第一天和最后一天
/** * 获取本月第一天 * @return */ public Date getmindate(){ Calendar calendar = Calendar.getInstance(); cal ...
- 题解 洛谷P1903/BZOJ2120【[国家集训队]数颜色 / 维护队列】
对于不会树套树.主席树的本蒟蒻,还是老老实实的用莫队做吧.... 其实这题跟普通莫队差不了多远,无非就是有了一个时间,当我们按正常流程排完序后,按照基本的莫队来,做莫队时每次循环对于这一次操作,我们在 ...
- 笔试算法题(48):简介 - A*搜索算法(A Star Search Algorithm)
A*搜索算法(A Star Search Algorithm) A*算法主要用于在二维平面上寻找两个点之间的最短路径.在从起始点到目标点的过程中有很多个状态空间,DFS和BFS没有任何启发策略所以穷举 ...