10 JavaScript学习：函数-阿里云开发者社区

函数的概念

JavaScript中的函数是一段可重复使用的代码块，它接受输入（称为参数），执行特定的任务，并返回一个值。函数可以被调用（或者说被执行），并且可以接受不同的输入来产生不同的输出。

JavaScript 函数定义

JavaScript 函数可以通过以下方式定义：

使用 function 关键字：

function functionName() {
    // 函数体
}

使用函数表达式：

var functionName = function() {
    // 函数体
};

使用箭头函数（ES6）：

const functionName = () => {
    // 函数体
};

在定义函数时，可以为函数指定参数，例如：

function add(a, b) {
    return a + b;
}
var result = add(2, 3); // result 等于 5

函数也可以返回一个值，使用 return 关键字，例如：

function multiply(a, b) {
    return a * b;
}
var result = multiply(2, 3); // result 等于 6

JavaScript 函数调用

JavaScript函数调用是指通过函数名以及括号中的参数（如果有的话）来执行函数的过程。函数调用可以在JavaScript中的任何地方发生，包括全局作用域、函数内部、对象方法等。

下面是一些JavaScript函数调用的详解和举例：

全局函数调用：定义在全局作用域的函数可以在代码的任何地方进行调用。

function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("John"); // 输出: Hello, John!

函数表达式调用：函数表达式赋值给变量后，可以通过变量名进行调用。

var greet = function(name) {
    console.log("Hello, " + name + "!");
};
greet("Alice"); // 输出: Hello, Alice!

方法调用：函数可以作为对象的方法来调用。

var person = {
    name: "Bob",
    greet: function() {
        console.log("Hello, " + this.name + "!");
    }
};
person.greet(); // 输出: Hello, Bob!

构造函数调用：通过new关键字调用构造函数来创建新对象。

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log("Hello, " + this.name + "!");
    };
}
var john = new Person("John");
john.greet(); // 输出: Hello, John!

间接调用：使用call()或apply()方法来间接调用函数，可以指定函数执行时的上下文（即this的值）。

function greet() {
    console.log("Hello, " + this.name + "!");
}
var person = {
    name: "Alice"
};
greet.call(person); // 输出: Hello, Alice!

这些是JavaScript函数调用的一些常见示例，可以根据需要选择适合的方法来调用函数。

JavaScript 函数的参数

JavaScript函数的参数允许您向函数传递数据，让函数能够使用这些数据进行操作。JavaScript函数可以接受零个或多个参数，并且在调用时可以传递不同数量的参数。下面是关于JavaScript函数参数的详细解释：

命名参数：函数定义时可以指定参数名称，通过参数名称来引用传递的值。

function greet(name) {
    console.log("Hello, " + name + "!");
}
greet("Alice"); // 输出: Hello, Alice!

默认参数：在ES6中引入了默认参数的概念，可以为参数设置默认值。

function greet(name = 'Guest') {
    console.log("Hello, " + name + "!");
}
greet(); // 输出: Hello, Guest!
greet("Bob"); // 输出: Hello, Bob!

Rest参数：Rest参数允许将不定数量的参数表示为一个数组。在函数参数列表中，使用三个点号（...）来表示Rest参数。

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出: 10

arguments对象：在非箭头函数中，可以使用arguments对象访问所有传递给函数的参数，即使参数未在函数定义中声明。

function logArgs() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
logArgs("apple", "banana", "cherry"); // 输出: apple, banana, cherry

使用对象作为参数：可以将对象作为参数传递给函数，以便在函数中访问对象的属性。

function greet(person) {
    console.log("Hello, " + person.name + "!");
}
var alice = { name: "Alice" };
greet(alice); // 输出: Hello, Alice!

以上是关于JavaScript函数参数的一些常见用法，您可以根据需要选择适合的方式来处理函数参数。

另外，JavaScript中没有像其他语言（如Java）那样的函数重载概念，即在同一个作用域中不能定义多个同名函数，参数个数或类型不同的函数。JavaScript中，如果定义了多个同名函数，则后面的定义会覆盖前面的定义，只有最后一个函数定义会被保留。

不过，JavaScript通过一些技巧可以实现类似函数重载的效果，例如通过检查传入参数的类型或个数，然后根据不同的参数来执行不同的逻辑。另外，可以使用ES6中的Rest参数和默认参数来处理不同数量的参数情况，从而达到部分类似函数重载的效果。

综上所述，JavaScript虽然没有原生支持函数重载，但可以通过其他方式来实现类似的功能。

JavaScript 函数的返回值

JavaScript函数可以通过return语句返回一个值。当函数执行到return语句时，函数将会立即停止执行并返回指定的值。在JavaScript中，函数可以返回任何类型的值，包括基本数据类型（如数字、字符串、布尔值）、对象和数组等。

下面是一些关于JavaScript函数返回值的示例：

返回数字类型：

function add(a, b) {
    return a + b;
}
let result = add(2, 3); // 结果为 5

返回字符串类型：

function greet(name) {
    return "Hello, " + name + "!";
}
let greeting = greet("Alice"); // 结果为 "Hello, Alice!"

返回对象类型：

function createPerson(name, age) {
    return { name: name, age: age };
}
let person = createPerson("Bob", 30); // 结果为 { name: "Bob", age: 30 }

返回数组类型：

function getEvenNumbers(numbers) {
    return numbers.filter(num => num % 2 === 0);
}
let evens = getEvenNumbers([1, 2, 3, 4, 5]); // 结果为 [2, 4]

需要注意的是，函数可以有多个return语句，但一旦执行到其中一个return语句，函数就会立即结束并返回相应的值，后面的代码不会再执行。如果函数没有明确指定返回值，则默认返回undefined。因此，在编写函数时，务必考虑返回值的情况，以便实现所需的功能和数据传递。

