首页 > 编程语言 > 详细

JavaScript变量提升和函数提升

时间:2020-03-01 17:16:00      阅读:51      评论:0      收藏:0      [点我收藏+]

1. 什么是函数声明和函数表达式

1)函数声明(function declaration),通过function 关键字,functionName函数名,arg参数(可选)定义的函数。

例:function foo(a){......}

2)函数表达式: 将函数声明赋值给一个变量,这个表达式叫做函数表达式

例:匿名函数表达式:var res = function(){...},函数是匿名函数。

 具名函数表达式:var res1 = function foo(){...},函数有函数名的表达式。

2. 什么是提升

通常js引擎会在正式执行之前进行一次预编译,在这个过程中,会将函数声明以及变量声明提升至作用于的顶端,并且赋值undefined,这个过程叫过提升

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

代码1:

function foo() {

 var a = 1;

function a() {

}

console.log(a);

}

foo();

代码2:

function 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)函数提升

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

1)函数声明

function foo() {

foo();

function foo1() {

console.log(‘hello world‘);

}

}

foo();

上面的代码预编译之后:

function foo() {

function foo1() {

console.log(‘hello world‘);

}

foo1();

}

foo();

2)函数表达式

当函数声明遇到函数表达式时,会有什么样的结果呢,先看下面这段代码:

function demo() {

foo(); // 2 

var foo = function() {

console.log(1);

};

foo(); // 1 

function foo() {

console.log(2);

}

foo(); // 1

 }

demo();

运行后我们会发现,输出的结果依次是2 1 1.

因为在js中函数是一等公民,函数声明的优先级最高,会被提升至当前作用域的最顶端,然后才是函数表达式和变量按顺序执行,所以第一次调用实际上执行了下面定义的函数声明,而第二次调用时,由于前面的函数表达式与之前的函数声明同名,故将其覆盖,以后的调用也是同样的结果, 上面的过程预编译之后的逻辑如下:

function demo() {

var foo;

foo = function foo() {

  console.log(2);

}

foo(); // 2 

foo = function() {

console.log(1);

};

foo(); // 1 

foo(); // 1 

}

demo();

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原型到变量定义的位置才给变量赋值的,而函数提升是相当于直接剪切到最前面的。

 

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

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

function foo() {

  console.log(a);

  console.log(b); // 报错

  b = ‘aaa‘;

  var a = ‘bbb‘;

  console.log(a);

  console.log(b);

}

foo();

总结:函数声明的优先级最高,会被提升至当前作用域的最顶端,然后才是函数表达式和变量按顺序执行!!!

JavaScript变量提升和函数提升

原文:https://www.cnblogs.com/wangs0520/p/12390752.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!