JavaScript学习笔记——JavaScript函数

JavaScript 函数是一种非常强大且重要的编程概念。在 JavaScript 中，函数不仅可以被定义和调用，还具备作用域、闭包等特性。本文将深入探讨 JavaScript 函数的特性以及如何使用它们。

1. 定义函数

1.1 函数声明

函数声明是最常用的一种定义函数的方式。它使用 function 关键字，后跟函数的名称、参数列表和函数体。例如：

function greet(name) {
  console.log('Hello, ' + name + '!');
}

在函数声明后，可以直接通过函数名来调用该函数。

1.2. 函数表达式

函数表达式是将函数赋值给变量或属性的一种方式。它也使用 function 关键字，但没有函数名称，而是将函数直接赋值给一个变量。例如：

var greet = function(name) {
  console.log('Hello, ' + name + '!');
};

在函数表达式中，函数赋值给了变量 greet，因此可以通过该变量名来调用函数。

1.3. 匿名函数

匿名函数是没有名称的函数。它可以作为立即执行函数（Immediately Invoked Function Expression，IIFE）使用，或者作为函数表达式的一部分。例如：

// 立即执行函数（IIFE）
(function() {
  console.log('This is an immediately invoked function!');
})();

// 函数表达式使用匿名函数
var greet = function(name) {
  return 'Hello, ' + name + '!';
};

匿名函数无法通过函数名来调用，但可以通过变量名来调用（如上述示例中的 greet）。

2. 调用函数

定义函数只是创建了一个函数的蓝图，并不会执行其中的代码。要执行函数体中的代码，需要通过函数名加上一对小括号来调用该函数。例如，我们可以调用上面定义的 greet 函数：

greet('Alice');
// 输出：Hello, Alice!

3. 作用域

3.1. 函数作用域

JavaScript 中的函数具有自己的作用域，也称为函数作用域。这意味着在函数内定义的变量只在该函数内部可见，外部无法访问。

例如，考虑以下代码：

function myFunction() {
  var message = 'Hello';
  console.log(message);
}

console.log(message); // 报错：message is not defined

在上面的例子中，message 是在 myFunction 函数内部定义的变量。因此，在函数外部的 console.log(message) 将会报错，因为它无法访问函数内部的变量。

3.2. 块级作用域（ES6 新特性）

在 ES6（ECMAScript 2015）之前，JavaScript 中只有全局作用域和函数作用域。但是，ES6 引入了块级作用域的概念，也就是通过使用 let 和 const 关键字在代码块中创建作用域。

例如：

function myFunction() {
  if (true) {
    let message = 'Hello';
    console.log(message);
  }

  console.log(message); // 报错：message is not defined
}

在上面的例子中，message 是在 if 代码块中使用 let 关键字定义的。因此，在 if 代码块之外的 console.log(message) 将会报错，因为在该作用域中无法访问变量。

3.3. 变量提升

JavaScript 具有变量提升的特性，这意味着在函数内部声明的变量会在执行过程中被提升到函数作用域的顶部。但是，变量赋值的操作并不会被提升。

例如：

function myFunction() {
  console.log(message); // 输出：undefined
  var message = 'Hello';
}

myFunction();

在上面的例子中，尽管 message 的赋值语句在 console.log 之后，但它仍然被正确地输出为 undefined。这是因为变量声明被提升到了函数作用域的顶部，但赋值操作仍然按照代码的实际顺序进行。

3.4. 函数嵌套与作用域链

JavaScript 中的函数可以嵌套，也就是在一个函数内部定义另一个函数。内部函数可以访问外部函数的变量和参数，形成了作用域链。

例如：

function outerFunction() {
  var message = 'Hello';

  function innerFunction() {
    console.log(message);
  }

  innerFunction();
}

outerFunction(); // 输出：Hello

在上面的例子中，innerFunction 是在 outerFunction 内部定义的。由于函数嵌套，innerFunction 可以访问外部函数 outerFunction 中的变量 message。这种访问机制形成了作用域链。

4. arguments 对象和参数

在每个函数内部，都有一个隐藏的arguments对象可供使用。这个对象类似于数组，并且保存着传递给函数的所有参数。无需提前声明，我们可以直接在函数中使用arguments对象。

function sum() {
  var total = 0;

  for (var i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }

  return total;
}

console.log(sum(1, 2, 3)); // 输出：6

在上面的例子中，sum 函数通过遍历 arguments 对象计算了所有传入参数的总和。

4.1.arguments对象的属性和方法

arguments对象是一个类数组对象，它具有许多有用的属性和方法。

