JavaScript作用域链的理解
2024-09-18 02:14:11
前言
作用域是JavaScript一个很重要的概念,想要学好JavaScript就需要理解javascript作用域和作用域链的工作原理。这篇文章对JavaScript作用域链和作用域链做一个简单的介绍,希望能帮助大家更好的理解。
变量作用域
在js中,变量分为全局变量和局部变量。全局变量的作用域是全局的,在任意地方都是被定义的。而局部变量可以是函数的参数、函数内定义以及{}内(ES6语法)定义,如果局部变量与全局变量重名的话,会优先取局部变量。下面我们来看看例子:
引用全局变量例子:
var num = 1; //定义一个全局变量 function func(){ console.log(num); //这里引用了全局变量 } func(); //输出:1
同名变量优先局部变量例子:
var num = 1; //定义一个全局变量 function func(){ var num = 2; //声明局部变量时一定要使用var,否则解释器会将该变量当做全局对象window的属性 console.log(num); //这里引用了局部变量 } func(); //输出:1
函数作用域
变量在声明它们的函数体以及这个函数体内的任意函数体都是定义的,请看例子:
function func(){ var num = 1; console.log(num); //输出:1 function func1(){ console.log(num); //输出:1 } func1(); } func();
作用域链
把函数自身的本地变量放在最前面,把自身的父级函数中的变量放在其次,把再高一级函数中的变量放在更后面,以此类推直至全局对象为止,当函数中需要查询一个变量的值的时候,js解释器会去从作用域链查找,从最前面的本地变量中先找,如果没有找到对应的变量,则到下一级的链上找,一旦找到了变量,则不再继续,如果找到最后也没有找到需要的变量,则解释器返回undefined。请看例子:
例子1:
var num = 1; function func(){ var num = 2; function func1(){ var num = 3; console.log(num); //输出:3 先找函数自身的本地变量 } func1(); } func();
例子2:
var num = 1; function func(){ var num = 2; function func1(){ console.log(num); //输出:2 先找函数自身的本地变量,再找父级函数中的变量 } func1(); } func();
例子3:
var num = 1; function func(){ function func1(){ console.log(num); //输出:1 先找函数自身的本地变量,再找父级函数中的变量,然后再找到全局对象的变量 } func1(); } func();
例子4:
function func(){ function func1(){ console.log(num); //输出:undefined 先找函数自身的本地变量,再找父级函数中的变量,然后再找到全局对象的变量,还是没找到就返回undefined } func1(); } func();
结语
这一篇文章我们讲解了变量作用域、函数作用域、作用域链,希望通过简单的例子帮助大家更好的了解其工作原理。
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作能力!
最新文章
- PostgreSQL
- 妈妈再也不用担心别人问我是否真正用过redis了
- 【jQuery基础学习】05 jQuery与Ajax以及序列化
- HDU 5044 Tree --树链剖分
- linux杂谈(十九):DNSserver的配置(二)
- 下载cppunit
- int.Parse()与int.TryParse()
- bootstarp基本模板
- 随机Prim法创建随机迷宫(C#实现)
- 【FPGA学习】Verilog之加法器
- java 生产者消费者简单实现demo
- Windows Internals 笔记——CreateProcess
- Java入门系列 Lambda表达式
- Unity 3D光源-Spot Light聚光灯用法详解、模拟手电筒、台灯等线性教程
- 鼠标滚轮更改transform的值(vue-scroller在PC端的上下滑动)
- Android -- View流程
- c#传统SqlTransaction事务和TransactionScope事务
- CKEditor &;&; CKFinder 配置
- HDUOJ---汉洛塔IX
- Apache配置伪静态
热门文章
- Python内置函数(18)——enumerate
- java多线程(3)---synchronized、Lock
- 【offer收割机必备】我简历上的Java项目都好low,怎么办?
- PHP中Smarty引擎的常用语法
- dotnet core使用IO合并技巧轻松实现千万级消息推送
- leetcode — binary-tree-level-order-traversal
- [一] java8 函数式编程入门 什么是函数式编程 函数接口概念 流和收集器基本概念
- 如何解决svn清理失败 不能更新 cleanup失败 cleanup乱码 更新乱码 svn更新提示清理 清理乱码不能清理 svn故障修复SVN cleanup 陷入死循环 svn cleanup时遇到错误怎么办
- Spring Boot(十三)RabbitMQ安装与集成
- 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU启动那些事(13)- 从Serial(1-bit SPI) EEPROM/NOR恢复启动