关于变量提升,以前在一些教程和书籍上都听到过,平时开发中也知道有这个规律,但是今天突然在一个公开课中听到时,第一反应时一脸懵逼,然后一百度,瞬间觉得好熟悉啊,差点被这个概念给唬住了,不信我给你看个栗子,你也会恍然大悟的:

(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中变量提升的规则和原理的一点理解的更多相关文章

  1. 关于JS中变量提升的规则和原理的一点理解(二)

    上篇文章中讲到变量提升和函数提升的先后顺序时蒙了,后来去查了一下资料,特别整理一下. 在<你不知道的JavaScript(上卷)>一书的第40页中写到:函数会首先被提升,然后才是变量. 书 ...

  2. js中变量提升(一个是变量,一个是函数表达式都会存在变量提升,函数声明不存在)

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  3. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

  4. 深入理解js的变量提升和函数提升

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  5. JavaScript中变量提升是语言设计缺陷

    首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...

  6. 深入理解js的变量提升和函数提升(转)

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  7. js中变量的声明

    大家都知道js中变量的声明是要提前的,下面有4个样例: 1.if(!"t" in window){  var t = 1; }       alert(t);答案是undefine ...

  8. php面试专题---1、php中变量存储及引用的原理

    php面试专题---1.php中变量存储及引用的原理 一.总结 一句话总结: 查看变量的存储结构可以安装xdebug扩展,用xdebug_debug_zval()方法,不推荐使用memory_get_ ...

  9. js中call和apply的实现原理

    js中call和apply的实现原理            实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...

随机推荐

  1. redis的set类型

    1.简单描述 redis的set类型是string类型数值的无序集合.set元素最大可以包含2的32次方减1个元素.由于set类型是通过hash table实现(旧版本是这样,新版本不确定是不是改用了 ...

  2. python decorator 进阶

    上一篇文章开始的时候提到 “一般来说,装饰器是一个函数,接受一个函数(或者类)作为参数,返回值也是也是一个函数(或者参数)” 有一般情况,就有特殊情况.第一种特殊情况:装饰器可能也是一个类:第二种特殊 ...

  3. 小白的Python之路 day2 列表、元组操作

    1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 1 names = ['Tom','Jack','Qian'] 通过下标访问列表中 ...

  4. VMware安装Linux,系统分区。

    系统分区: 主分区<=4 扩展分区<=1 主分区+扩展分区<=4 扩展分区不能直接使用,必须再分成若干逻辑分区才能读写数据. 逻辑分区编号从5开始,1-4给主分区和扩展分区使用的,不 ...

  5. Python中import机制

    Python语言中import的使用很简单,直接使用import module_name语句导入即可.这里我主要写一下"import"的本质. Python官方定义:Python ...

  6. C语言课程设计(成绩管理系统)

    C语言课程设计(成绩管理系统) 翻到了大学写的C语言课程设计,缅怀一下 内容: 增加学生成绩 查询学生成绩 删除 按照学生成绩进行排序 等 #include <stdio.h> #incl ...

  7. Huffman 哈夫曼编码与译码的原理剖析及C++实现

    原理 我们在信息存储时,希望以最少的空间去存储最大的数据,方便数据的传输,那么该怎样做呢? 我们想到将源信息转化为01序列存储,但是这样以来又有一个问题,就是子串匹配问题,我们为了解决这个方法,想到了 ...

  8. iOS tableViewCell 在自定义高度方法中遇到的问题,cell高度为0,cell显示不出来,cell直接显示第几个而不是...cell显示个数不对

    遇到以上问题可以看看你的cell高度中是否有,自定的高度,有了继续看,没有了继续百度... 在文字排版中,少不了自适应文字高度,行间距什么的:显然cell的高度时不固定的,如果复用自定义的cell的话 ...

  9. ArcGIS API for JavaScript 4.2学习笔记[15] 弹窗内容的格式与自定义格式

    先看结果截图吧(不看过程可以直接看总结,在文末): 随便点击了两个城市斑块,出现结果如图. 我来解读一下这结果和以前的有什么不同: 这个例子使用了PopupTemplate,数据是Layer(使用Po ...

  10. php-迭代创建级联目录

    方法一代码: path = './a/b/c/d/e/f'; $path_arr = explode('/',$path);//得到数组array('.','a','b','c','d','e','f ...