位置: 编程技术 - 正文

JS 作用域与作用域链详解(js作用域和作用域链的理解阮一峰)

编辑:rootadmin

推荐整理分享JS 作用域与作用域链详解(js作用域和作用域链的理解阮一峰),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js作用域和作用域链的理解阮一峰,js有哪些作用域,分别是什么意思,js什么是作用域链,js什么是作用域链,js作用域与作用域链,js作用域的理解,js 作用域与作用域的关系,js作用域与作用域链,内容如对您有帮助,希望把文章链接给更多的朋友!

(1)作用域

一个变量的作用域(scope)是程序源代码中定义的这个变量的区域。

1. 在JS中使用的是词法作用域(lexical scope)

不在任何函数内声明的变量(函数内省略var的也算全局)称作全局变量(global scope)

在函数内声明的变量具有函数作用域(function scope),属于局部变量

局部变量优先级高于全局变量

函数内省略var的,会影响全局变量,因为它实际上已经被重写成了全局变量

函数作用域,就是说函数是一个作用域的基本单位,js不像c/c++那样具有块级作用域 比如 if for 等

当然了,js里边还使用到了高阶函数,其实可以理解成嵌套函数

test1()之后将调用外层函数,返回了一个内层函数,再继续(),就相应调用执行了内层函数,所以就输出 ”one"

嵌套函数涉及到了闭包,后面再谈..这里内层函数可以访问到外层函数中声明的变量name,这就涉及到了作用域链机制

2. JS中的声明提前

js中的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的。并且,变量在声明之前就可以使用了,这种情况就叫做声明提前(hoisting)

tip:声明提前是在js引擎预编译时就进行了,在代码被执行之前已经有声明提前的现象产生了

比如

上边就达到了下面的效果

再试试把var去掉?这是函数内的name已经变成了全局变量,所以不再是undefined

3. 值得注意的是,上面提到的都没有传参数,如果test有参数,又如何呢?

之前说过,基本类型是按值传递的,所以传进test里面的name实际上只是一个副本,函数返回之后这个副本就被清除了。千万不要以为函数里边的name="two"把全局name修改了,因为它们是两个独立的name

(2)作用域链

上面提到的高级函数就涉及到了作用域链

1. 引入一大段话来解释:每一段js代码(全局代码或函数)都有一个与之关联的作用域链(scope chain)。

这个作用域链是一个对象列表或者链表,这组对象定义了这段代码中“作用域中”的变量。

当js需要查找变量x的值的时候(这个过程称为变量解析(variable resolution)),它会从链的第一个对象开始查找,如果这个对象有一个名为x的属性,则会直接使用这个属性的值,如果第一个对象中没有名为x的属性,js会继续查找链上的下一个对象。如果第二个对象依然没有名为x的属性,则会继续查找下一个,以此类推。如果作用域链上没有任何一个对象含有属性x,那么就认为这段代码的作用域链上不存在x,并最终抛出一个引用错误(ReferenceError)异常。

2. 作用域链举例:

在js最顶层代码中(也就是不包括任何函数定义内的代码),作用域链由一个全局对象组成。

在不包含嵌套的函数体内,作用域链上有两个对象,第一个是定义函数参数和局部变量的对象,第二个是全局对象。

在一个嵌套的函数体内,作用域上至少有三个对象。

JS 作用域与作用域链详解(js作用域和作用域链的理解阮一峰)

3. 作用域链创建规则:

当定义一个函数时(注意,是定义的时候就开始了),它实际上保存一个作用域链。

当调用这个函数时,它创建一个新的对象来储存它的参数或局部变量,并将这个对象添加保存至那个作用域链上,同时创建一个新的更长的表示函数调用作用域的“链”。

对于嵌套函数来说,情况又有所变化:每次调用外部函数的时候,内部函数又会重新定义一遍。因为每次调用外部函数的时候,作用域链都是不同的。内部函数在每次定义的时候都要微妙的差别---在每次调用外部函数时,内部函数的代码都是相同的,而且关联这段代码的作用域链也不相同。

(tip: 把上面三点理解好,记住了,最好还要能用自己的话说出来,不然就背下来,因为面试官就直接问你:请描述一下作用域链...)

举个作用域链的实用例子:

上边是个嵌套函数,相应的应该是作用域链上有三个对象那么在调用的时候,需要查找name的值,就在作用域链上查找

当成功调用test1()的时候,顺序为 test1()->test()->全局对象window 因为在test1()上就找到了name的值three,所以完成搜索返回

当成功调用test1()的时候,顺序为 test2()->test()->全局对象window 因为在test2()上没找到name的值,所以找test()中的,找到了name的值two,就完成搜索返回

还有一个例子有时候我们会犯错的,面试的时候也经常被骗到。

为什么?根据作用域链中变量的寻找规则:

这里有一个函数,它是匿名函数,既然是函数,那就在作用域链上具有一个对象,这个函数里边使用到了变量i,它自然会在作用域上寻找它。查找顺序是 这个匿名函数 -->外部的函数buttonInit() -->全局对象window

匿名函数中找不到i,自然跑到了buttonInit(), ok,在for中找到了,

