函数 (Function)

函数是JavaScript中最基础也是最强大的概念之一，它允许我们封装可重用的代码逻辑，实现模块化编程，并支持高阶函数等高级特性。从简单的数学计算到复杂的应用程序架构，函数无处不在，是构建JavaScript应用的核心基石。

本章将详细介绍JavaScript函数的各种定义方式、参数传递机制、作用域特性、以及call/apply/bind等高级用法，帮助你全面掌握函数的使用技巧。

函数声明

函数声明是定义函数的最基本方式，使用function关键字后跟函数名和参数列表。

函数声明语法

function functionName(parameters) {
  // 函数体
  return value; // 可选
}

函数声明提升 (Hoisting)

JavaScript引擎会在代码执行前将函数声明提升到当前作用域的顶部，这意味着你可以在函数声明之前调用函数。

// 可以在函数声明前调用
console.log(add(2, 3)); // 5

// 函数声明
function add(a, b) {
  return a + b;
}

示例

// 基本函数声明
function calculateSum(a, b) {
  return a + b;
}

console.log(calculateSum(2, 3)); // 5

// 多参数函数
function greet(name, age, city) {
  return `Hello, ${name}! You are ${age} years old and from ${city}.`;
}

console.log(greet("John", 30, "New York")); // "Hello, John! You are 30 years old and from New York."

函数命名最佳实践

• 使用描述性名称，清晰表达函数的功能
• 采用驼峰命名法(camelCase)
• 避免使用保留字和关键字
• 对于返回布尔值的函数，可使用is/has等前缀
• 对于操作类函数，可使用动词开头

// 好的命名
function isValidEmail(email) { /* ... */ }
function calculateTotalPrice(items) { /* ... */ }

// 不推荐的命名
function check(email) { /* ... */ } // 不够具体
function total(items) { /* ... */ } // 不够清晰

函数表达式

函数表达式是将函数作为值赋值给变量的方式，这使得函数可以像其他值一样被传递和操作。

函数表达式与函数声明的区别

• 提升行为：函数声明会被提升到作用域顶部，而函数表达式不会
• 命名：函数表达式可以是匿名的，也可以是命名的
• 上下文：函数表达式更适合用作回调函数或在条件语句中定义函数

// 函数声明提升 - 可以提前调用
console.log(add(2, 3)); // 5
function add(a, b) { return a + b; }

// 函数表达式 - 不能提前调用
console.log(multiply(2, 3)); // 报错: multiply is not defined
const multiply = function(a, b) { return a * b; };

匿名函数表达式

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(2, 3)); // 6

命名函数表达式

命名函数表达式有助于调试，因为错误栈跟踪会显示函数名。

const divide = function divide(a, b) {
  if (b === 0) {
    throw new Error("除数不能为0");
  }
  return a / b;
};

console.log(divide(6, 3)); // 2

函数表达式作为回调函数

函数表达式常用于作为其他函数的参数（回调函数）：

// 数组方法中的回调
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

// 定时器中的回调
setTimeout(function() {
  console.log("延迟执行的代码");
}, 1000);

函数表达式与闭包

函数表达式常与闭包结合使用，创建私有变量和封装逻辑：

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

参数

函数参数是函数与外部世界交互的接口，JavaScript提供了多种灵活的参数处理机制。

参数传递机制

JavaScript中参数传递遵循"按值传递"原则，但对于对象类型，传递的是引用的副本（地址值）。

// 基本类型 - 按值传递
function increment(num) {
  num += 1;
  return num;
}

let count = 5;
console.log(increment(count)); // 6
console.log(count); // 5 (原始值不变)

// 对象类型 - 传递引用的副本
function updateName(person) {
  person.name = "Jane";
}

const john = { name: "John" };
updateName(john);
console.log(john.name); // "Jane" (对象被修改)

// 但重新赋值不会影响原始引用
function replacePerson(person) {
  person = { name: "Jane" };
}

replacePerson(john);
console.log(john.name); // 仍然是 "Jane" (未被替换)

基本参数

function greet(name, message) {
  return message + ", " + name + "!";
}

console.log(greet("John", "Hello")); // "Hello, John!"

// 传递少于期望的参数
console.log(greet("John")); // "undefined, John!"

// 传递多于期望的参数
console.log(greet("John", "Hello", "Extra")); // "Hello, John!" (多余参数被忽略)