• length：获取传入函数的参数个数。

function foo() {
  console.log(arguments.length); // 输出：3
}

foo(1, 2, 3);

• callee：返回当前正在执行的函数的引用，可以用来实现递归调用和匿名函数的自我引用。

function factorial(n) {
  if (n <= 1) {
    return 1;
  } else {
    return n * arguments.callee(n - 1);
  }
}

console.log(factorial(5)); // 输出：120

• index：获取当前正在执行的函数的参数索引。

function showIndex() {
  for (let i = 0; i < arguments.length; i++) {
    console.log(arguments[i], arguments.index); // 输出：参数值 参数索引
  }
}

showIndex('apple', 'banana', 'orange');

• toString()：将arguments对象转换为字符串。

function foo() {
  console.log(arguments.toString()); // 输出：1,2,3
}

foo(1, 2, 3);

除了上述属性和方法，arguments对象还可以通过数组的下标方式进行访问和修改参数值。

4.2.参数的灵活性

JavaScript函数的参数非常灵活。它们不需要事先定义，并且可以接收任意数量的参数。

function sum() {
  let result = 0;

  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }

  return result;
}

console.log(sum(1, 2, 3)); // 输出：6
console.log(sum(4, 5));    // 输出：9

在上述例子中，sum函数没有定义任何具名参数，但它仍然可以接收传入的参数，并根据参数的数量进行求和计算。

5. 箭头函数

箭头函数是 ES6 中引入的一种新的函数定义语法，它更简洁且易于理解。箭头函数使用 => 符号来定义函数，并省略了 function 关键字。例如：

var multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 输出：6

箭头函数还有其他特性，比如隐式返回和绑定 this 的行为。它们在编写简短的回调函数时特别有用。

5.1.箭头函数的基本语法

箭头函数的基本语法如下：

const functionName = (param1, param2, ...paramN) => {
  // 函数体
};

箭头函数使用=>箭头符号来表示函数的定义，并使用括号包裹参数列表。如果只有一个参数，则可以省略括号；如果没有参数，则需要使用空括号表示。

函数体可以包含一条或多条语句，如果只有一条语句，则可以省略大括号和返回语句。如果函数体需要返回一个值，则可以使用隐式返回的方式。

下面是几个示例：

// 无参数的箭头函数
const sayHello = () => {
  console.log('Hello!');
};

sayHello(); // 输出：Hello!

// 单个参数的箭头函数
const double = number => {
  return number * 2;
};

console.log(double(5)); // 输出：10

// 隐式返回的箭头函数
const multiply = (a, b) => a * b;

console.log(multiply(3, 4)); // 输出：12

5.2.箭头函数的优点

箭头函数相比于传统的函数表达式有以下几个优点：

1. 简化的语法：箭头函数的语法非常简洁，特别是在只有一个参数和单条语句时，可以进一步简化代码。
2. 词法绑定的this值：箭头函数没有自己的this值，它会继承外部作用域的this值，这样可以避免this指向发生变化的问题。

const obj = {
  name: 'Alice',
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}!`);
    }, 1000);
  }
};

obj.sayHello(); // 输出：Hello, Alice!

1. 不绑定arguments对象：箭头函数没有自己的arguments对象，它会继承外部作用域中的arguments对象。

function sum() {
  const arrowFunc = () => {
    console.log(arguments.length);
  };

  arrowFunc(1, 2, 3);
}

sum(4, 5); // 输出：2

值得注意的是，由于箭头函数不存在arguments对象和this值的绑定，所以它不适合作为对象的方法、构造函数或原型方法使用。

5.3.注意事项

在使用箭头函数时，需要注意以下几点：

1. 箭头函数中的this值和arguments对象是词法绑定的，无法通过bind()、call()或apply()来修改。
2. 箭头函数不能用作构造函数，并且没有prototype属性。
3. 如果箭头函数的函数体比较复杂，需要多行代码或有明确的返回值，则需要使用大括号和return语句。
4. 箭头函数与普通函数表达式一样具有函数作用域，而非块级作用域。

const num = 5;

const double = () => {
  const num = 10;
  console.log(num);
};

double(); // 输出：10

综上所述，箭头函数在JavaScript中具有简洁的语法和词法绑定的特点，能够使代码更加简洁易读。但需要注意其适用范围和注意事项，避免出现不必要的错误。

6.总结

JavaScript 函数是构建强大应用的关键。通过了解如何定义函数、调用函数，以及函数作用域、闭包、arguments 对象和参数、箭头函数等特性，可以更好地利用函数来解决问题。