关于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

转载于:https://www.cnblogs.com/wancheng7/p/8306711.html

关于JS中变量提升的规则和原理的一点理解（一）相关推荐

js中变量名提升和函数名提升
首先,js中变量没有块级作用域,但是有函数作用域,即只有函数可以约数变量的作用域. 并且,函数的实质也是一个变量,所以可以改变它的值,即赋值.所以变量名提升和函数名提升非常相像. 1.变量名的提升发生 ...
深入理解js的变量提升和函数提升
一.变量提升在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...
Web前端第三季(JavaScript):三:第1章:JavaScript基本知识:107-js中变量的声明+108-js中变量的注意事项+109-js中变量的命名规则+110-赋值和算术运算符
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school ...
js中变量赋值3e3的含义简介
js中变量赋值3e3的含义简介 3e3 3e3 getNewTimer = setTimeout(function () {get_new_sign_list()}, 3e3) 其中3e3含义 3e3 ...
JavaScript中变量提升是什么？如何实现？
在进行web前端开发的时候,我们经常会遇到变量提升的情况,那么JS在解析变量的时候是如何做到提升的呢?今天小千就来带大家了解一下. 首先在JS中涉及两种作用域的问题,那么什么是作用域呢? 作用域是代码 ...
JS中变量和函数的使用
一.变量的介绍 1.啥是变量? 变量的本质是一块有名字的内存空间.变量由变量名和变量值构成.变量名指的是内存空间的别名,一般位于赋值运算符的左边:而变量值指的是内存空间中的数据,一般位于赋值运算符 ...
JS高级——变量提升
JS执行过程 1.首先是预解析:预解析过程最重要的是提升,在JavaScript代码在预解析阶段,会对以var声明的变量名,和function开头的语句块,进行提升操作 2.执行操作全局中解析和执行 ...
JS：变量提升与临时性死区TDZ
一.解析过程 js运行前会有编译解析过程,有些错误会在编译过程中被发现. <body><script>var web = 'yooo';console.log(web);var ...
js中变量作用域的小理解
一:变量作用域在js代码中每个变量都是有自己的作用域的,js中不像C语言有块级作用域的概念,取而代之的是函数作用域,看如下代码: var scope="global"; func ...

关于JS中变量提升的规则和原理的一点理解（一）

关于JS中变量提升的规则和原理的一点理解（一）相关推荐

最新文章

热门文章