arguments 对象

arguments是一个类数组对象，包含了函数调用时传递的所有参数。它只在函数内部可用，并且提供了对参数的访问。

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

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

arguments 对象的特性

1. 类数组：arguments不是真正的数组，但可以通过索引访问元素，并有length属性
2. callee：指向当前正在执行的函数（不推荐使用，在严格模式下被禁止）
3. 修改参数：修改arguments中的元素会影响对应的形参（除非在严格模式下）

// 修改arguments会影响形参
function test(a) {
  console.log(a); // 1
  arguments[0] = 10;
  console.log(a); // 10
}

test(1);

// 严格模式下不会影响
function strictTest(a) {
  "use strict";
  console.log(a); // 1
  arguments[0] = 10;
  console.log(a); // 1
}

strictTest(1);

arguments 对象的应用场景

1. 处理可变数量的参数

function average() {
  if (arguments.length === 0) return 0;
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum / arguments.length;
}

console.log(average(1, 2, 3, 4, 5)); // 3

2. 函数重载

function add() {
  if (arguments.length === 0) {
    return 0;
  } else if (arguments.length === 1) {
    return arguments[0];
  } else {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
      sum += arguments[i];
    }
    return sum;
  }
}

console.log(add()); // 0
console.log(add(5)); // 5
console.log(add(1, 2, 3)); // 6

注意：在ES6及以后的版本中，推荐使用剩余参数(rest parameters)代替arguments对象，因为剩余参数是真正的数组，并且在严格模式和非严格模式下表现一致。

参数验证

良好的函数应该对输入参数进行验证：

function calculateArea(radius) {
  // 参数类型验证
  if (typeof radius !== "number") {
    throw new TypeError("半径必须是数字");
  }
  // 参数值验证
  if (radius <= 0) {
    throw new Error("半径必须大于0");
  }
  return Math.PI * radius * radius;
}

参数传递最佳实践

• 保持参数列表简洁，避免过多参数（建议不超过3-4个）
• 对于多个相关参数，考虑使用对象传递
• 对关键参数进行验证
• 适当使用默认参数提高API的健壮性
• 对于不确定数量的参数，使用剩余参数替代arguments

返回值

函数的返回值是函数执行完成后传递给调用者的结果，JavaScript函数可以返回任何类型的值。

返回值类型

JavaScript函数可以返回任何有效数据类型，包括原始类型和引用类型：

// 返回数字
function add(a, b) {
  return a + b;
}

// 返回字符串
function getGreeting(name) {
  return `Hello, ${name}!`;
}

// 返回布尔值
function isEven(num) {
  return num % 2 === 0;
}

// 返回对象
function createPerson(name, age) {
  return {
    name,
    age
  };
}

// 返回函数
function createMultiplier(factor) {
  return function(num) {
    return num * factor;
  };
}

提前返回

使用return语句可以提前退出函数，这在条件判断中特别有用，可以减少嵌套层级：

function validateUser(user) {
  // 检查用户是否存在
  if (!user) {
    return { valid: false, message: "用户不存在" };
  }

  // 检查用户名
  if (!user.name || user.name.length < 3) {
    return { valid: false, message: "用户名至少需要3个字符" };
  }

  // 检查年龄
  if (!user.age || user.age < 18) {
    return { valid: false, message: "年龄必须满18岁" };
  }

  // 全部验证通过
  return { valid: true, message: "用户验证通过" };
}

返回对象字面量的注意事项

当直接返回对象字面量时，需要用括号包裹，否则JavaScript会将花括号解析为函数体的一部分：

// 函数返回对象
function createUser(name) {
  return {
    name: name
  };
}

链式调用

通过返回对象自身（this），可以实现方法的链式调用：

const calculator = {
  value: 0,

  add(num) {
    this.value += num;
    return this; // 返回对象自身
  },

  subtract(num) {
    this.value -= num;
    return this;
  },

  multiply(num) {
    this.value *= num;
    return this;
  },

  getResult() {
    return this.value;
  }
};

const result = calculator.add(5).subtract(2).multiply(3).getResult();
console.log(result); // 9

无返回值的函数

如果函数没有明确的return语句，或者return后没有值，则函数默认返回undefined：

function noReturn() {
  // 没有return语句
}

function returnNothing() {
  return;
}

console.log(noReturn()); // undefined
console.log(returnNothing()); // undefined

