JavaScript经典基础详解之函数-猿码集

1. 什么是函数？

函数是一段可重复使用的代码，用来执行特定的任务。函数可以接受参数并返回值。JavaScript内置了许多函数，同时也可以自己定义函数来实现特定的功能。

需要注意的是，JavaScript中的函数也是对象，并且有自己的属性和方法。


function greet(name) {
  return 'Hello, ' + name + '!';
}
console.log(greet('Jack')); // 输出 Hello, Jack!
console.log(greet.length); // 输出 1，表示函数参数长度

1.1 函数声明与函数表达式

声明一个函数有两种方式，一种是函数声明，另外一种是函数表达式。

函数声明的语法格式如下：


function functionName(parameters) {
   // 函数体
}

函数表达式的语法格式如下：


const functionName = function(parameters){
   // 函数体
}

需要注意的是，在函数表达式中，函数名称可以省略，此时该函数为匿名函数。


const sum = function(number1, number2) { 
  return number1 + number2;
}; // 匿名函数
console.log(sum(1, 2)); // 输出 3

2. 函数传参

函数在声明时可以定义参数，这些参数可以在函数调用时使用。JavaScript函数可以支持任意数量的参数，即使函数声明时没有定义参数，也可以在调用函数时传递参数。

需要注意的是，JavaScript中的所有函数参数都是按值传递的，而不是按引用传递。这意味着即使传递一个引用类型的参数，也不能直接改变该参数的值。


function add(x, y) {
  return x + y;
}
console.log(add(1, 2)); // 输出 3
let a = 1, b = 2;
console.log(add(a, b)); // 输出 3，参数也可以是变量

2.1 默认参数

在ES6之前，JavaScript函数没有默认参数的功能，可以通过判断参数是否为空来达到此目的。ES6引入了默认参数的机制，使用默认参数可以使代码更加简洁易懂。


function sayHello(name = 'World') {
  return 'Hello, ' + name + '!';
}
console.log(sayHello()); // 输出 Hello, World!
console.log(sayHello('Jack')); // 输出 Hello, Jack!

需要注意的是，函数参数的默认值只有在参数为undefined时才会生效。


function add(x, y = 0) {
  return x + y;
}
console.log(add(1)); // 输出 1

2.2 不定参数

不定参数允许函数接受任意数量的参数，使用三个点(...)表示。需要注意的是，这些参数会被转换成一个数组对象。


function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}
console.log(sum(1, 2, 3)); // 输出 6

3. 函数返回值

JavaScript函数可以有返回值，使用return语句表示。如果函数不需要返回值，可以返回undefined。


function multiply(x, y) {
  return x * y;
}
console.log(multiply(2, 3)); // 输出 6
function greet(name) {
  console.log('Hello, ' + name + '!');
}
greet('Jack'); // 输出 Hello, Jack!

3.1 返回多个值

虽然JavaScript中函数只能返回一个值，但是可以返回一个对象，这个对象可以包含多个属性。


function getUserInfo() {
  return {
    name: 'Jack',
    age: 20,
    gender: 'male'
  };
}
let user = getUserInfo();
console.log(user.name); // 输出 Jack
console.log(user.age); // 输出 20

4. 函数作用域

JavaScript中有两种作用域，一种是全局作用域，另外一种是局部作用域。函数可以创建局部作用域，其中定义的变量只能在函数内部访问。

在ES6之前，JavaScript函数只有全局作用域和函数作用域，没有块级作用域。在ES6中，引入了let和const关键字，用于声明块级作用域变量。


let globalVariable = 'Global';
function sayHello(name) {
  let localVariable = 'Local';
  console.log('Hello, ' + name + '!');
  console.log(globalVariable); // 全局变量可以在函数内部访问
  console.log(localVariable); // 局部变量只能在声明的函数内部访问
}
sayHello('Jack');
console.log(globalVariable); // 全局变量可以在函数外部访问
console.log(localVariable); // 报错，局部变量不能在函数外部访问

4.1 闭包

闭包是指可以访问其它函数内部变量的函数。JavaScript中，函数可以嵌套定义，内部函数可以访问外部函数的变量，从而形成闭包。


function outer() {
  let name = 'Jack';
  function inner() {
    console.log(name);
  }
  return inner;
}
let innerFunction = outer();
innerFunction(); // 输出 Jack

上述代码中，函数inner可以访问outer函数定义的变量name，因此inner就是一个闭包。

5. 函数参数的传递方式

JavaScript中函数参数的传递有两种方式：按值传递和按引用传递。

5.1 按值传递

按值传递是指将变量的值复制一份后传递给函数，此时函数对参数的任何修改都不会影响原始变量的值。


function multiply(number) {
  number = number * 2;
  console.log(number); // 输出 4
}
let number = 2;
multiply(number);
console.log(number); // 输出 2

5.2 按引用传递

按引用传递是指将变量的内存地址传递给函数，此时函数对参数的修改会影响原始变量。


function changeArray(array) {
  array.push(4);
}
let array = [1, 2, 3];
changeArray(array);
console.log(array); // 输出 [1, 2, 3, 4]

6. 变量声明提升

JavaScript中存在一种特殊的行为叫做变量声明提升。这是因为在JavaScript中，变量或函数的声明可以放在作用域的任何位置，并且仍然可以在后面的代码中访问。


function test() {
  console.log(a); // undefined
  var a = 10;
  console.log(a); // 10
}
test();

以上代码中，在函数体内console.log(a)语句的前面，a已经被赋值但是值为undefined，并且该语句不会报错。

7. 立即执行函数

立即执行函数，也称为自执行函数，是指在定义后立即执行的函数。这种函数的作用域是局部作用域，不会污染全局变量。在ES6之前，JavaScript没有块级作用域，因此立即执行函数可以用来模拟块级作用域。


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

上述代码中，立即执行函数定义后立即执行，其中定义的变量name是一个局部变量。

总结

函数是JavaScript的核心，是构建复杂应用程序所必须掌握的基本概念。本文介绍了JavaScript函数的基本概念、函数声明与函数表达式、函数传参、函数返回值、函数作用域、闭包、变量声明提升、按值传递与按引用传递以及立即执行函数等知识点，希望读者能够掌握JavaScript函数的基本用法，为编写高质量的JavaScript代码打下坚实的基础。

JavaScript经典基础详解之函数