JavaScript 函数学习笔记(未完待续)

函数声明

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

函数表达式

let sayHi = function() {
    alert("Hello");
};
  • 在JavaScript中,函数是一种特殊的值
alert(sayHi); // 显示函数源码

let func = sayHi; 

回调函数

function ask(question, yes, no) {
    if (confirm(question)) yes();
    else no();
}

function showOk() {
    alert("You agreed.");
}

function showCancel() {
    alert("You canceled the execution.");
}

ask("Do you agree?", showOk, showCanecl);

ask 的两个参数值 showOkshowCancel 可以被称为 回调函数 或简称 回调。
主要思想是我们传递一个函数,并期望在稍后必要时将其“回调”。在我们的例子中,showOk 是回答 “yes” 的回调,showCancel 是回答 “no” 的回调。

匿名函数

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."); }
);

这里直接在 ask(...) 调用内进行函数声明。这两个函数没有名字,所以叫 匿名函数。这样的函数在 ask 外无法访问(因为没有对它们分配变量),不过这正是我们想要的。

函数表达式 vs 函数声明

// 函数声明
function sum(a, b) {
    return a + b;
}

// 函数表达式
let sum = function(a, b) {
    return a + b;
};

函数表达式是在代码执行到达时被创建,并且仅从那一刻起可用。

一旦代码执行到赋值表达式 let sum = function… 的右侧,此时就会开始创建该函数,并且可以从现在开始使用(分配,调用等)。

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

// right
sayHi("John"); // Hello, John

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

// error
sayHi("John"); // error!!!

let sayHi = function(name) {
    alert(`Hello, ${name}`);
};

总结

  • 函数是值。它们可以在代码的任何地方被分配,复制或声明。
  • 如果函数在主代码流中被声明为单独的语句,则称为“函数声明”。
  • 如果该函数是作为表达式的一部分创建的,则称其“函数表达式”。
  • 在执行代码块之前,内部算法会先处理函数声明。所以函数声明在其被声明的代码块内的任何位置都是可见的。
  • 函数表达式在执行流程到达时创建。

在大多数情况下,当我们需要声明一个函数时,最好使用函数声明,因为函数在被声明之前也是可见的。这使我们在代码组织方面更具灵活性,通常也会使得代码可读性更高。

所以,仅当函数声明不适合对应的任务时,才应使用函数表达式。

箭头函数(基础)

let func = (arg1, arg2, ..., argN) => expression;
// 等价于下面的代码
let func = function(arg1, args2, ..., argN) {
    return expression;
};
  • 具体例子
let sum = (a, b) => a + b;

/* 这个箭头函数是下面这个函数的更短的版本:

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

alert( sum(1, 2) ); // 3
  • 只有一个参数(参数的括号省略)
let double = n => n * 2;
  • 没有参数括号需保留
let sayHi = () => alert("Hello!");
sayHi();

多行的箭头函数(即带花括号)

用花括号括起来之后,需要包含 return 才能返回值(就像常规函数一样)。

let sum = (a, b) => {
    let result = a + b;
    return result;
};

alert(sum(1, 2));

总结

箭头函数对于简单的操作很方便,特别是对于单行的函数。 它具体有两种形式:

  1. 不带花括号:(...args) => expression —— 右侧是一个表达式:函数计算表达式并返回其结果。如果只有一个参数,则可以省略括号,例如 n => n*2
  2. 带花括号:(...args) => { body } —— 花括号允许我们在函数中编写多个语句,但是我们需要显式地 return 来返回一些内容。

箭头函数(进阶)

评论区高手补充

你可能感兴趣的:(javascript,学习,笔记,前端,开发语言,经验分享,es6)