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代码打下坚实的基础。