函数表达式

在 JavaScript 中，函数不是“神奇的语言结构”，而是一种特殊的值。

我们之前使用的语法称为函数声明：

function sayHi() {
  alert( "Hello" );
}

还有另一种创建函数的语法，称为函数表达式。

它看起来像这样：

let sayHi = function() {
  alert( "Hello" );
};

在这里，函数被创建并显式分配给变量，就像任何其他值一样。无论函数如何定义，它都只是存储在变量中的一个值sayHi。

这些代码示例的含义是相同的：“创建一个函数并将其放入变量中sayHi”。

我们甚至可以使用alert以下方法打印出该值：

function sayHi() {
  alert( "Hello" );
}
alert( sayHi ); // shows the function code

请注意，最后一行不运行该函数，因为sayHi. 在某些编程语言中，只要提及函数名称就会导致其执行，但 JavaScript 并非如此。

在 JavaScript 中，函数是一个值，所以我们可以将它作为一个值来处理。上面的代码显示了它的字符串表示，这是源代码。

当然，一个函数是一个特殊的值，我们可以像sayHi().

但它仍然是一个价值。所以我们可以像处理其他类型的值一样使用它。

我们可以将一个函数复制到另一个变量：

function sayHi() {   // (1) create
  alert( "Hello" );
}
let func = sayHi;    // (2) copy
func(); // Hello     // (3) run the copy (it works)!
sayHi(); // Hello    //     this still works too (why wouldn't it)

以下是上面发生的详细情况：

函数声明(1)创建函数并将其放入名为 的变量中sayHi。

Line 将其(2)复制到变量中func。请再次注意：后面没有括号sayHi。如果有，那么func = sayHi()会写 调用的结果 sayHi()为func，不函数 sayHi本身。

现在，该函数可以同时作为sayHi()和调用func()。

请注意，我们也可以sayHi在第一行中使用函数表达式来声明：

let sayHi = function() {
  alert( "Hello" );
};
let func = sayHi;
// ...

回调函数

让我们看一下将函数作为值传递和使用函数表达式的更多示例。

我们将编写一个ask(question, yes, no)带有三个参数的函数：

question

问题的文本

yes

答案为“是”时运行的函数

no

如果答案为“否”则运行的函数

该函数应询问question和 ，具体取决于用户的回答，调用yes()或no()：

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
function showOk() {
  alert( "You agreed." );
}
function showCancel() {
  alert( "You canceled the execution." );
}
// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);

在实践中，这些功能非常有用。现实生活ask和上面的例子之间的主要区别在于，现实生活中的函数使用比简单的confirm. 在浏览器中，这样的功能通常会绘制一个漂亮的问题窗口。但那是另一个故事了。

参数showOk和showCancelofask被称为回调函数或只是callbacks。

这个想法是我们传递一个函数并期望它在必要时被“回调”。在我们的例子中，showOk成为“是”回答和“否”回答的回调showCancel。

我们可以使用函数表达式将相同的函数写得更短：

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}
ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

函数表达式与函数声明

让我们制定函数声明和表达式之间的主要区别。

语法：如何在代码中区分它们。

函数声明：在主代码流中声明为单独语句的函数。

// Function Declaration
function sum(a, b) {
  return a + b;
}

函数表达式：在表达式或另一个语法结构中创建的函数。这里，函数是在“赋值表达式”的右侧创建的=：

// Function Expression
let sum = function(a, b) {
  return a + b;
};

更细微的区别是JavaScript 引擎何时创建函数。

函数表达式在执行到达时创建，并且仅从那一刻起可用。

一旦执行流程传递到赋值的右侧let sum = function…——我们开始，函数就被创建并且可以从现在开始使用(赋值、调用等)。

函数声明是不同的。

函数声明可以在定义之前被调用。

例如，全局函数声明在整个脚本中都是可见的，无论它在哪里。

这是由于内部算法。当 JavaScript 准备运行脚本时，它首先在其中查找全局函数声明并创建函数。我们可以将其视为“初始化阶段”。

并且在处理完所有函数声明之后，执行代码。所以它可以访问这些功能。

例如，这有效：

sayHi("John"); // Hello, John
function sayHi(name) {
  alert( `Hello, ${name}` );
}

函数声明sayHi是在 JavaScript 准备启动脚本时创建的，并且在脚本中的任何地方都可见。

...如果它是一个函数表达式，那么它就行不通了：

sayHi("John"); // error!
let sayHi = function(name) {  // (*) no magic any more
  alert( `Hello, ${name}` );
};

函数表达式在执行到达时创建。那只会发生在行中(*)。太晚了。

函数声明的另一个特点是它们的块作用域。

在严格模式下，当函数声明在代码块内时，它在该块内的任何地方都是可见的。但不是在它之外。

例如，假设我们需要welcome()根据age运行时获得的变量声明一个函数。然后我们计划稍后使用它。

如果我们使用函数声明，它将无法按预期工作：

let age = prompt("What is your age?", 18);
// conditionally declare a function
if (age < 18) {
  function welcome() {
    alert("Hello!");
  }
} else {
  function welcome() {
    alert("Greetings!");
  }
}
// ...use it later
welcome(); // Error: welcome is not defined

这是因为函数声明仅在它所在的代码块内可见。

这是另一个例子：

let age = 16; // take 16 as an example
if (age < 18) {
  welcome();               // \   (runs)
                           //  |
  function welcome() {     //  |
    alert("Hello!");       //  |  Function Declaration is available
  }                        //  |  everywhere in the block where it's declared
                           //  |
  welcome();               // /   (runs)
} else {
  function welcome() {
    alert("Greetings!");
  }
}
// Here we're out of curly braces,
// so we can not see Function Declarations made inside of them.
welcome(); // Error: welcome is not defined

我们可以做些什么来使welcome外部可见if?

正确的方法是使用函数表达式并分配welcome给在外部声明if并具有适当可见性的变量。

此代码按预期工作：

let age = prompt("What is your age?", 18);
let welcome;
if (age < 18) {
  welcome = function() {
    alert("Hello!");
  };
} else {
  welcome = function() {
    alert("Greetings!");
  };
}
welcome(); // ok now

或者我们可以使用问号运算符进一步简化它?：

let age = prompt("What is your age?", 18);
let welcome = (age < 18) ?
  function() { alert("Hello!"); } :
  function() { alert("Greetings!"); };
welcome(); // ok now

以上就是极悦小编介绍的"函数表达式"，希望对大家有帮助，想了解更多可查看Java极悦在线学习。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。