声明提升面试题_功能提升和提升面试问题

声明提升面试题

by Bhuvan Malik

通过布凡·马利克(Bhuvan Malik)

功能提升和提升面试问题 (Function Hoisting & Hoisting Interview Questions)

This is a part 2 for my previous article on Hoisting titled “A guide to JavaScript variable hoisting ? with let and const”. So make sure you read that before diving into this one.

这是我上一篇有关提升的文章“ JavaScript变量提升指南？ ”的第2部分。 与let和const” 。 因此，请确保您已阅读此内容，然后再深入研究这一内容。

Previously I talked about variable hoisting only because function hoisting in JavaScript is not the same as variable hoisting, it is unique in its own way. I’ll expand on function hoisting in this one along with some common and tricky interview questions on hoisting (variable and function) which anyone giving JavaScript interviews is almost certain to encounter.

之前，我只讨论变量提升，因为JavaScript中的函数提升与变量提升不同，它以自己的方式是唯一的。 在这一部分中，我将进一步介绍函数提升，以及有关提升(变量和函数)的一些常见且棘手的访谈问题，几乎所有接受JavaScript访谈的人都肯定会遇到该问题。

Hopefully, after finishing these 2 parts, you will be ready to cross off Hoisting from your JavaScript prep checklist!

希望在完成了这两个部分之后，您就可以从您JavaScript准备清单中删除吊装了！

Let’s get to it.

让我们开始吧。

功能吊装 (Function Hoisting)

There are 2 ways of creating functions in JavaScript, through Function Declaration and through Function Expression. Let’s see what these are and how hoisting affects them.

通过函数声明和函数表达式 ，有两种在JavaScript中创建函数的方法。 让我们看看它们是什么以及吊装如何影响它们。

功能声明 (Function Declaration)

The function declaration defines a function with the specified parameters.Syntax:

函数声明使用指定的参数定义函数。语法：

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

In JavaScript, function declarations hoist the function definitions.

在JavaScript中，函数声明可以提升函数定义。

Therefore, these functions can be used before they are declared.Example:

因此，可以在声明它们之前使用这些函数。

hoisted() // output: "Hoisted"

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

Behind the scenes, this is how the JavaScript interpreter looks at the above code:

在幕后，这就是JavaScript解释器如何看待上面的代码：

// Hoisted codefunction hoisted() {  console.log('Hoisted')}

// Rest of the codehoisted() // output: "Hoisted"

This behavior is true if you have function declarations in the Global Scope or Functional Scope (basically Local Scope in JavaScript).

如果您在全局范围或功能范围(基本上是JavaScript中的本地范围)中有函数声明，则此行为是正确的。

This can be helpful because you can use your higher-level logic at the beginning of the code making it more readable and understandable.

这很有用，因为您可以在代码的开头使用高级逻辑，以使其更具可读性和可理解性。

Note: Never use function declarations inside if/else blocks.

注意：切勿在if / else块内使用函数声明。

函数表达式 (Function Expression)

The function keyword can also be used to define a function inside an expression.Syntax:

function关键字也可用于在表达式内部定义函数。语法：

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

The [name] is optional, therefore these can be anonymous functions. We can use arrow functions as well like so:

[name]是可选的，因此它们可以是匿名函数。 我们可以像这样使用箭头函数：

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

Function expressions in JavaScript are not hoisted.

JavaScript中的函数表达式未悬挂。

Therefore, you cannot use function expressions before defining them.Example:

因此，在定义函数表达式之前不能使用它们。

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

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

This is all there is to be kept in mind for creating functions from a hoisting point of view. Now on to some interview questions!

从吊装角度创建功能时，必须牢记所有这些。 现在来谈一些面试问题！

面试问题 (Hoisting Interview Questions)

Hoisting and it’s erratic behavior is a hot topic during interviews. Using the knowledge from my previous article and this one, one can sail through any questions on the topic. With that said, let’s look at some common questions.

吊装及其行为不稳定是采访中的热门话题。 利用上一篇和本篇文章中的知识，您可以浏览关于该主题的任何问题。 话虽如此，让我们看一些常见的问题。

问题1 (Question 1)

var a = 1;

function b() {  a = 10;  return;

function a() {}}

b();

console.log(a);

Output: 1, What the?! ?

输出：1，什么？！ ？

This is because the function a() {} statement has now created a local a that has a functional/local scope. This new a now gets hoisted to the top of its enclosing function b() with it’s declaration and definition. This is what is happening behind the scenes:

