译： 函数提高与提高面试的相关问题

做者关于提高的话题，总共有两篇。（后来又有一个讨论篇），再次搬过来。水平有限，若是翻译的不许确请包涵，并去看原文。下面开始：

这是我以前的关于“提高”的文章，标题为《用let，const来指导你的JavaScript变量提高》（中/英）的第二部分。所以在深刻研究以前，请确保你已经阅读过第一部分。

以前我只讨论过变量提高，是由于函数提高在JavaScript中与变量提高不一样。它有本身的独特方式。我将在这对函数进行扩展，以及在面试中面试官总会提问的“提高”（变量和函数）的棘手问题。

但愿经过完成这两部分，你能真的在你的JavaScript检查清单中划掉它。

让咱们开始吧。

函数提高

在JavaScript里有两种方式建立函数，经过函数声明和函数表达式。那就看看这两种方式是如何影响“提高”的。

函数声明

用指定的参数来定义函数。
语法：

function name(param1, param2, ...) {
  [statements]
}

在JavaScript里，函数声明提高函数定义。
所以，这些函数在被声明以前便可使用。
例子：

hoisted() // output: "Hoisted"

function hoisted() {
  console.log('Hoisted')
}

下面的例子，展现JavaScript编译器如何看待上面的代码：

// Hoisted code
function hoisted() {
  console.log('Hoisted')
}// Rest of the code
hoisted() // output: "Hoisted"

若是你在全局做用域或者功能区做用域（在JavaScript里基本叫局部做用域）进行函数声明，这个行为是真实的。
这很是有用，由于你能在代码开头使用高级逻辑，使其可读与可理解。
提示：不要在“if/else”中进行函数声明。

函数表达式

“function”关键字也能在一个表达式中定义一个函数。
语法:

const myFunction = function [name](param1, param2, ...) {
  [statements]
}

函数名是可选的，所以能够是匿名函数。咱们能够用箭头函数，以下所示：

const myFunction = (param1, param2, ...) => {
  [statements]
}

在JavaScript里，函数表达式没有被提高。
所以，你不能使用函数表达式在定义它们以前。
例子：

notHoisted() // TypeError: notHoisted is not a function

const notHoisted = function() {
  console.log('foo')
}

关于函数建立中“提高”的部分，以上全部这些都要记住。
如今来看看面试问题!

“提高”面试问题

“提高”的不稳定行为一直是面试过程当中的热门问题。用以前和如今这两篇文章的知识，能够解答这个话题中的任何问题。

问题 1 :

var a = 1;

function b() {
  a = 10;
  return;

  function a() {}
}

b();
console.log(a);

输出: 1, 这是为何?! ?
这是由于“function a() {}”声明被建立在“函数/局部”做用域中。这个新“a”函数在声明和定义的时候被提高到它的封闭函数b的顶端。下面演示发生了什么：

var a = 1;

function b() {
  // Hoisted
  function a() {}

  a = 10;
  return;
}

b();

console.log(a)

所以，赋值a=10；不能改变全局做用域a的值，任然是1，而是将局部a从函数改成整数10。
若是声明函数a不在这，那将输出10。

问题 2：

function foo(){
    function bar() {
        return 3;
    }
    return bar();
    function bar() {
        return 8;
    }
}
alert(foo());

输出：8
两个bar都是用函数声明的函数，将被提高到foo的局部做用域顶端。

然而，返回8的bar()将晚于第一个返回3的提高。所以，这个返回8的函数将被执行。

以后的场景：

function foo(){
    //Hoisted before
    function bar() {
        return 3;
    }
    // Hoisted after
    function bar() {
        return 8;
    }    return bar();
    
}
alert(foo());

问题 3：

function parent() {
    var hoisted = "I'm a variable";
    function hoisted() {
        return "I'm a function";
    }
    return hoisted(); 
}
console.log(parent());

输出：“类型错误：hoisted不是一个函数”
这个很诡异。函数 vs 变量！咱们来分析下。
咱们都知道，说到变量提高，只有声明被提高（值是“undefined”），而不是定义！

若是是函数声明的方式声明函数，声明和定义一并提高！
如今，若是是多个相同标识符声明（变量和函数在同一做用域里）这样的状况，这个变量的提高会直接忽略。

解释器只声明函数并提高它。

最终，这个声明变量变量赋值被执行（没有被提高），且值分配给了被提高的函数，值“I‘m a variable” ，

这是一个简单的字符串而不是函数。因而报错了！

这后面的场景重现了问题：

function parent() {    // Function declaration hoisted with the definition
    function hoisted() {
        return "I'm a function";
    }    // Declaration ignored, assignment of a string
    hoisted = "I'm a variable";
    return hoisted(); 
}
console.log(parent());

问题 4：

alert(foo());
function foo() {
  var bar = function() {
    return 3;
  };
  return bar();
  var bar = function() {
    return 8;
  };
}

输出：3
这个简单。函数foo()自己将做为函数声明在全局范围内提高。在函数foo里面，是两个明确的函数表达式的例子。

编译器不会提早读取第二个函数bar() (没有提高)。第一个将被执行并返回。

问题 5：

var myVar = 'foo';(function() {
  console.log('Original value was: ' + myVar);
  var myVar = 'bar';
  console.log('New value is: ' + myVar);
})();

输出： “Original value was: undefined”, “New value is: bar”

在这个例子中，全局变量myVar的值‘foo’出如今picture以外。这是由于变量myVar在函数做用域内部声明和定义，并且被提高到了IIFE的顶端，值是‘undefined’，他被首先记录。而后将值“bar”分配并记录下来。

这是我这里对JavaScript提高的总结。?

但愿这两篇（中/英）文章能对你有帮助。

若是你想学习箭头函数和ES6其余相关的功能，请查看下面的文章。

Peace ✌️

至此，关于提高的两篇文章结束了。后来一个读者和做者就问题1和问题3产生了分歧。到时候也搬过来吧。