×

提升和优化变量和函数的应用

作者:Web前端之家2020.08.28来源:Web前端之家浏览:237评论:0
关键词:js
微信公众号

微信公众号

提升和优化变量和函数的应用。

通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理。(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有所差异,我们这里说的预编译和提升其实是抽象出来的、易于理解的概念)。

优化变量

下面的代码中,我们在函数中声明了一个变量,不过这个变量声明是在if语句块中:

function hoistVariable() {
  if (!foo) {
    var foo = 5;
  }
   console.log(foo); // 5
}

hoistVariable();

运行代码,我们会发现foo的值是5,初学者可能对此不甚理解,如果外层作用域也存在一个foo变量,就更加困惑了,该不会是打印外层作用域中的foo变量吧?答案是:不会,如果当前作用域中存在此变量声明,无论它在什么地方声明,引用此变量时就会在当前作用域中查找,不会去外层作用域了。

那么至于说打印结果,这要提到预编译机制了,经过一次预编译之后,上面的代码逻辑如下:

// 预编译之后
function hoistVariable() {
  var foo;
 
  if (!foo) {
    foo = 5;
  }
  console.log(foo); // 5
}

hoistVariable();

是的,引擎将变量声明提升到了函数顶部,初始值为undefined,自然,if语句块就会被执行,foo变量赋值为5,下面的打印也就是预期的结果了。

类似的,还有下面一个例子:

var foo = 3;
 
function hoistVariable() {
  var foo = foo || 5;
 
  console.log(foo); // 5
}
 
hoistVariable();

foo || 5这个表达式的结果是5而不是3,虽然外层作用域有个foo变量,但函数内是不会去引用的,因为预编译之后的代码逻辑是这样的:

var foo = 3;
 
// 预编译之后
function hoistVariable() {
  var foo;
 
  foo = foo || 5;
 
  console.log(foo); // 5
}
 
hoistVariable();

如果当前作用域中声明了多个同名变量,那么根据我们的推断,它们的同一个标识符会被提升至作用域顶部,其他部分按顺序执行,比如下面的代码:

function hoistVariable() {
  var foo = 3;
   {
    var foo = 5;
  }
   console.log(foo); // 5
}

hoistVariable();

由于JavaScript没有块作用域,只有全局作用域和函数作用域,所以预编译之后的代码逻辑为:

// 预编译之后
function hoistVariable() {
  var foo;
 
  foo = 3;
   
  {
    foo = 5;
  }
 
  console.log(foo); // 5
}
 
hoistVariable();

函数提升

相信大家对下面这段代码都不陌生,实际开发当中也很常见:

function hoistFunction() {
  foo(); // output: I am hoisted
 
  function foo() {
    console.log('I am hoisted');
  }
}
 
hoistFunction();

为什么函数可以在声明之前就可以调用,并且跟变量声明不同的是,它还能得到正确的结果,其实引擎是把函数声明整个地提升到了当前作用域的顶部,预编译之后的代码逻辑如下:

// 预编译之后
function hoistFunction() {
  function foo() {
    console.log('I am hoisted');
  }
 
  foo(); // output: I am hoisted
}
 
hoistFunction();

相似的,如果在同一个作用域中存在多个同名函数声明,后面出现的将会覆盖前面的函数声明:

function hoistFunction() {
  function foo() {
    console.log(1);
  }
 
  foo(); // output: 2
 
  function foo() {
    console.log(2);
  }
}
 
hoistFunction();

对于函数,除了使用上面的函数声明,更多时候,我们会使用函数表达式,下面是函数声明和函数表达式的对比:

// 函数声明
function foo() {
  console.log('function declaration');
}
 
// 匿名函数表达式
var foo = function() {
  console.log('anonymous function expression');
};
 
// 具名函数表达式
var foo = function bar() {
  console.log('named function expression');
};

可以看到,匿名函数表达式,其实是将一个不带名字的函数声明赋值给了一个变量,而具名函数表达式,则是带名字的函数赋值给一个变量,需要注意到是,这个函数名只能在此函数内部使用。我们也看到了,其实函数表达式可以通过变量访问,所以也存在变量提升同样的效果。

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

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

运行后我们会发现,输出的结果依次是2 1 1,为什么会有这样的结果呢?

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

// 预编译之后
function hoistFunction() {
  var foo;
 
  foo = function foo() {
    console.log(2);
  }
 
  foo(); // 2
 
  foo = function() {
    console.log(1);
  };
 
  foo(); // 1
 
  foo(); // 1
}
 
hoistFunction();

我们也不难理解,下面的函数和变量重名时,会如何执行:

var foo = 3;
 
function hoistFunction() {
  console.log(foo); // function foo() {}
 
  foo = 5;
   
  console.log(foo); // 5
 
  function foo() {}
}
 
hoistFunction();
console.log(foo);   // 3

我们可以看到,函数声明被提升至作用域最顶端,然后被赋值为5,而外层的变量并没有被覆盖,经过预编译之后,上面代码的逻辑是这样的:

// 预编译之后
 
var foo = 3;
 
function hoistFunction() {
  var foo;
  foo = function foo() {};
  console.log(foo); // function foo() {} 
  foo = 5;
  console.log(foo); // 5
}
 
hoistFunction();
console.log(foo);  // 3

所以,函数的优先权是最高的,它永远被提升至作用域最顶部,然后才是函数表达式和变量按顺序执行,这一点要牢记。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20200828a123123.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria