读《你不知道的JavaScript(上卷)》后感-作用域闭包(二)
一、 序言
最近我在读一本书:《你不知道的JavaScript》,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这本书,受益匪浅。
《你不知道的JavaScript上卷》
现在我读完这本书的一些心得与总结:
一、作用域闭包
先来一段代码:
function foo(){
var a = 10;
function bar(){
console.log(a); // 10
}
bar()
}
foo();
console.log(a); // ReferenceError: a is not defined
这段代码看起来和嵌套作用域中的示例代码很相似。基于词法作用域的查找规则,函数 bar() 可以访问外部作用域中的变量 a(这个例子中的是一个 RHS 引用查询)。
当调用foo()时候,进入了foo函数的作用域里面,一直读,读到输出a的时候,foo里面的生命周期就结束了,当然我们清晰知道,外面作用域是访问不了内部的作用域的变量的,则最外层的输出a ReferenceError: a is not defined
我们还记得return的语法么?
小复习:
1.
(function foo(){
return function(){
console.log(2);
};
}())
这里我定义了一个自调用的函数,第一步是什么都没有输出的,这里是执行了foo函数,那也是重要的一部,当执行完了foo函数,里面的return到底发生了什么的作用?
我简单概括rerun有2个作用是:
1. return; 等于 return false;在这个作用域的后面的任何代码都会停止运行,一定记得加逗号;结束。
2. retrun ... ; 后面跟着一个函数就返回一个函数,后面跟着一个值就会返回什么的值。
所以:上面执行了foo()函数,return 返回了 bar函数
在执行了bar()函数,则输出了2
有了上面的基础,我们来优化第一次的代码:
function foo(){
var a = 10;
return function bar(){
console.log(a);
}
}
foo()(); // 10
以上代码,我的理解是:
当执行foo()函数时候,return 返回 bar函数,
在次执行foo()() => 实际是执行了bar()函数,
所以输出了 2
在 foo() 执行后,通常会期待 foo() 的整个内部作用域都被销毁,因为我们知道引擎有垃 圾回收器用来释放不再使用的内存空间。由于看上去 foo() 的内容不会再被使用,所以很 自然地会考虑对其进行回收。
而闭包的“神奇”之处正是可以阻止这件事情的发生。事实上内部作用域依然存在,因此 没有被回收。谁在使用这个内部作用域?原来是 bar() 本身在使用。
闭包的形式非常多,例如:
1.
function foo() {
var a = 2;
function baz() {
console.log( a ); // 2
}
bar( baz );
}
function bar(fn) {
fn(); // 妈妈快看呀,这就是闭包!
}
把内部函数 baz 传递给 bar,当调用这个内部函数时(现在叫作 fn),它涵盖的 foo() 内部
作用域的闭包就可以观察到了,因为它能够访问 a
传递函数当然也可以是间接的
var fn;
function foo() {
var a = 2;
function baz() {
console.log( a );
}
fn = baz; // 将 baz 分配给全局变量
}
function bar() {
fn(); // 妈妈快看呀,这就是闭包!
}
foo();
bar(); // 2
看了上面的代码,我按照第一章的作用域的读取顺序能搞明白,但这里的原理是什么??
我继续读下去发现一段代码:
function wait(message) {
setTimeout( function timer() {
console.log( message );
}, 1000 );
}
wait( "Hello, closure!" );
书里的解释是:
将一个内部函数(名为 timer)传递给 setTimeout(..)。timer 具有涵盖 wait(..) 作用域
的闭包,因此还保有对变量 message 的引用。
wait(..) 执行 1000 毫秒后,它的内部作用域并不会消失,timer 函数依然保有 wait(..)
作用域的闭包。
深入到引擎的内部原理中,内置的工具函数 setTimeout(..) 持有对一个参数的引用,这个 参数也许叫作 fn 或者 func,或者其他类似的名字。引擎会调用这个函数,在例子中就是 内部的 timer 函数,而词法作用域在这个过程中保持完整。
这就是闭包。
这里代码我看了几次,终于发现之前理解以为这里只是简单的函数调用:
我的理解是:
function wait(message) {
setTimeout( params , 1000 );
}
wait( "Hello, closure!" );
传进去的params返回来的是params,或许也叫fn比较适合
function timer() {
console.log( message );
}
引擎会调用这个函数,就有了所谓的定时器。
书中更是引入了一段jq的源代码:
function setupBot(name, selector) {
$( selector ).click( function activator() {
console.log( "Activating: " + name );
} );
}
setupBot( "Closure Bot 1", "#bot_1" );
setupBot( "Closure Bot 2", "#bot_2" );
原来这里也是个闭包啊!
本质上无论何时何地,如果将函数(访问它们各自的词法作用域)当作第一 级的值类型并到处传递,你就会看到闭包在这些函数中的应用。在定时器、事件监听器、 Ajax 请求、跨窗口通信、Web Workers 或者任何其他的异步(或者同步)任务中,只要使 用了回调函数,实际上就是在使用闭包!
我记得之前老师教过我三个经典的闭包函数:
for (var i=1; i<=5; i++) {
setTimeout( function timer() {
console.log( i ); // 6,6,6,6,6
}, i*1000 );
}
这段代码,根据作用域的关系,输出:5个6
为啥呢?
我们来加一行代码:
for (var i=1; i<=5; i++) {
console.log(i) // 1,2,3,4,5
setTimeout( function timer() {
console.log( i ); // 6,6,6,6,6
}, i*1000 );
}
由以上可知道,
setTimeout( function timer() {
console.log( i ); // 6,6,6,6,6
}, i*1000 );
这段代码已经暴露出外面的作用域了,
我们再来修改一下代码
我想,如果他已经暴露出了外面的作用域,那么的每次来自调用它看下可不可以呢?
for (var i=1; i<=5; i++) {
(function(){
setTimeout( function timer() {
console.log( i ); // 6,6,6,6,6
}, i*1000 );
})();
}
其实这里给多了一个作用域,实质是,和第一次没什么分别
实际是这样:
var i;
for(i = 0;i < 5; i++){
}
(function (){
setTimeout(function(){
console.log(i)
},i * 1000)
})()
i始终是5
那么既然setTimeout还是在for循环这个作用域里,i还是能在的,我想尝试一下一下代码
for (var i=1; i<=5; i++) {
(function(i){
setTimeout( function timer() {
console.log( i );
}, i*1000 );
})(i);
}
我把for循环里的i一个一个的穿进去,这不是通了么
执行一下代码:
1
2
3
4
5
太棒了!可以了。
这里要不得不提一下es6里面的let
for(let i = 0;i < 5; i++){
setTimeout(function(){
console.log(i)
},i * 1000)
}
一样能到达同样的效果,分别输出1,2,3...5
因为let的作用域起了作用
实际是这样:
1.第一种.
for(let i = 0;i < 3; i++){
}
(function (){
setTimeout(function(){
console.log(i)
},i * 1000)
})()
// 输出 ReferenceError: i is not defined
2.第二种.
for(var i = 0;i < 5; i++){
}
(function (){
setTimeout(function(){
console.log(i)
},i * 1000)
})()
// 输出 5
3.第三种.
let i
for(i = 0;i < 5; i++){
}
(function (){
setTimeout(function(){
console.log(i)
},i * 1000)
})()
// 输出 5
这里我的理解是: 块级作用域的问题:
let 在for循环括号里有效
刚才:
for (var i=1; i<=5; i++) {
(function(i){
setTimeout( function timer() {
console.log( i );
}, i*1000 );
})(i);
}
这里把i穿进去,其实是闭包的作用,传进去返回出来
很酷是吧?块作用域和闭包联手便可天下无敌
读《你不知道的JavaScript(上卷)》后感-作用域闭包(二)的更多相关文章
- 你不知道的javaScript上卷(第一章 作用域是什么)
在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...
- 读《你不知道的JavaScript(上卷)》后感-浅谈JavaScript作用域(一)
原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这 ...
- 《你不知道的 JavaScript 上卷》 学习笔记
第一部分: 作用域和闭包 一.作用域 1. 作用域:存储变量并且查找变量的规则 2. 源代码在执行之前(编译)会经历三个步骤: 分词/此法分析:将代码字符串分解成有意义的代码块(词法单元) 解析/语法 ...
- 你不知道的JavaScript上卷笔记
你不知道的JavaScript上卷笔记 前言 You don't know JavaScript是github上一个系列文章 初看到这一标题的时候,感觉怎么老外也搞标题党,用这种冲突性比较强的题目 ...
- 为JavaScript正名--读你不知道的JavaScript(持续更新..)
你不知道的JavaScript上卷 JavaScript和Java的关系就像Carnival和Car的关系一样,八竿子打不着. JavaScript易上手,但由于其本身的特殊性,相比其他语言能真正掌握 ...
- 【你不知道的javaScript 上卷 笔记3】javaScript中的声明提升表现
console.log( a ); var a = 2; 执行输出undefined a = 2; var a; console.log( a ); 执行输出2 说明:javaScript 运行时在编 ...
- JS闭包—你不知道的JavaScript上卷读书笔记(二)
关于闭包,初学者会被绕的晕头转向,在学习的路上也付出了很多精力来理解. 让我们一起来揭开闭包神秘的面纱. 闭包晦涩的定义 看过很多关于闭包的定义,很多讲的云里雾里,晦涩难懂.让不少人以为闭包是多么玄乎 ...
- JavaScript词法作用域—你不知道的JavaScript上卷读书笔记(一)
前段时间在每天往返的地铁上抽空将 <你不知道的JavaScript(上卷)>读了一遍,这本书很多部分写的很是精妙,对于接触前端时间不太久的人来说,就好像是叩开了JavaScript的另一扇 ...
- 你不知道的JavaScript(上)作用域与闭包
第一部分 作用域与闭包 第一章 作用域是什么 1.作用域 变量赋值操作会执行两个动作:首先编译器会在当前作用域中声明一个变量(如果之前没有声明过), 然后会在运行时引擎会在作用域中查找该变量,找到就会 ...
随机推荐
- Magento 2.1.X 插件(Plugin)的创建
Magento 2的插件主要作用:在Magento 1中,为了自定义不同的类和方法,你可以重写一个类. 这是一个非常强大和灵活的定制平台的方式. 这也造成了麻烦,因为两个模块不可以重写同一个类, 重写 ...
- Failed to load the JNI shared library "XXXXXXX"
今天启动Eclipse的时候出现了这个问题,经过查找, 一般来说这种问题都是因为eclipse 和Java 的兼容性不一致所导致的. 1) 查看Eclipse 和Java 版本 那么我们需要分别查看下 ...
- Linux Ubuntu从零开始部署web环境及项目-----搭建ssh环境(一)
linux搭建ssh环境 1,用户登录 成功输入用户名和密码后 进入Ubuntu界面 2,配置网络 参考:http://blog.csdn.net/liu782726344/article/deta ...
- SQLServer总结
基础 nvarchar 和 varchar等的区别 1.nvarchar多了一个N,n表示使用的unicode编码,不用N开头的是用的utf-8编码. 2.所以中文在varchar中占两个字符长度,在 ...
- oracle 行转列 列转行
行转列 这是一个Oracle的列转行函数:LISTAGG() 先看示例代码: with temp as( select 'China' nation ,'Guangzhou' city from du ...
- Hive基础(4)---Hive的内置服务
版权声明:<—— 本文为作者呕心沥血打造,若要转载,请注明出处@http://blog.csdn.net/gamer_gyt <—— 目录(?)[+] 一:Hive的几种内置服务 ...
- 再起航,我的学习笔记之JavaScript设计模式28(委托模式)
## 委托模式 ### 概念介绍 **委托模式(Entrust): **多个对象接收并处理同一请求,他们将请求委托给另一个对象统一处理请求. ### 利用委托优化循环 如果我们有一个需求需要让用户点击 ...
- mysql-5.7.17-winx64解压版本安装图解附带一些常见问题
第一步:下载mysql-5.7.17-winx64解压版本:http://dev.mysql.com/downloads/mysql/ 第二步:解压到安装目录,如:D:\MySql\mysql-5.7 ...
- Postgresql在线备份和恢复
1.实验环境 OS: RedHat Linux Enterprisedb 6.3 DB: postgresql 9.3 PGHOME: /opt/PostgreSQL/9.3 PGDATA: /opt ...
- ch5-Class 与 Style 绑定(v-bind:class v-bind:style)
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式. 因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串. 不过,字符串拼接麻烦又易错.因此,在 v-b ...