Javascript教程

Appearance

JavaScript 函数调用 ​

函数调用的概念 ​

函数调用是指执行函数体中的代码，并可能传递参数和返回结果。在 JavaScript 中，函数调用的方式有多种，每种方式都有其特点和适用场景。

函数调用的方式 ​

1. 直接调用 ​

直接调用是最常见的函数调用方式，使用函数名后跟括号：

javascript
function add(a, b) {
  return a + b;
}

const result = add(5, 10);
console.log(result); // 输出: 15

// 函数表达式的直接调用
const subtract = function (a, b) {
  return a - b;
};

const result2 = subtract(10, 5);
console.log(result2); // 输出: 5

// 箭头函数的直接调用
const multiply = (a, b) => a * b;

const result3 = multiply(5, 10);
console.log(result3); // 输出: 50

2. 作为对象方法调用 ​

当函数作为对象的属性时，称为方法，可以通过对象调用：

javascript
const person = {
  name: "John",
  greet: function () {
    return `Hello, ${this.name}!`;
  },
  // 简写方法
  sayHello() {
    return `Hello, ${this.name}!`;
  },
};

console.log(person.greet()); // 输出: Hello, John!
console.log(person.sayHello()); // 输出: Hello, John!

3. 使用 call() 方法调用 ​

call() 方法允许设置 this 的值，并传递参数：

javascript
function greet(message) {
  return `${message}, ${this.name}!`;
}

const person = {
  name: "John",
};

const result = greet.call(person, "Hello");
console.log(result); // 输出: Hello, John!

// 传递多个参数
function add(a, b) {
  return a + b;
}

const result2 = add.call(null, 5, 10);
console.log(result2); // 输出: 15

4. 使用 apply() 方法调用 ​

apply() 方法与 call() 类似，但参数是作为数组传递的：

javascript
function greet(message) {
  return `${message}, ${this.name}!`;
}

const person = {
  name: "John",
};

const result = greet.apply(person, ["Hello"]);
console.log(result); // 输出: Hello, John!

// 传递多个参数
function add(a, b) {
  return a + b;
}

const result2 = add.apply(null, [5, 10]);
console.log(result2); // 输出: 15

// 使用数组展开
const numbers = [1, 2, 3, 4, 5];
const max = Math.max.apply(null, numbers);
console.log(max); // 输出: 5

5. 使用 bind() 方法调用 ​

bind() 方法创建一个新函数，设置 this 的值，并可以绑定部分参数：

javascript
function greet(message) {
  return `${message}, ${this.name}!`;
}

const person = {
  name: "John",
};

const boundGreet = greet.bind(person);
console.log(boundGreet("Hello")); // 输出: Hello, John!

// 绑定部分参数
function add(a, b) {
  return a + b;
}

const add5 = add.bind(null, 5);
console.log(add5(10)); // 输出: 15

6. 作为构造函数调用 ​

使用 new 关键字调用函数，创建一个新对象：

javascript
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function () {
    return `Hello, my name is ${this.name}!`;
  };
}

const person = new Person("John", 30);
console.log(person.name); // 输出: John
console.log(person.age); // 输出: 30
console.log(person.greet()); // 输出: Hello, my name is John!

// 注意：箭头函数不能作为构造函数
const PersonArrow = (name, age) => {
  this.name = name;
  this.age = age;
};

// const person2 = new PersonArrow('John', 30); // 错误：PersonArrow 不是构造函数

7. 立即执行函数调用 ​

立即执行函数表达式 (IIFE) 会在定义后立即执行：

javascript
(function () {
  console.log("This function executes immediately");
})();

// 带参数的 IIFE
(function (name) {
  console.log(`Hello, ${name}!`);
})("John");

// 箭头函数形式
(() => {
  console.log("Arrow function IIFE");
})();

8. 递归调用 ​

函数可以调用自身，称为递归：

javascript
function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 输出: 120

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 输出: 55

函数调用的特性 ​

1. this 关键字 ​

在函数内部，this 关键字指向调用函数的对象：

javascript
function greet() {
  return `Hello, ${this.name}!`;
}

const person1 = {
  name: "John",
  greet: greet,
};

const person2 = {
  name: "Jane",
  greet: greet,
};

console.log(person1.greet()); // 输出: Hello, John!
console.log(person2.greet()); // 输出: Hello, Jane!

// 箭头函数中的 this
const person3 = {
  name: "John",
  greet: () => {
    return `Hello, ${this.name}!`; // 箭头函数中的 this 指向外部作用域
  },
};

console.log(person3.greet()); // 输出: Hello, undefined!

2. 返回值 ​

函数可以通过 return 语句返回值：

javascript
function add(a, b) {
  return a + b;
}

const result = add(5, 10);
console.log(result); // 输出: 15

// 没有 return 语句的函数返回 undefined
function greet() {
  console.log("Hello!");
}

const result2 = greet();
console.log(result2); // 输出: undefined

// return 语句后的代码不会执行
function add(a, b) {
  return a + b;
  console.log("This code will not execute");
}

console.log(add(5, 10)); // 输出: 15

3. 函数调用栈 ​

每次函数调用都会创建一个新的执行上下文，并压入调用栈：

javascript
function foo() {
  console.log("foo");
  bar();
}

function bar() {
  console.log("bar");
  baz();
}

function baz() {
  console.log("baz");
}

foo(); // 输出: foo, bar, baz

