博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript变量提升
阅读量:6839 次
发布时间:2019-06-26

本文共 1535 字,大约阅读时间需要 5 分钟。

hot3.png

接着上一篇讲<>

Javascript是一门容易遭人误解的语言,但是它的强大毋庸置疑。个人觉得,要想深入理解Javascript语言,首先必须对其基本的概念(例如:Scope,Closure,Hoisting等)要真正理解。今天想通过自己的理解来对Javascript Hoisting(国内一般翻译为 变量提升)做一个阐述:

在解释Javascript Hoisting之前,先看一下几段代码:

//代码段1--------------------------    var myvar = '变量值';     console.log(myvar); // 变量值    //代码段2--------------------------    var myvar = '变量值';      (function() {       console.log(myvar); //变量值    })();    //代码段3----------------------------    var myvar = '变量值';     (function() {       console.log(myvar); // undefined       var myvar = '内部变量值';     })();

代码段1会在控制台打印出 变量值 ,很容易理解;代码段2也会在控制台打印出 变量值 ,Javascript编译器首先在匿名函数内部作用域(Scope)查看变量myvar是否声明,发现没有,就继续向上一级的作用域(Scope)查看是否声明 myvar,发现存在,即打印出该作用域的myvar值。但代码段3只是对代码段2做一个微调,结果却输出了undefine!!!

在理解代码段3之前,必须先理解Javascript Hoisting的概念。Javascript Hoisting:In javascript, every variable declaration is hoisted to the top of its declaration context.我的理解就是在Javascript语言中,变量的声明(注意不包含变量初始化)会被提升(置顶)到声明所在的上下文,也就是说,在变量的作用域内,不管变量在何处声明,都会被提升到作用域的顶部,但是变量初始化的顺序不变。

下图的左边和右边的代码输出结构是一样的,左边的代码段在JS执行时,实际的执行顺序如右边的代码所示(JS编译器会将变量声明进行提升处理)。

31160454_uKA4.png

理解了提升的概念之后,再回到开头的代码段3的理解中来,代码段3和在被Hositing之后的代码如下图所示:

31160455_lxcN.png

二者输出的结构都为undefined!可理解为内部变量myvar在匿名函数的内最后一行进行变量声明并赋值,但是JS解释器会将变量声明(不包含赋值)提升(Hositing)到匿名函数的第一行(顶部),由于只是声明myvar变量,在执行console.log(myvar)语句时,并未对myvar进行赋值,所以JS输出undefined。

  如果变量声明未提升(Hositing)置顶,则应该会报错误。如下图所示:

31160455_aN1n.png

下面给个测试题,来看看你对Hositing的概念是否理解

//测试代码----------------------var myvar = '变量值';   (function() {    console.log(myvar); // ?   myvar = '内部变量值'; })();

  该代码段应该输出什么值呢?

31160455_hg7d.png

 

转载于:https://my.oschina.net/u/3703858/blog/1787937

你可能感兴趣的文章
springmvc 将post转换为delete,put
查看>>
第二届清华大学项目管理精英训练营【敏捷个人】分享
查看>>
Centos 安装 Solr
查看>>
Android Toast自己定义Toast例子
查看>>
bash shell实现二进制与十进制数的互转
查看>>
精准测试
查看>>
Oracle11G_逻辑备份
查看>>
Linux正变得无处不在;应用大盘点
查看>>
IEEE期刊
查看>>
pssh使用
查看>>
索引优化系列十四--啥时分区索引性能反而低
查看>>
hive的变量传递设置
查看>>
apache-shiro杂记(三) 用了apache-shiro后,HttpSession.getServletContext() API无法正常工作了...
查看>>
eclipse 中的 maven run configurations
查看>>
spring 项目中的一个异常
查看>>
CentOS PPTP ×××
查看>>
电子工程师必须知道的10个网站 !!!
查看>>
我的友情链接
查看>>
防Xss攻击,包含富文本编辑器的处理
查看>>
MyBatis延迟加载
查看>>