JavaScript 局部变量

在JavaScript中，局部变量是在函数内部声明的变量，只能在声明它们的函数内部访问。局部变量具有函数作用域，即在声明它们的函数内部可见，而在函数外部不可见。

下面是一个关于JavaScript局部变量的示例：

function myFunction() {
    let localVar = 10; // 声明一个局部变量
    console.log(localVar); // 在函数内部可以访问局部变量
    // 在这里可以访问全局变量，比如：
    // console.log(globalVar);
}
myFunction();
console.log(localVar); // 报错，局部变量在函数外部不可见

在上面的示例中，localVar就是一个局部变量，只能在myFunction()函数内部访问。在函数外部尝试访问该局部变量会导致错误。

局部变量的优点是可以限制变量的作用范围，避免命名冲突，并提高代码的可维护性。使用局部变量可以在函数内部创建临时变量，进行临时存储和计算，同时避免对其他部分造成影响。

需要注意的是，JavaScript中没有块级作用域（ES6引入了let和const关键字来创建块级作用域），因此局部变量的作用范围仅限于声明它们的函数内部。

JavaScript 全局变量

JavaScript中的全局变量是在全局作用域中声明的变量，可以在代码的任何地方访问。在浏览器环境下，通常是在页面加载时声明的；而在Node.js环境下，则可以通过global对象来访问。全局变量的特点是可以在任何位置访问，但也容易导致命名冲突和不可预测的影响。

下面详细解释一下全局变量，并给出示例：

全局变量的特点：

全局可访问性：可以在代码的任何位置访问全局变量，不受作用域的限制。
易于命名冲突：由于全局变量在整个代码中都可见，如果命名不当，容易与其他全局变量或局部变量发生冲突，导致意外的结果。
不可预测的影响：全局变量的改变会影响整个程序的行为，可能导致难以追踪和调试的问题。

示例：

在浏览器环境中声明全局变量：

var globlVar = "I am a global variable"; //

这段代码在浏览器环境中声明了一个全局变量globalVar，它可以在页面的任何地方访问。

在页面中声明全局变量：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Global Variable Example</title>
</head>
<body>
<script>
    var globalVar = "I am a global variable"; // 声明一个全局变量
    function myFunction() {
        console.log(globalVar); // 在任何地方都可以访问到全局变量
    }
</script>
<button onclick="myFunction()">Click me</button>
</body>
</html>

在这个例子中，globalVar是在页面中声明的全局变量，可以在页面的任何地方访问到。点击按钮会调用myFunction函数，并在控制台输出全局变量globalVar的值。

全局变量在 JavaScript 中具有全局可访问性，但需要注意避免命名冲突和不可预测的影响。

JavaScript未声明的变量

JavaScript 中未声明的变量指的是在使用之前没有通过 var, let, 或 const 关键字声明的变量。当你尝试使用未声明的变量时，JavaScript 引擎会抛出一个 ReferenceError 错误，因为它无法找到该变量的定义。

下面是关于 JavaScript 未声明变量的一些重要信息：

特点：

引发错误：当尝试访问未声明的变量时，JavaScript 引擎会抛出 ReferenceError 错误。
全局作用域中的影响：如果在任何地方使用未声明的变量，它将在全局作用域中创建一个全局变量（如果在浏览器环境中），这可能导致意外的行为和 bug。
严格模式下的行为：在严格模式下，访问未声明的变量将引发 ReferenceError，而不会创建全局变量。

示例：

// 未声明变量的示例
console.log(undefinedVariable); // 尝试访问未声明的变量会引发 ReferenceError
function myFunction() {
    undeclaredVar = 10; // 未使用 var、let 或 const 声明的变量
}
console.log(undeclaredVar); // 在严格模式下会抛出 ReferenceError，在非严格模式下会创建全局变量 undeclaredVar

在上面的示例中，undefinedVariable 和 undeclaredVar 都是未声明的变量。尝试访问 undefinedVariable 会引发 ReferenceError，而 undeclaredVar 在非严格模式下会创建一个全局变量。

总之，在 JavaScript 中，始终确保在使用变量之前正确声明它，以避免引发错误并提高代码的可维护性和可读性。

全局变量实现方法大全

在 JavaScript 中，函数内部的局部变量通常不可以直接被外部作用域访问，但有几种方式可以将函数内的局部变量暴露给外部作用域，具体如下：

**通过全局对象：**在函数内部，可以通过将局部变量赋值给 window 对象的属性来使其成为全局可访问的。例如，使用 window.a = a; 语句，可以在函数外部通过 window.a 访问到这个局部变量的值。
**定义全局变量：**在函数内部不使用 var、let 或 const 等关键字声明变量时，该变量会被视为全局变量，从而可以在函数外部访问。但这种做法通常不推荐，因为它可能导致意外的副作用和代码难以维护。
**返回值：**可以通过在函数内部使用 return 语句返回局部变量的值，然后在函数外部接收这个返回值。这样，虽然局部变量本身不会被暴露，但其值可以通过函数调用传递到外部。
**闭包：**JavaScript 中的闭包特性允许内部函数访问外部函数的局部变量。即使外部函数执行完毕后，其局部变量仍然可以被内部函数引用。
**属性和方法：**定义在全局作用域中的变量和函数都会变成 window 对象的属性和方法，因此可以在调用时省略 window，直接使用变量名或函数名。

10 JavaScript学习：函数

函数的概念

JavaScript 函数定义

JavaScript 函数调用

JavaScript 函数的参数

JavaScript 函数的返回值

JavaScript 局部变量

JavaScript 全局变量

JavaScript未声明的变量

全局变量实现方法大全

关注我，不迷路，共学习，同进步

热门文章

最新文章

相关课程

相关电子书