JavaScript 内功心法——变量提升及函数提升

552 阅读3分钟

在看一些面试题的时候,会发现有些答案往往不是我们想的那么简单,有些时候会有意想不到的结果,这些答案有可能就是因为变量和函数提升导致的。下面我们就简单看一下什么是变量提升,什么是函数提升。

1. 变量提升

变量不管在任何地方声明,js 引擎在编译时都会发生变量提升。

例:

console.log(a); // undefined

var a = 2;

在定义变量 a 之前打印 a,并不会报Uncaught ReferenceError: i is not defined的错,而是输出undefined,因为var a = 2会进行变量提升,会被引擎解析成如下代码:

var a;

console.log(a); // undefined

a = 2;

var a = 2,js 引擎其实会分解成var aa = 2两个单独的声明,第一个是编译阶段,第二个是执行阶段。

再用另外一个例子说明一下变量提升,变量如果在不符合条件的 if 语句中定义,也会发生变量提升。

例:

function test() {
  if (false) {
    var i = 100;
  }
  console.log(i); // undefined
}
test();

虽然是在判断条件中定义的变量,并且当前条件也不满足,但是在访问定义的变量时,会提示 undefined,而不是Uncaught ReferenceError: i is not defined报错,充分说明了在判断条件中定义的变量,即时没有执行到判断条件中,变量也会提前声明。

2. 函数提升

函数声明和变量声明一样,在被执行前都会进行“移动”处理,“移动”到各自作用域的最顶端,也就是所谓的提升。

在定义函数之前使用函数,函数也会执行。

例:

test();

function test() {
  var i = 1;
  console.log(i); // 1
}

这种情况在我们开发中会经常遇到,我们有的时候会把函数定义到执行函数的下面,也不会报错,不报错的原因就在于此,函数进行了提升。

虽然函数和变量都会提升,但是函数提升优于变量提升

例:

foo(); // 1

function foo() {
  console.log(1);
}

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

会输出 1 而不是 2,因为引擎会解析成一下代码:

function foo() {
  console.log(1);
}

var foo; // 被忽略了

foo(); // 1

foo = function() {
  console.log(2);
};

var foo 是重复声明,所以被忽略了,因为函数声明优于变量声明。

如何区分函数声明和函数表达式:function 关键字出现的位置(不是一行,是整个声明的位置),如果 function 是声明中的第一个词,就是函数声明,否则就是函数表达式。

其他心法目录:

后续会将自己总结的内功心法大全慢慢放出来,其中包括 JS 作用域,执行上下文,this 指向问题,原型链,闭包...,供自己和他人学习。

阅读完后两部曲

  1. 喜欢的小伙伴点个赞吧,感觉对身边人有帮助的,麻烦动动手指,分享一下。非常感谢各位花时间阅读完,同时很感谢各位的点赞和分享。
  2. 希望各位关注一下我的公众号吧,新的文章第一时间发到公众号,公众号主要发一些个人随笔、读书笔记、还有一些技术热点和实时热点,并且还有非常吸引人的我个人自费抽奖活动哦~