资讯专栏INFORMATION COLUMN

JS进击之路:作用域

el09xccxy / 448人阅读

摘要:如果是,编译器会忽略该声明,继续进行编译否则它会要求作用域在当前作用域的集合中声明一个新的变量接下来编译器会为引擎生成运行时所需的代码,这些代码被用来处理这个赋值操作。引擎运行时会首先询问作用域,在当前的作用域集合中是否存在一个叫做的变量。

引言

几乎所有的编程语言都有作用域的概念,那作用域到底指的是什么呢?作用域就是编程语言在定义变量时,变量如何存储、变量如何访问的一套规则,不同的编程语言的规则大同小异,接下来就来看看这套规则是怎么设定的

编译原理

在传统编译语言中,在代码执行之前都会有一个编译过程:

分词/词法分析:将代码语句分解成有意义的代码块,又叫词法单元。

解析/语法分析:将词法单元转换一个逐级嵌套的具有语法规则的树状结构,又叫抽象语法树(AST)

代码生成:解析AST并转化成机器指令

和传统编译语言不太一样,js的编译和执行并不是分开执行,大多数情况都是编译过程结束就会立刻执行,为了在短时间的编译过程内达到较优性能,js引擎较一般编译器更复杂,现在就让来看js的编译过程,简单的以编译var a = 2为例:

遇到var a,编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是,编译器会忽略该声明,继续进行编译;否则它会要求作用域在当前作用域的集合中声明一个新的变量a

接下来编译器会为引擎生成运行时所需的代码,这些代码被用来处理a=2这个赋值操作。引擎运行时会首先询问作用域,在当前的作用域集合中是否存在一个叫做a的变量。如果否,引擎就会使用这个变量;如果引擎最终找到了a,就会将2赋值给它。否则引擎就会抛出一个异常

词法作用域

作用域一般有两种工作模型,第一种是被大多数编程语言所采用的词法作用域,另外一种叫作动态作用域,如Bash脚本采用的就是动态作用域。词法作用域就是定义在词法阶段的作用域,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,由变量定义位置决定,而动态作用域则是由变量使用的位置来决定的。下面来看个例子:

function foo(a) {
  var b = a * 2;
  function bar(c) {
    console.log(a, b, c)
  }
  bar(b * 3)
}
foo(2)

首先来分析一下这里一共存在几个作用域?

全局作用域,里面存在foo变量

foo函数创建的作用域,里面有a,b,bar变量

bar函数创建的作用域,里面有c变量

接下来再来分析一下变量的查找过程,引擎执行console.log()需要查找a、b、c三个变量的引用,首先从最里面的bar()作用域开始找,引擎无法找到a,因此会再往上到foo()作用域中找,在这里找到了a,停止查找,对于b、c来说查找过程一样。作用域查找始终从运行时最内层开始查找,逐级向外查找,直到遇见第一个匹配的变量为止。

函数作用域

函数作用域指的是属于这个函数的全部变量都可以在整个函数的范围内使用及复用,这是大家都知道的定义,但是函数作用域的存在到底有什么用呢?接下来就一起看看函数作用域的秒用。

隐藏内部实现

隐藏内部实现就是将变量和函数包裹在一个函数的作用域中,达到隐藏的目的,为什么要这么做呢?软件设计中有一个非常有名的原则叫最小暴露原则,指最小限度暴露必要内容,而将其他内容都隐藏起来,比如模块或对象的API设计。用函数作用域来包裹变量和函数来达到最小暴露原则,阻止外部直接访问,来看下面的例子:

function doSomething(a) {
  b = a + doSomethingElse( a * 2 );
  console.log( b * 3 );
}
  
function doSomethingElse(a) {
  return a - 1;
}
var b;
doSomething( 2 ); // 15”

在这段代码中doSomethingElse和b应该是doSomething内部私有的,但是却被暴露出来,这样会导致以预期之外的形式被使用,产生意料之外的结果,更合理的设计应该是将这些私有的内容隐藏在doSomething内部,例如:

function doSomething(a) {
  function doSomethingElse(a) {
    return a - 1;
  }
  var b;
  b = a + doSomethingElse( a * 2 );
  console.log( b * 3 );
}
doSomething( 2 );

