关于JS中变量提升的规则和原理的一点理解
关于变量提升,以前在一些教程和书籍上都听到过,平时开发中也知道有这个规律,但是今天突然在一个公开课中听到时,第一反应时一脸懵逼,然后一百度,瞬间觉得好熟悉啊,差点被这个概念给唬住了,不信我给你看个栗子,你也会恍然大悟的:
(function(){
console.log(v);
var v = 'I love you';
console.log(v);
})()
// undefined I love you
这就是一个典型的变量提升的例子了,规则是怎样的呢,我的理解是在一个作用域内,无论你在哪个地方声明的变量都会被提升到顶部,但不会赋值。像本例子中的v就是先被提升到了函数作用域的顶端,所以实际运行过程是这样的:
(function(){
var v = undefined;
console.log(v);
v = 'I love you';
console.log(v);
})()
// undefined I love you
为什么会这样呢,我参考了别人的解释是因为js的运行机制:
js自上而下的执行过程分为两个词法分析和执行两个阶段:词法分析主要包括:分析形参、分析变量声明、分析函数声明三个部分.通过词法分析将我们写的js代码转成可以执行的代码,接下来才是执行。
变量提升还有一种情况,就是函数,词法分析的时候关于函数声明的处理与变量声明的处理不太一致,会一步到位的给当前函数活动对象增加对应函数名的属性,并重写该方法。也就是不会像变量那样先赋值undefined了。说的有点绕,我们还是看代码,可以先自己看一下执行结果,再看下面的分析:
function a(){
var b = 'a';
function b(){
console.log('b')
}
alert(b)
}
a()
简单说下,词法分析时对function b的处理:给当前函数活动对象obj增加属性b,并赋值。即:obj.a = function(){...}; 所以词法分析后的结果成了这个样子:
function a(){
var b = undefined;
b = function b(){
console.log('b')
}
b = 'a';
alert(b); // a
}
a()
这个地方也只是我读别人观点的一种借鉴,但是我有点不太确定的是普通变量提升和函数提升同时进行时到底谁在最顶端?反正就目前我的认识变量提升的规律是清楚了,大提升提升的原理是因为JS运行机制的问题,为了尽量避免变量提升带来的一些困扰,日常开发中文名还是要养成先声明再使用的好习惯,尽量在函数开头把所有变量都声明出来。文中观点大都是个人理解,如有不对,欢迎指出!
参考文章: https://www.cnblogs.com/huilixieqi/p/6473572.html
关于JS中变量提升的规则和原理的一点理解的更多相关文章
- 关于JS中变量提升的规则和原理的一点理解(二)
上篇文章中讲到变量提升和函数提升的先后顺序时蒙了,后来去查了一下资料,特别整理一下. 在<你不知道的JavaScript(上卷)>一书的第40页中写到:函数会首先被提升,然后才是变量. 书 ...
- js中变量提升(一个是变量,一个是函数表达式都会存在变量提升,函数声明不存在)
一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...
- js中变量提升和函数提升
变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...
- 深入理解js的变量提升和函数提升
一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...
- JavaScript中变量提升是语言设计缺陷
首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...
- 深入理解js的变量提升和函数提升(转)
一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...
- js中变量的声明
大家都知道js中变量的声明是要提前的,下面有4个样例: 1.if(!"t" in window){ var t = 1; } alert(t);答案是undefine ...
- php面试专题---1、php中变量存储及引用的原理
php面试专题---1.php中变量存储及引用的原理 一.总结 一句话总结: 查看变量的存储结构可以安装xdebug扩展,用xdebug_debug_zval()方法,不推荐使用memory_get_ ...
- js中call和apply的实现原理
js中call和apply的实现原理 实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...
随机推荐
- Mac 终端——常用命令语
mac系统如何显示和隐藏文件 苹果Mac OS X操作系统下,隐藏文件是否显示有很多种设置方法,最简单的要算在Mac终端输入命令.显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 显 ...
- 栈和队列数据结构的相互实现[LeetCode]
栈是先进后出,队列是先进后出,这里讨论一下两种数据结构之间的相互实现. 一.用两个栈实现队列 我们用一个栈来实现队列的进队操作(栈A),用另一个栈来实现队列的出队操作(栈B). 1.入队列: 把元素放 ...
- ReactNative实现图集功能
需求描述: 图片缩放.拖动.长按保存等基础图片查看的功能: 展示每张图片文本描述: 实现效果,如图: 实现步骤 使用第三方插件:react-native-image-zoom-viewer 插件Git ...
- 本地如何操作服务器的mysql,详细教程
前置条件: 1.在阿里云服务器de系统是win service 2012. 2.服务器里自己安装了my sql 5.7 3.本地也安装了my sql 5.7 需求:想通过本地的mysql连接上远程的服 ...
- php程序员面试经验
面试是你进入公司的第一个关卡,面试过后还会有试用期.可有时候总有那么一些人对待面试完全没人任何防备. 如果你想进入一家优秀的企业,那么对于面试你一定要做好十足的准备.为什么说了:"将军不打没 ...
- redis中使用 check-and-set 操作实现乐观锁
WATCH 命令可以为 Redis 事务提供 check-and-set (CAS)行为. 被 WATCH 的键会被监视,并会发觉这些键是否被改动过了. 如果有至少一个被监视的键在 EXEC 执行之前 ...
- vmstat 命令详解
作用:vmstat 的含义为显示虚拟内存状态(virtual memor statics),但是它可以报告关于进程,内存,I/O 等系统整体运行状态 选项: -a 显示活动内页 -f 显示启动后创建的 ...
- selenium 封装
周末无聊 在家封装一个pyselenium.可能这些封装大家都会使用,但是我还是根据我自己的习惯去选择性的去封装一些在我工作中用的,这样的话,我就不用去看selenium的api的,我可以根据我自己的 ...
- Oracle学习笔记_10_判断是否为日期类型
FUNCTION isdate (datestr VARCHAR2, format VARCHAR2) RETURN number IS p_date DATE; BEGIN SELECT TO_DA ...
- jingtai ip
BOOTPROTO=staticONBOOT=yesIPADDR=192.168.1.109NETMASK=255.255.255.0GATEWAY=192.168.1.1 HWADDR=00:e0: ...