学习JavaScript中的函数挂起

311 阅读4分钟

提升JavaScript中的默认行为,它将代码执行前的所有声明移到全局或局部范围的顶部。它是一个JavaScript属性,允许你在声明一个变量或函数之前使用它。在你的JavaScript代码中,你在哪里声明了变量或函数并不重要,它们可以很容易地被移到其作用域的顶部。

想在JavaScript中使用函数吊起吗?如果是的话,那你就来对了!本篇文章将讨论JavaScript中的函数提升、变量提升和提升的优先级。此外,我们还将借助一些例子来说明函数表达式和函数声明提升之间的区别。那么,让我们开始吧!

JavaScript中的变量提升

由于变量提升是与函数声明提升和函数表达式相联系的,我们将首先讨论变量提升。

在变量提升中,一个带有关键字 "var"的变量可以在JavaScript代码中被利用/访问后被声明。JavaScript引擎会将变量声明移到脚本的顶部,这个概念被称为变量提升。记住,你必须在每个作用域的开头声明所有的变量,以避免错误或bug。

当涉及到变量和常量时,允许使用关键字 "var"进行悬挂,而 "const"和 "let"则不允许。现在,让我们看看下面给出的例子,以更好地理解前面的声明。

在下面的例子中,var "c "在**console.log()**函数的声明前被使用。执行该代码,看看结果如何。

c = "Hoisting in JavaScript";
console.log(c);
var c;

输出显示的是var "c"的字符串值,即 "Hoisting in JavaScript",表明该变量声明是允许hoisting的。

在另一种情况下,JavaScript不允许吊起变量赋值。为了证实这一说法,我们将写出以下代码,并在我们的控制台窗口中执行它。

console.log(d);
var d = "Hoisting in JavaScript";

在这个例子中,变量 "d"的声明在编译阶段就被移到了内存中,所以输出结果将显示 "undefined"作为 "d"变量的值,因为它是在初始化之前打印出来的。

JavaScript中的函数提升

与变量类似,JavaScript也对函数声明进行提升。在这种情况下,函数声明被移到了你的JavaScript代码的顶部,被吊起的函数可以在其声明之前被利用。你可以在程序中的任何地方定义函数,而那个被吊起的函数可以在其定义之前被调用。

函数表达式提升和函数声明提升之间的区别

在JavaScript中,函数被粗略地分为函数表达式和函数声明。当你在声明之前调用一个JavaScript函数时,它将显示输出,因为JavaScript解释器会吊起函数声明。在另一种情况下,当一个函数被用作表达式时,它会产生一个错误,因为只有声明才会被挂起。

在下面的例子中,我们将在声明之前调用**testFunc()**函数,它将输出字符串 "Hi, this is linuxhint.com"。

testFunc();
function testFunc() {
    console.log('Hi, this is linuxhint.com');
}

这就是JavaScript对函数声明进行提升的方式。

现在,让我们在下面的JavaScript代码中利用 "testFunc2()"作为函数表达。

testFunc2();
let testFunc2 = function() {
  console.log('Hi, this is linuxhint.com');
}

在这种情况下,会出现一个 "ReferenceError",说明添加的 "testfunc2()"没有定义。

如果你执行同样的代码,同时把 "let"换成 "var",这次输出会显示一个 "TypeError",因为变量 "testFunc1"被用在一个函数表达式中,而JavaScript解释器在调用它之前只能吊起函数声明而不能赋值。

testFunc1();
var testFunc1 = function() {
  console.log('Hi, this is linuxhint.com');
}

在JavaScript中提升优先级

当你想在你的JavaScript代码中悬挂同名的变量和函数时,那么请确保你知道JavaScript的悬挂优先权。下面是一些你在踏入指定条件时应该记住的要点。

  • 变量的赋值优先于函数的声明。
  • JavaScript中的函数声明优先于变量声明。

注意:函数声明高于变量声明,但不高于变量赋值。

现在,请看下面的例子来了解变量赋值在JavaScript函数声明中的作用。

var test1 = 'Hi, this is linuxhint.com';
function test1(a) {
  return (a + 'we are hoisting functions');}
console.log(test1);

在上面给出的代码中,"test1"变量的赋值将被优先考虑,并且代码将只输出它的值。

结论

JavaScript中的函数提升是用来将函数声明移到其范围的顶部。 与函数类似,变量声明也被用在JavaScript代码的声明之前。这篇文章讨论了JavaScript中的函数提升、变量提升和提升的优先级。此外,还通过实例说明了函数表达式和函数声明提升之间的区别。