美文网首页你不知道的JavaScriptWeb前端之路@IT·互联网
《你不知道的javascript(上)》作用域与闭包(二)

《你不知道的javascript(上)》作用域与闭包(二)

作者: 夜来小星 | 来源:发表于2017-04-29 21:15 被阅读37次

在翻阅《你不知道的javascript》这一套书的中上卷目录之后,发现书中针对闭包、对象、原型、语法、异步、回调等等既基础又重要的
javascript知识有着针对性的阐述,于是决定对这套书的中上卷进行学习。上卷和中卷各讲述了两大部分知识,分别是:作用域与闭包、
this和对象原型、类型和语法、异步和性能。本文是对作用域与闭包的学习总结。

对于作用域及其相关知识的理解,我认为主要把握这样一些东西:js所使用作用域的类型,IIFE以及作用域中的提升。

1.作用域类型

  作用域分为词法作用域和动态作用域,js使用的是词法作用域。所谓词法作用域,指的是在编译词法分析阶段根据词法单元确定下来的作用域,并且在引擎执行代码阶段作用域是不变的(大部分情况下),注意括号里的大部分情况,因为在通常对语法的学习中,只要注意一些不符合常规情况的状态,对语法的把握会顺利许多。

  一小部分会在执行代码期间改变作用域的情况(书中称之为“欺骗”)是两种:在js中使用了eval()和with()方法(在非严格模式下):

  • eval()可以接受一个字符串作为参数,并且在执行代码期间,将参数中可能传递的值看作本来就存在于eval()所在位置的代码;
  • with()主要作用是可以接受一个对象,并快捷引用其中的属性。然而,with()在处理这个对象的时候,不仅会形成一个新的作用域,
    还可能改变原本存在的词法作用域(这个方法比较复杂)。

对eval()举个例子:

function foo(str,a) {
  eval(str);
  console.log(a,b);
}
var b = 2;
foo("var b = 3",1);//1,3

在执行foo("var b = 3",1)语句时,在正常情况下,函数foo(str,a)执行到console.log(a,b)时,查找b会找到全局变量中的b并得到2,但实际却得到3,这是因为eval()将“var b = 3”看作在函数foo(str,a)中的代码,相当于在函数中声明了一个b作为局部变量,于是下一句console.log(a,b)执行的时候先找到局部变量得到值3,就结束了查找,而全局变量b被屏蔽了。

  在严格模式下,eval()有自己的作用域,不会在其所处函数中产生屏蔽效应,而with()是被禁用的。并且,在第一章中讲到,引擎在优化性能的时候,是根据已经确定的作用域和词法单元来进行优化的,在使用了eval()和with()后,使得函数作用域可能在动态情况下(执行代码期间)发生变化,而引擎在遇到这个两个方法后就不会进行性能优化。所以,在js中使用这两个方法会导致性能下降。

对于词法作用域,其中又分成了块作用域和函数作用域,js绝大部分情况下使用的是函数作用域,但存在个别块作用域的时候,使用with()和try~catch语句的时候会形成块作用域(又是with(),在这里,《高程》第三版第4章中也讲到了with()会形成作用域,但《高程》中提到这种情况使得作用域链变长了,而with()形成的依然是函数作用域),并且ES6出来之后,也正式承认了块作用域的存在和使用,在{}中使用let和const声明就能创造块作用域了,这为使用循环语句等提供了很大的便利。

2.IIFE

  IIFE是立即执行函数表达式。首先应该理解什么是函数表达式,非常简单,以function单词作为开头的是函数声明,而带有function但并非以其开头的语句就是函数表达式,最典型的情况就是(function(){})。函数声明和函数表达式相同的地方在于形成了函数作用域,而不同的地方函数声明会被提升,而表达式不会(显然不会,因为声明才是编译器工作的对象)。

  函数表达式的一个主要作用是可以使函数匿名,这样就避免了函数作用域中多出一个标识符。但是并非所有情况下匿名都是最优的,例如:当函数不只需要被调用一次的时候,就不能匿名了。

  而函数表达式另一个主要的作用就是作为IIFE的出现,既(function(){})()或(function(){}())的形式,可以立即执行函数,而无需调用或加载。而IIFE多出来的括号并不是只使得函数会立即执行,在括号中还可以传递需要的参数。例如,以(function(a,b){})(c,d)的形式既能将参数传递进函数了,而简单的函数表达式(function(){})却没有这样的功能。

  此外,IIFE还是闭包机制的一个最佳实践(虽然不是最能体现闭包机制的方式),在第三部分的闭包中会讲到。

3.作用域中的提升

  其实作用域中的提升非常简单,只要能够理解js的编译原理:在编译器工作阶段,会进行声明,以及对其他语句形成引擎执行的代码,因此,在编写的代码中,不管一个作用域中的声明处于哪里,肯定都比赋值等其他句语先完成,而js语句的执行是按照从上到下执行的,这就好比将声明从下统一提升到了函数中最上面的地方,这就称为声明。

  对提升需要把握的要点有以下三处:

  • 函数表达式不会提升;
  • let和const声明不会提升;
  • 函数声明会提升到变量声明的上方,而在同一个作用域中声明了同名函数时,后一个同名函数在提升时会覆盖前一个函数的声明。

Small Star's Blog|小星的博客

相关文章

  • 2018-01-07 关于javascript闭包和作用域的理解

    关于 javascript 闭包的一些思考 作用域 词法作用域 函数作用域 块作用域 闭包 什么是作用域? 作用域...

  • 作用域、作用域链、闭包、面向对象、执行上下文

    作用域 作用域链 函数的提前声明 闭包 JavaScript 闭包与类(原型链)之间的开发方式 构造函数和普通函数...

  • JavaScript函数之闭包

    什么是闭包 闭包是JavaScript的难点,闭包产生的原因也是因为函数作用域的特性,函数作用域的内容可以回顾上一...

  • 2018-07-11

    深入理解闭包: 一、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非...

  • 学习JavaScript闭包和作用域笔记

    JS JavaScript闭包和作用域 闭包 JavaScript高级程序设计中对闭包的定义:闭包是指有权访问另外...

  • 技术栈

    一、HTML、CSS基础、JavaScript语法基础。 二、JavaScript语法进阶。包括:作用域和闭包、t...

  • 2020前端技术栈

    一、HTML、CSS基础、JavaScript语法基础。二、JavaScript语法进阶。包括:作用域和闭包、th...

  • js闭包问题

    javascript 闭包的概念,闭包的作用,闭包经典面试题详解(配图解) 函数作用域(闭包前置知识) 要彻底弄懂...

  • 作用域 | 闭包 | 模块 | 词法作用域 |

    以下内容为《你不知道的JavaScript上卷》第一部分第五章-作用域闭包及附录的阅读笔记 一.作用域闭包 1.是...

  • 作用域闭包

    概览 背景知识:JavaScript内存管理、JavaScript作用域。 内容 1 闭包定义 闭包:当函数可以记...

网友评论

    本文标题:《你不知道的javascript(上)》作用域与闭包(二)

    本文链接:https://www.haomeiwen.com/subject/unhttxtx.html