JavaScript高手养成记：函数调用深度解析

2023-09-05 21:12:37

函数调用：一场参数传递的舞会

在JavaScript中，函数调用就像一场参数传递的舞会，每一个参数都伴随着它的舞伴——函数体，在代码的舞台上翩翩起舞。函数调用时，实际参数会传递给形参，形参作为占位符，接收实际参数的值，以便函数体能够处理这些参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

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

在这个例子中，函数greet接受一个形参name，当调用greet("Alice")时，实际参数"Alice"被传递给name，然后函数体中的代码就会执行，将"Alice"打印到控制台。

arguments：参数的容器

JavaScript中有一个特殊的参数arguments，它是一个类数组对象，包含了函数调用过程中传递的所有参数。通过arguments参数，我们可以访问函数调用过程中传递的实际参数。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

在这个例子中，函数sum接受任意数量的参数，并通过arguments参数来访问这些参数。然后，函数使用一个for循环来遍历arguments，将每个参数累加到total变量中，最后返回total。

this：函数的默认参数

在函数调用时，除了显示提供的参数外，this参数也会默认的传递给函数。this参数指向调用函数的对象，可以通过它来访问对象属性和方法。

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: Hello, my name is Alice.