位置: 编程技术 - 正文

理解 JavaScript Scoping & Hoisting(二)(理解的英文)

编辑:rootadmin

推荐整理分享理解 JavaScript Scoping & Hoisting(二)(理解的英文),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:理解的近义词,理解词语的方法有哪些,理解的英文,理解的意思,理解词语的方法有哪些,理解的意思,理解的英文,理解词语的方法有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

Scoping & Hoisting

上面这段代码在运行时会产生什么结果?

尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述:

1.创建了全局变量 a,定义其值为 .创建了函数 foo3.在 foo 的函数体内,if 语句将不会执行,因为 !a 会将变量 a 转变成布尔的假值,也就是 false4.跳过条件分支,alert 变量 a,最终的结果应该是输出 1

嗯,看起来无懈可击的推理啊,但让人惊讶的是:答案竟然是 2!为什么?

别着急,我会解释给你听。首先我要告诉你这不是什么错误,而是 JavaScript 语言解释器的一个(非官方的)特性,某人(Ben Cherry)把这个特性叫做:Hoisting(目前尚未有标准的翻译,比较常见的是提升)。

声明与定义

为了理解 Hoisting,我们先来看一个简单的情况:

var a = 1;

你是否想过,上面这句代码在运行的时候到底发生了什么? 你是否知道,就这句代码而言,“声明变量 a” 和 “定义变量 a”这两个说法哪一个才是正确的?&#;下例叫做 “声明变量”:

var a;

&#;下例叫做 “定义变量”:

var a = 1;

&#;声明:是指你声称某样东西的存在,比如一个变量或一个函数;但你没有说明这样东西到底是什么,仅仅是告诉解释器这样东西存在而已;&#;定义:是指你指明了某样东西的具体实现,比如一个变量的值是多少,一个函数的函数体是什么,确切的表达了这样东西的意义。

总结一下:

var a; // 这是声明a = 1; // 这是定义(赋值)var a = 1; // 合二为一:声明变量的存在并赋值给它

重点来了:当你以为你只做了一件事情的时候(var a = 1),实际上解释器把这件事情分解成了两个步骤,一个是声明(var a),另一个是定义(a = 1)。

这和 Hoisting 有何关系?

回到最开始的那个令人困惑的例子,我告诉你解释器是如何分析你的代码的:

如代码所示,在进入函数体后解释器声明了新的变量 a,而无论 if 语句的条件如何,都将为新的变量 a 赋值为 2。你若不相信可以在函数体外面 alert(a),然后再执行 foo() 对比一下结果就知道了。

理解 JavaScript Scoping & Hoisting(二)(理解的英文)

Scoping(作用域)

有人可能会问了:“为什么不是在 if 语句内声明变量 a?”

因为 JavaScript 没有块级作用域(Block Scoping),只有函数作用域(Function Scoping),所以说不是看见一对花括号 {} 就代表产生了新的作用域,和 C 不一样!

当解析器读到 if 语句的时候,它发现此处有一个变量声明和赋值,于是解析器会将其声明提升至当前作用域的顶部(这是默认行为,并且无法更改),这个行为就叫做 Hoisting。

OK,大家都懂了,你懂了吗……

懂了不代表就会用了,就拿最开始的例子来说,如果我就是想要 alert(a) 出那个 1 可咋整呢?

创建新的作用域

alert(a) 在执行的时候,会去寻找变量 a 的位置,它从当前作用域开始向上(或者说向外)一直查找到顶层作用域为止,若是找不到就报 undefined。

因为在 alert(a) 的同级作用域里,我们再次声明了本地变量 a,所以它报 2;所以我们可以把本地变量 a 的声明向下(或者说向内)移动,这样 alert(a) 就找不到它了。

记住:JavaScript 只有函数作用域!

你或许在无数的 JavaScript 书籍和文章里读到过:“请始终保持作用域内所有变量的声明放置在作用域的顶部”,现在你应该明白为什么有此一说了吧?因为这样可以避免 Hoisting 特性给你带来的困扰(我不是很情愿这么说,因为 Hoisting 本身并没有什么错),也可以很明确的告诉所有阅读代码的人(包括你自己)在当前作用域内有哪些变量可以访问。但是,变量声明的提升并非 Hoisting 的全部。在 JavaScript 中,有四种方式可以让命名进入到作用域中(按优先级):

1.语言定义的命名:比如 this 或者 arguments,它们在所有作用域内都有效且优先级最高,所以在任何地方你都不能把变量命名为 this 之类的,这样是没有意义的2.形式参数:函数定义时声明的形式参数会作为变量被 hoisting 至该函数的作用域内。所以形式参数是本地的,不是外部的或者全局的。当然你可以在执行函数的时候把外部变量传进来,但是传进来之后就是本地的了3.函数声明:函数体内部还可以声明函数,不过它们也都是本地的了4.变量声明:这个优先级其实还是最低的,不过它们也都是最常用的

另外,还记得之前我们讨论过 声明 和 定义 的区别吧?当时我并没有说为什么要理解这个区别,不过现在是时候了,记住:

Hosting 只提升了命名,没有提升定义