这时注册事件已经结束了,不要以为它会一个一个把i放下来,因为函数作用域之内的变量对作用域内是一直可见的,就是说会保持到最后的状态

当匿名函数要使用i的时候,注册事件完了,i已经变成了4,所以都是Button4

那怎么解决呢?

给它传值进去吧,每次循环时,再使用一个匿名函数,把for里边的i传进去,匿名函数的规则如代码

这样就可以 Button1..2..3了

4.上述就是作用域链的基本描述,另外,with语句可用于临时拓展作用域链(不推荐使用with)

语法形如:

with(object)

statement

这个with语句,将object添加到作用域链的头部,然后执行statement,最后把作用域链恢复到原始状态

简单用法:

比如给表单中各个项的值value赋值

一般可以我们直接这样

引入with后(因为使用with会产生一系列问题,所以还是使用上面那张形式吧)

另外,假如 一个对象o具有x属性,o.x = 1;那么使用

就可以转换成 o.x = 2;假如o没有定义属性x,它的功能就只是相当于 x = 2; 一个全局变量罢了。

因为with提供了一种读取o的属性的快捷方式,但他并不能创建o本身没有的属性。

以上所述就是本文的全部内容了,希望能够对大家学习javascript有所帮助。

JavaScript之数组(Array)详解 ECMAScript的数组与其他语言中的数组有着相当大的区别。虽然ECMAScript中的数组也是有序列表,但是它数组你的每一项可以保存任何类型的数据。ECMAScript

JavaScript数据类型详解 数据类型JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number和String。还有1种复杂数据类型——Object,Object本质上是由一

JavaScript数据类型之基本类型和引用类型的值 ECMAScript变量包含两种不同数据类型的值:基本类型值和引用类型值。基本类型值是简单的数据段,而引用类型值指那些可能由多个值构成的对象。在将

标签: js作用域和作用域链的理解阮一峰

本文链接地址:https://www.jiuchutong.com/biancheng/382845.html 转载请保留说明!

上一篇:实现前后端数据交互方法汇总(前后端调用)

下一篇:JavaScript之数组(Array)详解(javascript数组有哪些方法)

  • 工资表个税多扣了账务处理递减
  • 出口货物退(免)税管理办法
  • 小规模纳税人每季度超过30万交税
  • 增值税纳税申报表模板
  • 财务担保费计入什么科目
  • 现金流量表和利润表关系
  • 金融机构利息收入缴纳增值税
  • 小规模纳税人月收入超过10万,要交多少税
  • 银行承兑汇票收费
  • 办公用品增值税专用发票税点
  • 增值税专票的收款人必须是个人嘛
  • 关于7.1号增值税普通发票新规
  • 利息保障倍数计算公式资本化利息
  • 金蝶怎样取消结账
  • 抄报税失败是怎么回事
  • 发票开出多久可以作废
  • 简易计税增值税计入什么科目
  • 或有负债如何计量
  • 农产品免税产品可以开增值税专用发票吗
  • 如何关闭win10专业版自动更新
  • 交个税手续费账务处理
  • 递归 php
  • 个人签订借款合同
  • 如何通过无线路由器连接打印机
  • 创业投资企业可以签订代持股协议吗合法吗
  • 设备拆修痕迹影响大吗
  • 微信开发获取位置
  • 明细分类账户定义
  • 老生常谈php中传统验证与thinkphp框架(必看篇)
  • 记录一次排查PHP脚本执行卡住的问题
  • frameworks
  • vue获取当前行
  • 怎样才能帮你
  • jsp页面构成
  • 可转换优先股会稀释股权吗
  • 外币应收账款汇兑损失计入
  • 火车及机票退票扣多少钱
  • 房地产销售折扣
  • python id 函数
  • 收保险公司工伤怎么赔偿
  • 弥补亏损的会计分录是怎样的
  • 出租房产怎么交房产税
  • 保理公司会计核算讲解
  • sqlserver修改数据库密码
  • 未开票收入确认错属期滞纳金怎么办
  • 企业所得税年报申报时间
  • 城建税多交了怎么办
  • 收到托收凭证怎么做分录
  • 企业正常经营的条件
  • 固定资产小汽车折旧怎么计提
  • 销售单位收入和税收
  • 投资收益 增加
  • 利润分配的借方表示增加还是减少
  • 公司的三证合一是什么
  • 新公司现金日记账怎么记账的
  • 非营利医疗机构免征哪几种税
  • node使用mysql
  • mysql免安装版本
  • win8开始菜单怎么设置
  • 蓝屏service
  • dmidecode命令
  • java开发经常出差合理吗
  • win8删除所有文件
  • 查找注册表命令
  • win7系统如何配置ip地址
  • win10预览版与正式版
  • winxp如何进入bios
  • netsurf.exe - netsurf是什么进程 有什么用
  • win7 windows安全中心
  • linux入门很简单
  • 也论主板的扩展性
  • unity中sendmessage
  • javascript开关
  • jquery动态设置css
  • 打印个人住房信息查询记录需要什么资料
  • 南京江宁区地税局待遇(南京各个区税务局待遇)
  • 税控盘解除风险
  • 国家税务系统
  • 上海浦东税务网站官网
  • 增值税专用发票和普通发票的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设