这是因为function a() {}语句现在创建了具有功能/本地作用域的本地a 。 现在，此新a及其声明和定义被提升到其封闭函数b()的顶部。 这是幕后发生的事情：

var a = 1;

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

a = 10;  return;}

b();

console.log(a)

Therefore, the statement a = 10; is no longer changing the value of the global a which remains to be 1, but rather it is changing the local a from a function to an integer value of 10. Since we are logging the global a, the output is 1.

因此，语句a = 10; 不再更改仍为1的全局a的值，而是将局部a从函数更改为整数值10。由于我们正在记录全局a ，因此输出为1。

Had the statement function a() {} not been there, the output would have been 10.

如果语句function a() {}不存在，则输出为10。

问题2 (Question 2)

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

Output: 8

输出8

Both the bar() functions are function declarations and will therefore be hoisted to the top of foo() local scope. However, the bar() returning 8 will be hoisted after the one returning 3. Therefore, the one returning 8 will be executed.

两个bar()函数都是函数声明，因此将被提升到foo()本地作用域的顶部。 但是，返回8的bar()将在返回3的那条之后吊起。因此，将执行返回8的bar() 。

Behind the scenes:

幕后花絮：

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

return bar();    }alert(foo());

问题3 (Question 3)

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

Output: “TypeError: hoisted is not a function”

输出：“ TypeError：提升不是函数”

This one’s tricky. Its Function vs. Variable! Let’s break it down.

这很棘手。 它的功能与变量！ 让我们分解一下。

We know that when it comes to variable hoisting, only the declaration(with a value of “undefined”) is hoisted, not the definition!

我们知道，对于变量提升，仅提升声明(值为“ undefined”)，而不提升定义！

In the case of function declarations, the definitions are hoisted as well!

在函数声明的情况下，定义也会被提升！

Now, in such a case of multiple declarations(variable and function in the same scope) with the same identifier, the hoisting of variables is simply IGNORED. The the interpreter comes across the function declaration and hoists it. Finally, the statement of variable assignment (which was not hoisted) is executed and “I’m a variable” is assigned to hoisted, which is a simple string value and not a function. Hence the error!

现在，在具有相同标识符的多个声明(变量和函数在同一范围内)的情况下，变量的提升只是IGNORED 。 解释器会遇到函数声明并将其提升。 最后，执行变量赋值语句(未提升)，并将“我是变量”分配给hoisted ，这是一个简单的字符串值而不是一个函数。 因此错误！

Here’s the behind the scenes for this problem:

这是此问题的幕后花絮：

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 (Question 4)

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

Output: 3

输出3

This one’s easy. The function foo() itself will be hoisted in the global scope as its a function declaration. As for inside foo(), its a clear case of function expression for both the bar()functions.

这很简单。 函数foo()本身将作为其函数声明而在全局范围内提升。 至于内部foo() ，两个bar()函数的函数表达式都是明显的情况。

The second bar() will not be read by the interpreter ahead of time (no hoisting). The first one will be executed and returned.

解释器不会提前读取第二个bar() (不吊装)。 第一个将被执行并返回。

问题5 (Question 5)

var myVar = 'foo';

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

Output: “Original value was: undefined”, “New value is: bar”

输出：“原始值为：未定义”，“新值为：条形”

In this one, again the global value of myVar (‘foo’) is out of the picture. This is because variable myVar is being declared and defined inside the local function scope and is therefore hoisted to the top of the IIFE with a value of ‘undefined’ which is logged first. The value ‘bar’ is then assigned and logged subsequently.

在此myVar ， myVar ('foo')的全局值再次超出了画面。 这是因为变量myVar是在局部函数范围内声明和定义的，因此被提升到IIFE的顶部，其值先记录为“ undefined”。 然后分配值“ bar”并随后进行记录。

This concludes JavaScript Hoisting from my side. ?

我JavaScript提升到此结束。 ？

Hope both the articles are of help to you.

希望这两篇文章对您有所帮助。

Please check out the article below if you want to learn arrow functions and other ES6 functionality related to functions.

如果您想学习箭头功能以及与功能相关的其他ES6功能，请查看下面的文章。

JavaScript ES6 Functions: The Good PartsES6 offers some cool new functional features that make programming in JavaScript much more flexible. Let’s talk about…medium.freecodecamp.org

JavaScript ES6功能：优良的部分 ES6提供了一些很酷的新功能，使JavaScript编程更加灵活。 让我们谈谈... medium.freecodecamp.org

Peace ✌️

和平✌️

翻译自: https://www.freecodecamp.org/news/function-hoisting-hoisting-interview-questions-b6f91dbc2be8/

声明提升面试题