你不知道的JS系列 ( 5 ) - 词法作用域

作用域分为两种,一种是词法作用域,一种是动态作用域,我们先看第一种,词法作用域

词法作用域就是定义在词法阶段的作用域(编译器的第一个工作阶段叫做词法化,词法化的过程会对源代码中的字符进行检查)。换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的。因此词法分析器处理代码时会保持作用域不变

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

1、包含着整个全局作用域,其中只有一个标识符:foo

2、包含着 foo 所创建的作用域,其中有三个标识符:a、bar 和 b

3、包含着 bar 所创建的作用域,其中只有一个标识符:c

作用域气泡由其对应的作用域块代码写在哪里决定,它们是逐级包含的。每一个函数都会创建一个新的作用域气泡

在上一段代码中,引擎执行 console.log(a,b,c) 时,首先从最内部的作用域,也就是 bar 开始查找,引擎无法在这里找到 a,因此去上一级到嵌套的 foo 继续查找,在这里找到了。b 同理。 而对 c 来说,引擎在 bar 中就找到了。

如果 a 存在于 bar 中,console.log 就可以直接是用 bar 中的变量,而无需到 foo 中查找。

作用域查找会在找到到第一个匹配到标识符停止

无论函数在哪里被调用,也无论它如何被调用,它的词法作用域都只由函数被声明时所处到位置决定。

词法作用域查找都只会查找一级标识符

原文地址:https://www.cnblogs.com/wzndkj/p/12310597.html

时间: 2024-08-06 12:59:58

你不知道的JS系列 ( 5 ) - 词法作用域的相关文章

你不知道的JS系列 ( 7 ) - 欺骗词法作用域

如果词法作用域完全由写代码期间函数所声明的位置来定义,怎样才能在运行时来“修改”词法作用域呢?有些人喜欢特殊的办法来解决遇到的问题.我们规定词法作用域是代码写在哪里决定的,一旦决定了无法更改,因为一些问题,我们不得不更改作用域,尽管这是不被推荐的,那是什么办法,JavaScript 中有两种机制来实现这个目的 eval function foo(str, a) { eval(str); console.log(a, b) } var b = 2; foo("var b = 3", 1)

js 中采用词法作用域

所谓的 词法( 代码 )作用域, 就是代码在编写过程中体现出来的作用范围. 代码一旦写好, 不用执行, 作用范围就已经确定好了. 这个就是所谓词法作用域. 在 js 中词法作用域规则: 1.函数允许访问函数外的数据. 2.整个代码结构中只有函数可以限定作用域. 3.作用规则首先使用提升规则分析. 4.如果当前作用规则中有名字了, 就不考虑外面的名字. 在编译语言中,**通常** 代码在被引擎执行之前会经历三个步骤: 1. 词法分析(tokenzing/lexing)2. 解析/语法分析(pars

js 词法分析,词法作用域

先来看个常见的面试题如下: var a = 10; function test(){ alert(a); //undefined var a = 20; alert(a); //20 } test(); 疑问:为什么呢?test()执行时,虽然a=20没有赋值,但是父级作用域里是有a=10的,不应该是undefined呀,js是按顺序执行的,此时的var num = 20;根本没有执行,所以应该是10!!你是不是也是这么认为的,就和我当初一样??? 分析:众所周知,js代码是自上而下执行的,Ja

你不知道的JS系列 ( 12 ) - 声明提升

我们直觉上会认为 JavaScript 代码在执行时是由上到下一行一行执行的.但实际这并不完全正确 a = 2; var a; console.log(a); 这里可能会认为是 undefined,因为 var a 声明在 a = 2 之后.实际输出了 2. console.log(a); var a = 2; 鉴于上面的代码可能会是 2,还有人认为可能会报异常 ReferenceError,不幸这两种猜测都不对,输出来的是 undefined 要搞明白这个,要明白编译的原理,在编译阶段中的一部

你不知道的JS系列 ( 13 ) - 什么是闭包

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行 function foo(){ var a = 2; function bar() { console.log(a); } return bar } var baz = foo(); baz(); // 2 —— 朋友,这就是闭包的效果 在 foo() 执行后,通常会期待 foo() 的整个内部作用域都被销毁,因为我们知道引擎有垃圾回收用来释放不再使用的内存空间. 而闭包的“神奇”之处正是可以阻止这件事情的

你不知道的JS系列(2)- 引擎怎么查找变量

对代码进行处理的三个角色 引擎:从头到尾负责整个 JavaScript 程序的编译和执行过程 编译器:负责语法分析及代码生成等 作用域:负责收集并维护所有变量的查询 var a = 2; 编译器首先会将这段程序分解成词法单元,然后将词法单元流解析成一个树结构.然后将树结构转换成可执行代码,也就是计算机懂的指令.为一个变量分配内存,将其命名为 a,然后将值 2 保存进这个变量.这符合编译原理 然而并不完全正确 事实上编译器会进行如下处理 1.在词法分析中,遇到 var a,编译器会询问当前作用域是

你不知道的JS系列 ( 19 ) - this 调用位置

我们排除了一些对于 this 对错误理解并且明白了每个函数的 this 是在调用时被绑定的,完全取决于函数的调用位置.寻找调用位置就是寻找“函数被调用的位置”,但是做起来并没有这么简单,因为某些编程模式可能会隐藏真正的调用位置 最重要的是要分析调用栈,就是为了到达当前执行位置所调用的所有函数 function baz(){ // 调用位置是全局作用域,调用栈 baz console.log('baz'); bar(); // bar 的调用位置 } function bar(){ // 调用位置

你不知道的JS系列 ( 33 ) - 对象复制

JS 初学者最常见的问题之一就是如何复制一个对象.看起来应该有一个内置的 copy() 方法,实际上比想象中的更复杂,我们无法选择一个默认的复制算法 function anotherFunction(){/** ... */}; var anotherObject = { c: true }; var anotherArray = []; var myObject = { a: 2, b: anotherObject, // 引用,不是复本! c: anotherArray, // 另一个引用

你不知道的JS系列 ( 22 ) - this new 绑定

在传统的面向类的语言中,“构造函数“是类中的一些特殊方法,使用 new 初始化类时会调用类中的构造函数.通常的形式是这样的 something = new MyClass(..); 然而 JavaScript 中 new 的机制实际上和面向类的语言不同.它们只是被 new 操作符调用的普通函数而已.实际上并不存在所谓的“构造函数”,只有对于函数的“构造调用” function foo(a) { this.a = a; } var bar = new foo(2); console.log(bar