这一点和我们接下来要讲到的东西息息相关,请看:

函数声明与函数表达式的差别

先看两个例子:

同学,在了解了 Scoping & Hoisting 之后,你知道怎么解释这一切了吧?

在第一个例子里,函数 foo 是一个声明,既然是声明就会被提升(我特意包裹了一个外层作用域,因为全局作用域需要你的想象,不是那么直观,但是道理是一样的),所以在执行 foo() 之前,作用域就知道函数 foo 的存在了。这叫做函数声明(Function Declaration),函数声明会连通命名和函数体一起被提升至作用域顶部。

然而在第二个例子里,被提升的仅仅是变量名 foo,至于它的定义依然停留在原处。因此在执行 foo() 之前,作用域只知道 foo 的命名,不知道它到底是什么,所以执行会报错(通常会是:undefined is not a function)。这叫做函数表达式(Function Expression),函数表达式只有命名会被提升,定义的函数体则不会。

尾记:Ben Cherry 的原文解释的更加详细,只不过是英文而已。我这篇是借花献佛,主要是更浅显的解释给初学者听,若要看更多的示例,请移步原作,谢谢。

每天一篇javascript学习小结(属性定义方法) 定义(Definition).定义属性需要使用相应的函数,比如:Object.defineProperty(obj,"prop",propDesc)如果obj没有prop这个自身属性,则该函数的作用是给obj添加一个自身属性

跟我学习javascript的作用域与作用域链 作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简

跟我学习javascript的this关键字 本文仅就这一问题展开讨论,阅罢本文,读者若能正确回答JavaScript中的What'sthis问题,作为作者,我就会觉得花费这么多功夫,撰写这样一篇文章是值得

标签: 理解的英文

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

上一篇:js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?(js立即执行函数作用)

下一篇:每天一篇javascript学习小结(属性定义方法)(每天一篇小练笔30字)

  • 个税年度汇算如何补税
  • 车辆购置税税收优惠
  • 管理费用中的办公费占比是多少
  • 企业留存的盈余公积属于哪个会计科目
  • 厂房地面硬化
  • 关联方交易的会计处理方法
  • 原始凭证分类的目的是什么?
  • 建筑行业一般纳税人增值税税率是多少
  • 残保金需要计提分录吗
  • 企业所得税的税率
  • 企业收取的租金会计分录
  • 零食发票能抵税吗
  • 利息股息红利所得个人所得税税率
  • 冲销预付账款后该如何做账务处理呢?
  • 折价购入
  • 企业交的房产税在哪打印税单
  • 财务人员的大忌
  • 企业所得税少交了被税局查到怎么处理
  • 免税和不征税货一样吗
  • 专票税率开错了有什么影响
  • 营改增后固定资产入账
  • 生产成本为什么不属于费用
  • 对方公司破产债务怎么办
  • 员工受伤报销
  • 先亏后盈法案例分析
  • 商业汇票收款到什么账户
  • 除了电脑杀毒软件还有啥
  • 设置系统自动更新一般通过什么窗口
  • win11粘滞键怎么关闭 重启后又有
  • icqlite.exe进程的详细介绍 icqlite进程的查询 作用是什么
  • code ide
  • PHP:mcrypt_get_key_size()的用法_Mcrypt函数
  • 劳务报酬个税计算器2021计算器
  • 固定资产清理科目余额结转哪里
  • 深度学习大模型框架的简单介绍(ChatGPT背后原理的基本介绍)
  • 转出未交增值税最终怎么转平
  • 客户购买商品的条件?
  • 股东股权转让是什么意思
  • 代收款用什么会计科目
  • 新申报是什么
  • pos机到账流水算个人收入吗
  • 异地预缴税款多交了有影响吗
  • 货物运输费含税吗
  • sql server数据查询语句
  • 新准则职工福利费包括哪些
  • 长期股权投资被投资方实现净利润
  • 餐费计入哪个科目合理避税
  • 劳务公司核定征收怎么交税的
  • 购买汽车轮胎的注意事项
  • 买车险要先付钱再上牌吗
  • 净资产越来越少会有什么风险
  • 待抵扣进项税额和进项税额的区别
  • 本期已认证且不抵扣怎么申报
  • 出口退税账务处理
  • 专利年费可以减免吗
  • 投资的公司注销了怎么做账
  • xp系统怎么强制结束进程
  • ubuntu安装指南
  • xp系统怎么关闭fn
  • win7系统的图片
  • linux 安装jmap
  • linux里vim常用命令
  • 密钥升级win10专业版有问题吗
  • Cocos2dx------从json文件读取数据
  • cocos内存管理
  • 将list转换为json字符串
  • jqueryui
  • 阿里面试题和答案
  • linux怎么使用c语言
  • unity自动寻路
  • 用js获取地址栏url参数的方法
  • Python的flask框架教程
  • javascript+
  • 类似愤怒小鸟的小游戏
  • python安装第三方模块
  • python smtplib模块详解
  • js点击按钮实现登陆网页
  • 浙江省增值税勾选平台
  • 新疆税务app操作手册
  • 收到12366的短信
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设