返回值最佳实践

• 保持返回值类型一致性，避免同一函数返回不同类型的值
• 对于复杂逻辑，使用提前返回来减少嵌套层级
• 明确函数的职责，一个函数最好只返回一种类型的结果
• 对于可能失败的操作，返回包含状态和消息的对象，而不是抛出异常
• 利用返回this实现链式调用，提高API的可用性

函数作用域

作用域决定了变量的可访问范围，函数作用域是指在函数内部声明的变量只能在函数内部访问。

基本函数作用域

函数内部声明的变量具有函数作用域，外部无法访问：

function myFunction() {
  const internalVar = "我是函数内部的变量";
  console.log(internalVar); // 可以访问: 我是函数内部的变量
}

myFunction();
console.log(internalVar); // 报错: internalVar is not defined

作用域链

当函数嵌套时，内部函数可以访问外部函数的变量，形成作用域链：

function outerFunction() {
  const outerVar = "外部变量";

  function innerFunction() {
    const innerVar = "内部变量";
    console.log(outerVar); // 可以访问外部变量: 外部变量
    console.log(innerVar); // 可以访问内部变量: 内部变量
  }

  innerFunction();
  console.log(innerVar); // 报错: innerVar is not defined
}

outerFunction();

变量提升

在函数作用域中，变量声明会被提升到函数顶部，但赋值不会：

function myFunction() {
  console.log(x); // undefined (变量声明被提升，但值未被赋值)
  var x = 5;
  console.log(x); // 5
}

myFunction();

// 等价于
function myFunction() {
  var x; // 声明被提升
  console.log(x); // undefined
  x = 5; // 赋值仍在原地
  console.log(x); // 5
}

函数作用域与块级作用域

在ES6之前，JavaScript只有全局作用域和函数作用域，没有块级作用域（由{}包围的代码块）：

// 函数作用域
function myFunction() {
  if (true) {
    var blockVar = "块内变量";
  }
  console.log(blockVar); // 可以访问: 块内变量
}

闭包基础

函数能够访问其词法作用域之外的变量，即使函数在其定义作用域之外执行，这就是闭包的基础：

function createGreeter(greeting) {
  // greeting 被闭包捕获
  return function(name) {
    return `${greeting}, ${name}!`;
  };
}

const sayHello = createGreeter("Hello");
const sayHi = createGreeter("Hi");

console.log(sayHello("John")); // Hello, John!
console.log(sayHi("Jane")); // Hi, Jane!

函数作用域最佳实践

• 尽量减少全局变量的使用，避免污染全局作用域
• 适当使用闭包封装私有变量和逻辑
• 优先使用let/const创建块级作用域变量，避免var的变量提升带来的问题
• 保持函数的作用域链简短，避免过深的嵌套
• 明确定义变量的作用域，提高代码的可读性和可维护性

高阶函数

高阶函数是指接受函数作为参数或返回函数的函数，是函数式编程的核心概念之一。

基本概念

• 接受函数作为参数
• 返回函数

// 接受函数作为参数
function doOperation(a, b, operation) {
  return operation(a, b);
}

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

console.log(doOperation(2, 3, add)); // 5
console.log(doOperation(2, 3, multiply)); // 6

// 返回函数
function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

常见高阶函数应用场景

1. 数组方法

JavaScript数组提供了许多内置高阶函数：

const numbers = [1, 2, 3, 4, 5];

// map: 转换数组元素
const doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

// filter: 筛选数组元素
const evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens); // [2, 4]

// reduce: 归约数组
const sum = numbers.reduce(function(total, num) {
  return total + num;
}, 0);
console.log(sum); // 15

// forEach: 遍历数组
numbers.forEach(function(num) {
  console.log(num);
}); // 1, 2, 3, 4, 5

2. 函数组合

将多个函数组合成一个新函数：

function compose() {
  const functions = Array.from(arguments);
  return function(arg) {
    return functions.reduceRight(function(result, fn) {
      return fn(result);
    }, arg);
  };
}

function double(x) { return x * 2; }
function addOne(x) { return x + 1; }
function square(x) { return x * x; }

// 组合函数: square(addOne(double(x)))
const calculate = compose(square, addOne, double);
console.log(calculate(3)); // (3*2+1)^2 = 49

3. 柯里化

将接受多个参数的函数转换为接受单一参数的函数序列：

