ag亚游集团官方网站ag亚游集团官方网站


亚游集团

js变量提升与函数提升的详细过程

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

github:https://github.com/Daotin/Web微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

js变量提升与函数提升的详细过程

先来看两个栗子,下面的两段代码分别输出什么?

// 代码段1function foo() { var a = 1; function a() {} console.log(a);}foo();// 代码段2function foo() { var a; function a() {} console.log(a);}foo();

答案是:代码段1打印的是1,代码段2打印的是 a() 函数。

为什么会这样呢?这就涉及到js中的变量提升和函数提升的具体过程了。

1、变量的提升

js是怎么创建变量的呢?

如下面的代码:

var a = 1;var b = 2;

js在解析上面的代码的时候,其实会按照下面的方式进行解析的:

var a;var b;a = 1;b = 2;

所以 js 并不是在我们定义一个变量的时候,声明完成之后立即赋值,而是把所有用到的变量全部声明之后,再到变量的定义的地方进行赋值,变量的声明的过程就是变量的提升。

所以我们看下下面的栗子:

function foo() { var a = 1; console.log(a); console.log(b); var b = 2;}foo();

上面的代码在js的眼中是这样解析的:

function foo() { var a; var b; a = 1; console.log(a); // 1 console.log(b); // undefined b = 2;}foo();

所以输出的 a 的值为1, b的值为 undefined。

变量在声明提升的时候,是全部提升到作用域的最前面,一个接着一个的。但是在变量赋值的时候就不是一个接着一个赋值了,而是赋值的位置在变量原本定义的位置。原本js定义变量的地方,在js运行到这里的时候,才会进行赋值操作,而没有运行到的变量,不会进行赋值操作。

所以变量的提升,提升的其实是变量的声明,而不是变量的赋值。

2、函数的提升

函数的提升和变量的提升类似,都是提升到作用域的最开始的位置,只不过变量的提升是分两步的,第一步是变量声明的提升,第二步是变量的赋值。而函数的提升是直接将整个函数整体提升到作用域的最开始位置,相当于剪切过去的样子。

3、变量提升和函数提升的顺序

在作用域中,不管是变量还是函数,都会提升到作用域最开始的位置,不同的是,函数的提升后的位置是在变量提升后的位置之后的。

举个栗子:

下面的代码输出什么?

function foo() { console.log(a); var a = 1; console.log(a); function a() {} console.log(a);}foo();

上面的代码在js眼中是这样解析的:

function foo() { var a; function a() {} console.log(a); // a() a = 1; console.log(a); // 1 console.log(a); // 1}foo();

所以从上面的栗子可以看到,变量的提升是在函数提升之前的,但是变量赋值的部分是在js原型到变量定义的位置才给变量赋值的,而函数提升是相当于直接剪切到最前面的。

我们再看一个更加复杂一点的栗子:

function foo() { console.log(a); var a = 1; console.log(a); function a() {} console.log(a); console.log(b); var b = 2; console.log(b); function b() {} console.log(b);}foo();

js是这样解析的:

function foo() { var a; var b; function a() {} function b() {} console.log(a); // a() a = 1; console.log(a); // 1 console.log(a); // 1 console.log(b); // b() b = 2; console.log(b); // 2 console.log(b);// 2}foo();

最后,注意:只有声明的变量和函数才会进行提升,隐式全局变量不会提升。

下面的栗子中,b不会进行变量提升。

function foo() { console.log(a); console.log(b); // 报错 b = "aaa"; var a = "bbb"; console.log(a); console.log(b);}foo();

4、参考链接

js变量提升与函数提升的机制: https://segmentfault.com/a/1190000008568071

, 1, 0, 9);

欢迎阅读本文章: 王大伟

亚游手机版

亚游集团