JavaScript - 函数调用

你好，未来的JavaScript法师们！今天，我们将深入探索函数调用的神奇世界。如果你是编程新手，别担心——我会成为你这段旅程中的友好向导。在本课结束时，你将能够像专业人士一样调用函数！

函数调用

让我们从基础开始。究竟什么是函数调用？其实这只是一种花哨的说法，意思是“调用一个函数”或“运行一个函数”。想象你有一个机器人（那就是你的函数），你正在给它一个命令去做某事。这就是调用！

这里有一个简单的例子：

function sayHello() {
console.log("Hello, world!");
}

sayHello(); // 这就是函数调用

在这个例子中，我们定义了一个名为 sayHello 的函数，然后通过写上它的名字后跟括号来调用它。当你运行这段代码时，你会在控制台中看到 "Hello, world!" 被打印出来。

让我们尝试一些更具交互性的东西：

function greetUser(name) {
console.log("Hello, " + name + "!");
}

greetUser("Alice"); // 输出: Hello, Alice!
greetUser("Bob");   // 输出: Hello, Bob!

在这里，我们的 greetUser 函数接受一个参数 name。当我们调用函数时，我们在括号内传递一个参数。函数然后使用这个参数来创建一个个性化的问候。

函数构造器的调用

现在，让我们来谈谈一些更高级的内容：函数构造器。这些是用于创建对象的特殊函数。如果这听起来很复杂，别担心——我会为你分解！

function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log("Hi, I'm " + this.name + " and I'm " + this.age + " years old.");
};
}

var alice = new Person("Alice", 25);
alice.greet(); // 输出: Hi, I'm Alice and I'm 25 years old.

在这个例子中，Person 是我们的函数构造器。我们使用 new 关键字来创建一个新的 Person 对象。构造器内的 this 关键字指向正在创建的新对象。

对象方法的调用

JavaScript中的对象可以拥有作为属性的函数。这些被称为方法。让我们看看如何调用它们：

var car = {
brand: "Toyota",
model: "Corolla",
startEngine: function() {
console.log("Vroom! The " + this.brand + " " + this.model + " is starting.");
}
};

car.startEngine(); // 输出: Vroom! The Toyota Corolla is starting.

在这里，startEngine 是 car 对象的一个方法。我们使用点符号调用它：car.startEngine()。

自调用函数

有时，我们希望函数在定义后立即运行。这些被称为自调用函数或立即调用的函数表达式（IIFE）。它们就像一建造就开始工作的机器人！

(function() {
console.log("我正在立即运行！");
})();
// 输出: 我正在立即运行！

这个函数在定义后立即被调用。函数周围的额外括号和在函数结束后的括号使它能够自调用。

其他调用函数的方法

在JavaScript中还有几种调用函数的方式。让我们在表格中看看它们：

方法	描述	示例
call()	使用给定的 this 值和逐个提供的参数调用函数	func.call(thisArg, arg1, arg2, ...)
apply()	与 call() 类似，但参数作为一个数组传递	func.apply(thisArg, [arg1, arg2, ...])
bind()	创建一个新的函数，具有固定的 this 值	var boundFunc = func.bind(thisArg)

让我们看看这些方法如何工作：

var person = {
fullName: function(city, country) {
console.log(this.firstName + " " + this.lastName + " lives in " + city + ", " + country);
}
}

var john = {
firstName: "John",
lastName: "Doe"
}

// 使用 call()
person.fullName.call(john, "New York", "USA");
// 输出: John Doe lives in New York, USA

// 使用 apply()
person.fullName.apply(john, ["London", "UK"]);
// 输出: John Doe lives in London, UK

// 使用 bind()
var johnInfo = person.fullName.bind(john);
johnInfo("Paris", "France");
// 输出: John Doe lives in Paris, France

在这些例子中，我们使用 call()、apply() 和 bind() 来调用 fullName 函数，带有不同的 this 值和参数。

就这样了！你刚刚学习了在JavaScript中调用函数的各种方式。记住，熟能生巧，所以不要害怕尝试这些概念。在你意识到之前，你将能够像经验丰富的程序员一样编写和调用函数！

快乐编码，愿你的函数总能成功调用！??

Credits: Image by storyset