这样b和doSomethingElse都无法从doSomething外部访问,但是这样也会存在一些问题,首先在全局作用域中声明了doSomething函数,污染了全局作用,其次,必须通过显示调用才能执行,那么有没有什么办法既不会污染作用域也不需要调用就可以自执行呢?答案就是函数表达式,看下面的例子:

(function doSomething(a) {
  function doSomethingElse(a) {
    return a - 1;
  }
  var b;
  b = a + doSomethingElse( a * 2 );
  console.log( b * 3 );
})(2)

首先来看(function doSomething(){})这是一个函数表达式,和函数声明不同的是用括号包起来的,然后再(function doSomething(a){})()调用传值,这样既能自执行也不会污染作用域,社区给这种用法定义了一个术语:IIFE,代表立即执行函数表达式

块作用域

除JavaScript外很多编程语言都支持块作用域,尽管你可能写过很伪块作用域形式的代码,最常见的就是for循环:

for(var i=0; i<10; i++) {
  console.log(i)
}

写这段代码通常是希望变量i在循环内部使用,但是实际上i会被绑定到外部作用域中,要确保没有在作用域的其他地方意外使用i,就只能依靠自觉,这时候块级作用域就显得尤为有用,ES6改变了现状,引入了新的let、const关键字,let关键字可以将变量绑定到所在的任意作用域中,也就是let为其声明的变量隐式地创建了作用域:

for(let i=0; i<10; i++) {
  console.log(i)        
}
console.log(i) // ReferenceError

这时候i就只会在for循环的内部有效

总结

这篇文章主要介绍了JS作用域相关的内容。如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109081.html

相关文章

  • JS进击之路:闭包

    摘要:常见问题说到闭包相关的问题,最典型的就是变量和指向这两类问题。如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞。 引言 闭包这个词对很多前端开发人员来说既熟悉又陌生,熟悉是因为很多人都用过闭包,但是用的时候不知道闭包,陌生是因为并不理解闭包,接下来这篇文章将会从多方面介绍闭包 定义 闭包是怎么定义的呢?当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数在当前词法作...

    tolerious 评论0 收藏0
  • 进击JavaScript之(二)词法作用作用

    摘要:一作用域域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用。概括的说作用域就是一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量。 一、作用域 域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用。想了解更多关于作用域的问题推荐阅读《你不知道的JavaScript上卷》第一章(或第一部分),从编译原理的角度说明什么是作用域。概...

    denson 评论0 收藏0
  • 进击JavaScript之(三)玩转闭包

    摘要:为了更好的理解,在阅读此文之前建议先阅读上一篇进击之词法作用域与作用域链什么是闭包闭包的含义就是闭合,包起来,简单的来说,就是一个具有封闭功能与包裹功能的结构。在中函数构成闭包。 为了更好的理解,在阅读此文之前建议先阅读上一篇《进击JavaScript之词法作用域与作用域链》 1.什么是闭包 闭包的含义就是闭合,包起来,简单的来说,就是一个具有封闭功能与包裹功能的结构。所谓的闭包就是...

    cyixlq 评论0 收藏0
  • 进击JavaScript之(四)原型与原型链

    摘要:每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能,因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象,我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。 本文您将看到以下内容: 传统构造函数的问题 一些相关概念 认识原型 构造、原型、实例三角结构图 对象的原型链 函数的构造函数Function 一句话说明什么...

    XBaron 评论0 收藏0
  • 进击的 JavaScript(三) 之 函数执行过程

    摘要:中没有可执行的函数了,执行完出栈。当某个函数被调用时,会创建一个执行环境及相应的作用域链。检查当前环境中的函数声明使用声明的。确定指向所以说的指向,是在函数执行时确定的。 理解js 的执行过程是很重要的,比如,作用域,作用域链,变量提升,闭包啊,要想明白这些,你就得搞懂函数执行时到底发生了什么! 一、执行环境(Execution Context)又称执行上下文 当代码执行时都会产生一个...

    netmou 评论0 收藏0

发表评论

0条评论

el09xccxy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<