function curry(fn) {
  return function curried() {
    const args = Array.from(arguments);
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function() {
      const moreArgs = Array.from(arguments);
      return curried.apply(this, args.concat(moreArgs));
    };
  };
}

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

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

4. 防抖与节流

高阶函数常用于实现防抖和节流功能：

// 防抖: 事件触发后等待一段时间再执行
function debounce(fn, delay) {
  let timer;
  return function() {
    const args = Array.from(arguments);
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(this, args);
    }.bind(this), delay);
  };
}

// 节流: 限制函数在一定时间内只能执行一次
function throttle(fn, interval) {
  let lastTime = 0;
  return function() {
    const args = Array.from(arguments);
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

高阶函数实战示例

1. 数据处理管道

// 数据处理管道
const processData = compose(
  function(data) {
    return data.filter(function(item) {
      return item.active;
    });
  },
  function(data) {
    return data.map(function(item) {
      const newItem = {};
      for (const key in item) {
        newItem[key] = item[key];
      }
      newItem.score = item.score * 2;
      return newItem;
    });
  },
  function(data) {
    return data.sort(function(a, b) {
      return b.score - a.score;
    });
  }
);

const rawData = [
  {id: 1, name: 'A', score: 80, active: true},
  {id: 2, name: 'B', score: 90, active: false},
  {id: 3, name: 'C', score: 70, active: true}
];

const processedData = processData(rawData);
console.log(processedData);
// 输出: [
//   {id: 1, name: 'A', score: 160, active: true},
//   {id: 3, name: 'C', score: 140, active: true}
// ]

2. 条件渲染函数

// 条件渲染函数
function renderIf(condition) {
  return function(trueComponent, falseComponent) {
    falseComponent = falseComponent || null;
    return condition ? trueComponent : falseComponent;
  };
}

const isLoggedIn = true;
const WelcomeMessage = 'Welcome back!';
const LoginPrompt = 'Please log in.';

const renderWelcome = renderIf(isLoggedIn);
console.log(renderWelcome(WelcomeMessage, LoginPrompt)); // 输出: Welcome back!

高阶函数最佳实践

• 保持高阶函数的单一职责
• 为函数参数和返回值提供清晰的类型注释
• 避免过深的函数嵌套，保持代码可读性
• 利用函数组合减少重复代码
• 适当使用柯里化使函数更加灵活

递归函数

递归函数是指在函数体内部调用自身的函数，是解决某些复杂问题的优雅方法。

递归的工作原理

递归函数通过将问题分解为更小的子问题来解决复杂问题，包含两个关键部分：

1. 基本情况（Base Case）：终止递归的条件
2. 递归情况（Recursive Case）：调用自身解决子问题

// 计算阶乘
function factorial(n) {
  // 基本情况
  if (n === 0 || n === 1) {
    return 1;
  }
  // 递归情况
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120
// 执行过程:
// factorial(5) = 5 * factorial(4)
// factorial(4) = 4 * factorial(3)
// factorial(3) = 3 * factorial(2)
// factorial(2) = 2 * factorial(1)
// factorial(1) = 1 (基本情况)

递归的优缺点

优点

• 代码简洁优雅，接近数学表达
• 适合解决分治问题（如树结构遍历、排序算法等）
• 某些问题用递归比迭代更直观

缺点

• 可能导致栈溢出（大量递归调用）
• 可能存在重复计算
• 性能通常比迭代低

常见递归算法

1. 斐波那契数列

// 斐波那契数列: 1, 1, 2, 3, 5, 8, 13, ...
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 优化版本（避免重复计算）
function fibonacciMemo(n, memo) {
  memo = memo || {};
  if (n <= 1) return n;
  if (memo[n]) return memo[n];
  memo[n] = fibonacciMemo(n - 1, memo) + fibonacciMemo(n - 2, memo);
  return memo[n];
}

console.log(fibonacci(10)); // 55
console.log(fibonacciMemo(10)); // 55

2. 深度优先搜索

// 树的深度优先遍历
function traverseTree(node) {
  if (!node) return;
  console.log(node.value);
  traverseTree(node.left);
  traverseTree(node.right);
}

// 使用示例
const tree = {
  value: 1,
  left: {
    value: 2,
    left: { value: 4 },
    right: { value: 5 }
  },
  right: {
    value: 3,
    left: { value: 6 },
    right: { value: 7 }
  }
};

traverseTree(tree); // 1, 2, 4, 5, 3, 6, 7

3. 数组扁平化

// 递归扁平化嵌套数组
function flattenArray(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenArray(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

const nestedArray = [1, [2, 3], [4, [5, 6]]];
console.log(flattenArray(nestedArray)); // [1, 2, 3, 4, 5, 6]

尾递归优化

尾递归是指递归调用是函数体中最后执行的操作，某些JavaScript引擎会对尾递归进行优化，避免栈溢出。

// 非尾递归阶乘
function factorialNonTail(n) {
  if (n === 1) return 1;
  return n * factorialNonTail(n - 1); // 递归调用后还有乘法操作
}

// 尾递归阶乘
function factorialTail(n, accumulator) {
  accumulator = accumulator || 1;
  if (n === 0) return accumulator;
  return factorialTail(n - 1, n * accumulator); // 递归调用是最后一个操作
}

递归最佳实践

• 确保有明确的基本情况终止递归
• 避免重复计算（使用记忆化）
• 考虑尾递归优化以避免栈溢出
• 对于大规模数据，优先考虑迭代方案
• 递归深度不宜过深（通常不超过1000层）

立即执行函数表达式 (IIFE)

立即执行函数表达式（IIFE）是定义后立即执行的函数，常用于创建独立的作用域。

IIFE的基本语法

// 第一种形式：用括号包裹函数表达式
(function() {
  console.log("我会立即执行");
})();

// 第二种形式：使用一元运算符
!function() {
  console.log("我也会立即执行");
}();

// 带参数的IIFE
(function(name, age) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
})('John', 30);

IIFE的作用

1. 创建独立作用域：避免变量污染全局作用域
2. 封装私有变量：实现信息隐藏
3. 模块化：在ES模块出现前，用于实现模块化
4. 立即执行代码：需要在页面加载时立即执行的代码

// 避免全局污染
(function() {
  var privateVar = "私有变量";
  function privateFunction() {
    return privateVar;
  }
  // 暴露公共接口
  window.publicAPI = {
    getPrivateVar: privateFunction
  };
})();

console.log(publicAPI.getPrivateVar()); // "私有变量"
console.log(privateVar); // 报错: privateVar is not defined

IIFE的使用场景

1. 库和框架的封装

// jQuery的核心实现方式
(function(window, document, undefined) {
  // 库代码...
  window.jQuery = window.$ = jQuery;
})(window, document);

2. 初始化代码

// 页面加载时初始化
(function() {
  // 初始化代码
  const app = document.getElementById('app');
  app.innerHTML = '<h1>应用已启动</h1>';
})();

3. 闭包与数据封装

// 创建计数器
const counter = (function() {
  let count = 0;
  return {
    increment: function() { count++;
 return count; },
    decrement: function() { count--;
 return count; },
    getCount: function() { return count; }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2

IIFE最佳实践

• 在ES6环境下，优先使用块级作用域和模块
• 对于需要支持旧浏览器的代码，IIFE仍然是有效的封装方式
• 保持IIFE的简洁，避免在其中放置过多代码
• 使用注释说明IIFE的目的
• 对于简单的立即执行代码，可考虑使用箭头函数IIFE提高可读性

函数的方法

函数作为对象，也拥有自己的方法，其中最常用的是call、apply和bind，它们用于控制函数执行时的this上下文。

call、apply 和 bind 的基本概念

这三个方法的核心作用是改变函数执行时的this绑定，但它们在使用方式和应用场景上有所不同：

• call：接受多个参数，第一个参数是this值，后续参数是函数调用的参数
• apply：接受两个参数，第一个参数是this值，第二个参数是包含函数调用参数的数组
• bind：创建一个新函数，将this绑定到指定值，不立即执行

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  },
  greet: function(greeting, punctuation) {
    return greeting + ", " + this.firstName + " " + this.lastName + punctuation;
  }
};

var john = { firstName: "John", lastName: "Doe" };
var jane = { firstName: "Jane", lastName: "Smith" };

// call 方法
// call方法接受的参数是逗号分隔的参数列表
console.log(person.fullName.call(john)); // "John Doe"
console.log(person.greet.call(jane, "Hello", "!")); // "Hello, Jane Smith!"

// apply 方法
// apply方法接受的参数是一个数组
console.log(person.fullName.apply(john)); // "John Doe"
console.log(person.greet.apply(jane, ["Hi", "."])); // "Hi, Jane Smith."

// bind 方法
// bind方法创建一个新函数，并永久绑定this指向
var greetJohn = person.greet.bind(john);
console.log(greetJohn("Hey", "!")); // "Hey, John Doe!"

// bind 方法可以预设部分参数
var greetJohnWithHi = person.greet.bind(john, "Hi");
console.log(greetJohnWithHi("!")); // "Hi, John Doe!"

call、apply 和 bind 的对比

方法	作用	参数传递	返回值	调用时机
call	改变this指向	逗号分隔的参数列表	函数执行结果	立即调用
apply	改变this指向	数组形式的参数列表	函数执行结果	立即调用
bind	改变this指向	逗号分隔的参数列表	新函数	延迟调用

实际应用示例

// 使用call调用函数并传递参数
function sayHello(greeting, punctuation) {
  return greeting + ', ' + this.name + punctuation;
}

var person = { name: 'John' };
console.log(sayHello.call(person, 'Hello', '!')); // "Hello, John!"

// 使用apply调用函数并传递数组参数
var args = ['Hi', '.'];
console.log(sayHello.apply(person, args)); // "Hi, John."

// 使用bind创建新函数
var greetJohn = sayHello.bind(person, 'Hey');
console.log(greetJohn('!')); // "Hey, John!"

// 绑定回调函数的this
var timer = {
  seconds: 10,
  start: function() {
    setInterval(function() {
      this.seconds--;
      console.log(this.seconds);
    }.bind(this), 1000); // 绑定this到timer对象
  }
};
// timer.start(); // 取消注释以测试

call、apply 和 bind 的区别

方法	作用	参数传递	执行方式	返回值
call	改变this上下文	多个参数直接传递	立即执行	函数执行结果
apply	改变this上下文	参数放在数组中传递	立即执行	函数执行结果
bind	改变this上下文	多个参数直接传递	延迟执行	新函数

常见使用场景

1. 借用方法

// 借用数组方法
var arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 };
var arr = Array.prototype.slice.call(arrayLike);
console.log(arr); // ["a", "b", "c"]

// 借用对象方法
var obj1 = { value: 10 };
var obj2 = { value: 20 };

function add(a) {
  return this.value + a;
}

console.log(add.call(obj1, 5)); // 15
console.log(add.call(obj2, 5)); // 25

2. 函数柯里化

// 使用bind进行柯里化
function multiply(a, b) {
  return a * b;
}

var double = multiply.bind(null, 2);
console.log(double(5)); // 10

var triple = multiply.bind(null, 3);
console.log(triple(5)); // 15

3. 解决回调函数this指向问题

var timer = {
  seconds: 10,
  start: function() {
    // 使用bind确保回调函数中的this指向timer
    setInterval(function() {
      this.seconds--;
      console.log(this.seconds);
    }.bind(this), 1000);
  }
};

timer.start(); // 9, 8, 7, ...

4. 求数组最大值/最小值

var numbers = [5, 1, 9, 3, 7];
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);
console.log(max); // 9
console.log(min); // 1

实现原理分析

call方法的简易实现

Function.prototype.myCall = function(context) {
  // 处理context为null或undefined的情况
  context = context || window;
  // 将函数作为对象的方法
  context.fn = this;
  // 获取参数
  var args = Array.from(arguments).slice(1);
  // 调用函数
  var result = context.fn.apply(context, args);
  // 删除临时方法
  delete context.fn;
  // 返回结果
  return result;
};

apply方法的简易实现

Function.prototype.myApply = function(context, args) {
  context = context || window;
  context.fn = this;
  var result = context.fn.apply(context, args);
  delete context.fn;
  return result;
};

bind方法的简易实现

Function.prototype.myBind = function(context) {
  var fn = this;
  // 获取预设参数
  var args = Array.from(arguments).slice(1);
  // 返回新函数
  return function() {
    // 获取调用时的参数
    var moreArgs = Array.from(arguments);
    // 合并参数并调用
    return fn.apply(context, args.concat(moreArgs));
  };
};

最佳实践

• 对于简单的参数传递，call比apply更直观
• 当参数数量不确定时，apply更适合
• bind适用于需要延迟执行或预设参数的场景
• 避免过度使用这些方法，保持代码简洁可读