JavaScript之作用域链的示例详解
复习作用域
上一节我们说到作用域:是指变量可以访问的范围,他规定了如何查找变量,以及确定当前执行代码对变量的访问权限;也说到静态作用域即词法作用域,是在编译阶段决定变量的引用(由程序定义的位置决定,和代码执行顺序无关,用嵌套的方式解析)。
凝问
var x=10; function run(){ var name='Joel'; console.log(x+name);//10Joel 这里做了隐适转换 当有+时有一个为string 那么会当做字符拼接来处理 } run();
如上代码,在执行run函数时,在run作用域中有name变量,但是并没有变量x,那么为什么不会报错,变量x又是怎么访问的呢?可能有些人理解是去父级函数作用域中寻找变量,其实这样理解作用域存在歧义(如果理解为是在调用函数的父级函数,那么肯定是错的 如下代码),上一节我们说过javascript的作用域是静态作用域,即应该关心代码定义的位置而不是调用的位置 (词法作用域);
var x=10; function fn(){ console.log(x); } function show(f){ var x=20; (function(){ f() }()); } show(fn);//10 并不是20
引出作用域链
通过分析作用域的变量解析来理解作用域链
var a=10; function run(){ var name='Joel'; function say(){ var content='hello'; console.log(content+name+','+a); } say(); } run();//helloJoel,10
通过上一篇我们知道js作用域有全局作用域,函数作用域,所以上面代码作用域如下:
全局作用域:存在变量a、run函数引用,当然还存在其他函数、属性(内置的就不讨论了);
run函数作用域:存在变量 name 、say函数引用;
say函数作用域:存在变量content;
当代码执行到 console.log(content name ',' a); 首先在say函数作用域中寻找变量content、name、a,如果找到则停止,没有找到就到上一个作用域中寻找,以此类推一直到window 全局作用域,如变量a 在当前say 作用域中没有,就到run作用域中寻找,还没找到就到全局作用域中寻找,如果还找不到就报错 is not defined,因为全局作用域是最外层作用域 ;
继续看下面代码,我们在say函数中定义了变量name 之后,name值不在是run作用域中的值,因为在say作用域中找到了变量name 就不会继续寻找了
<script> var a=10; function run(){ var name='Joel'; function say(){ var content='hello',name=' Word'; console.log(content+name+','+a); } say(); } run();//hello Word,10 </script>
这样一步一步的寻找变量的过程我们叫做标识符解析或者你可以理解为变量解析,那么提供这个线路或者这样寻找变量的机制我们叫做作用域链;
我们来总结一下这个过程:
第一步,在当前作用域查找变量,如果有则获取并停止。如果没有则继续向上一个作用域寻找;
第二步,如果当前作用域是全局作用域,则说明变量未定义,结束;否则继续;
第三步,(不是全局作用域,那就是函数作用域)继续第一步;
那么作用域链到底是什么呢?
其实作用域链本质是一个指向变量对象的指针链表,它只引用但不实际包含变量对象的值;
如上代码作用域链结构类似这样:
这篇只是引出作用域链,下一篇正式开始说执行环境,会涉及到变量对象、活动对象、作用域链等内容从而深入作用域链的创建过程。
之所以要先写执行环境,是因为完整的作用域链是在执行环境中构建的。
以上是JavaScript之作用域链的示例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

typedef struct 在 C 语言中用于创建结构体类型别名,简化结构体使用。它通过指定结构体别名将一个新的数据类型作为现有结构体的别名。优点包括增强可读性、代码重用和类型检查。注意:在使用别名前必须定义结构体,别名在程序中必须唯一并且仅在其声明的作用域内有效。

Java 中的变量期望值异常可以通过以下方法解决:初始化变量;使用默认值;使用 null 值;使用检查和赋值;了解局部变量的作用域。

JavaScript 闭包的优点包括保持变量作用域、实现模块化代码、延迟执行和事件处理;缺点包括内存泄漏、增加了复杂性、性能开销和作用域链影响。

C++ 中的 #include 预处理器指令将外部源文件的内容插入到当前源文件中,以复制其内容到当前源文件的相应位置。主要用于包含头文件,这些头文件包含代码中需要的声明,例如 #include <iostream> 是包含标准输入/输出函数。

C++智能指针的生命周期:创建:分配内存时创建智能指针。所有权转移:通过移动操作转移所有权。释放:智能指针离开作用域或被明确释放时释放内存。对象销毁:所指向对象被销毁时,智能指针成为无效指针。

可以。C++ 允许函数嵌套定义和调用。外部函数可定义内置函数,内部函数可在作用域内直接调用。嵌套函数增强了封装性、可复用性和作用域控制。但内部函数无法直接访问外部函数的局部变量,且返回值类型需与外部函数声明一致,内部函数不能自递归。

在 Vue 中,let 和 var 声明变量时在作用域上存在差异:作用域:var 具有全局作用域,let 具有块级作用域。块级作用域:var 不创建块级作用域,let 创建块级作用域。重新声明:var 允许在同一作用域内重新声明变量,let 不允许。

JavaScript 中,this 的指向类型有:1. 全局对象;2. 函数调用;3. 构造函数调用;4. 事件处理程序;5. 箭头函数(继承外层 this)。此外,可以使用 bind()、call() 和 apply() 方法显式设置 this 的指向。