4. 异步函数调用 ​

异步函数调用不会阻塞主线程，而是在后台执行：

javascript
// 回调函数
function fetchData(callback) {
  setTimeout(() => {
    const data = { id: 1, name: "John" };
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data); // 1秒后输出: { id: 1, name: 'John' }
});

// Promise
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John" };
      resolve(data);
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // 1秒后输出: { id: 1, name: 'John' }
});

// async/await
async function getData() {
  const data = await fetchData();
  console.log(data); // 1秒后输出: { id: 1, name: 'John' }
}

getData();

函数调用的最佳实践 ​

1. 选择合适的调用方式 ​

根据具体场景选择合适的函数调用方式：

  • 直接调用：适用于独立函数
  • 作为对象方法调用：适用于与对象相关的操作
  • call()/apply()：适用于需要设置 this 值的场景
  • bind()：适用于需要创建绑定了 this 值的新函数
  • new：适用于创建对象实例

2. 避免使用 eval() 调用函数 ​

eval() 函数执行字符串形式的代码，安全性差，性能低，应该避免使用：

javascript
// 不好的做法
const functionName = "add";
eval(`${functionName}(5, 10)`);

// 好的做法
const functions = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

const functionName = "add";
functions[functionName](5, 10);

3. 使用箭头函数简化回调 ​

对于简短的回调函数，使用箭头函数可以使代码更简洁：

javascript
// 好的做法
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

// 不好的做法
const doubled2 = numbers.map(function (num) {
  return num * 2;
});
console.log(doubled2); // 输出: [2, 4, 6, 8, 10]

4. 合理使用递归 ​

递归可以使代码更简洁，但对于深层递归可能导致栈溢出，应该注意：

javascript
// 好的做法：使用尾递归
function factorial(n, accumulator = 1) {
  if (n === 0) {
    return accumulator;
  }
  return factorial(n - 1, n * accumulator);
}

console.log(factorial(5)); // 输出: 120

// 不好的做法：深层递归可能导致栈溢出
function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// console.log(fibonacci(100)); // 可能导致栈溢出

5. 处理异步函数调用 ​

对于异步函数调用，使用 Promise 或 async/await 可以使代码更清晰：

javascript
// 好的做法：使用 async/await
async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
}

// 好的做法：使用 Promise
function fetchData() {
  return fetch("https://api.example.com/data")
    .then((response) => response.json())
    .catch((error) => {
      console.error("Error fetching data:", error);
      throw error;
    });
}

// 不好的做法：嵌套回调（回调地狱）
function fetchData(callback) {
  fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => {
      fetch(`https://api.example.com/data/${data.id}`)
        .then((response) => response.json())
        .then((detail) => {
          callback(detail);
        });
    });
}

函数调用的常见错误 ​

1. 忘记调用函数 ​

忘记添加括号会导致函数本身被返回，而不是函数的执行结果：

javascript
function add(a, b) {
  return a + b;
}

// 错误：忘记调用函数
const result = add; // result 是函数本身
console.log(result); // 输出: function add(a, b) { return a + b; }

// 正确：调用函数
const result2 = add(5, 10); // result2 是函数的执行结果
console.log(result2); // 输出: 15

2. 混淆函数声明和函数表达式 ​

函数声明会被提升，函数表达式不会：

javascript
// 正确：函数声明会被提升
console.log(add(5, 10)); // 输出: 15

function add(a, b) {
  return a + b;
}

// 错误：函数表达式不会被提升
// console.log(subtract(10, 5)); // 错误：subtract 未定义

const subtract = function (a, b) {
  return a - b;
};

3. this 指向错误 ​

在嵌套函数或回调函数中，this 的指向可能与预期不符：

javascript
const person = {
  name: "John",
  greet: function () {
    // 错误：嵌套函数中的 this 指向全局对象
    function nestedGreet() {
      return `Hello, ${this.name}!`;
    }
    return nestedGreet();
  },
};

console.log(person.greet()); // 输出: Hello, undefined!

// 正确：使用箭头函数
const person2 = {
  name: "John",
  greet: function () {
    // 箭头函数中的 this 继承外部作用域的 this
    const nestedGreet = () => {
      return `Hello, ${this.name}!`;
    };
    return nestedGreet();
  },
};

console.log(person2.greet()); // 输出: Hello, John!

// 正确：保存 this
const person3 = {
  name: "John",
  greet: function () {
    const self = this;
    function nestedGreet() {
      return `Hello, ${self.name}!`;
    }
    return nestedGreet();
  },
};

console.log(person3.greet()); // 输出: Hello, John!

4. 递归没有终止条件 ​

递归函数必须有终止条件，否则会导致无限递归：

javascript
// 错误：没有终止条件
function infiniteLoop() {
  console.log("Infinite loop");
  infiniteLoop();
}

// infiniteLoop(); // 会导致栈溢出

// 正确：有终止条件
function countdown(n) {
  if (n === 0) {
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(5); // 输出: 5, 4, 3, 2, 1

小结 ​

JavaScript 提供了多种函数调用方式，每种方式都有其特点和适用场景。理解这些调用方式，以及它们如何影响 this 的指向和函数的执行，是编写高质量 JavaScript 代码的重要组成部分。在实际开发中，应该根据具体场景选择合适的调用方式，并遵循最佳实践，以提高代码的可读性、可维护性和性能。

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1