JavaScript中 call、apply 和 bind 的区别与用法详解

核心概念：函数与上下文

JavaScript 支持函数式编程，因为函数可以像普通变量一样被赋值、存储或作为参数传递。理解 call、apply 和 bind 的基础在于掌握 this 的作用域机制：

• 上下文的定义：函数每次调用时都有一个特殊的值——本次调用的上下文（context），即 this。如果函数挂载在对象上并通过该对象调用，this 指向该对象。
• 嵌套函数的陷阱：this 没有块级作用域，但也没有词法作用域的自动继承。嵌套函数不会从外层函数继承 this。如果需要访问外层函数的 this，通常需要将其保存在一个变量中。

var o = {
 m: function() {
  var self = this;
  console.log(this === o); // true
  f();
  
  function f() {
   console.log(this === o); // false (非严格模式下为全局对象)
   console.log(self === o); // true
  }
 }
}

第一部分：直接调用与方法借用

第1步：使用 call 改变调用上下文

Function.prototype.call() 允许指定函数内部的 this 值，并接收若干个单独的参数。它的目的是让一个对象“借用”另一个对象的方法，或者临时改变运行环境。

操作入口：任意函数原型。
重要参数：第一个参数指定 this 指向的目标对象，后续参数为传递给函数的具体数值。

var o = {};
function sum(a, b) {
 return a + b;
}
// 将 sum 函数作为 o 的方法执行
sum.call(o, 1, 2); // 返回 3

第2步：使用 apply 实现参数化调用

apply() 方法与 call() 功能完全一致，唯一的区别在于参数的接收方式：apply 需要将所有实参放入一个数组（或类数组对象）中作为第二个参数。

完成判断：若参数数量不确定或本身以数组形式存在，使用 apply 更为便捷。

var o = {};
function sum(a, b) {
 return a + b;
}
// 传入数组 [1, 2]
sum.apply(o, [1, 2]); // 返回 3

第3步：利用匿名函数与数组迭代

call 常用于解决作用域隔离问题，例如在遍历数组时为每个元素动态添加方法。

var animals = [
 {species: 'Lion', name: 'King'},
 {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
 (function(i) {
  this.print = function() {
   console.log('#' + i + ' ' + this.species + ': ' + this.name);
  };
  this.print();
 }).call(animals[i], i);
}

第二部分：函数绑定与延迟执行

第4步：使用 bind 创建新函数

Function.prototype.bind() 是 ES5 新增的方法，主要作用是将函数绑定到指定的对象上，并返回一个新的函数。新函数在被调用时，其内部 this 将固定指向绑定的对象。

操作入口：目标函数。
重要参数：第一个参数为绑定目标对象，后续参数可作为默认参数传递给原函数。

function add(y) {
 return this.x + y;
}

var obj = { x: 1 };
var boundAdd = add.bind(obj);
boundAdd(2); // 返回 3

第5步：了解 bind 的实现逻辑

bind 本质上是一个高阶函数，它返回了一个闭包函数，并在执行时通过 apply 或自身调用来转发参数。

function bind(f, o) {
 if (f.bind) return f.bind(o); 
 else return function() {
  return f.apply(o, arguments);
 }
}

第三部分：结合高级编程技巧

掌握上述三个方法后，可以进一步在 JavaScript 中应用函数式编程技术，如高阶函数处理。

第6步：处理数组数据流

使用 reduce 和 map 结合自定义的高阶函数计算统计指标。

var data = [1, 1, 3, 5, 5];
var sum = (x, y) => x + y;
var square = x => x * x;

var mean = data.reduce(sum) / data.length;
var deviations = data.map(x => x - mean);
var stddev = Math.sqrt(deviations.map(square).reduce(sum) / (data.length - 1));

第7步：利用高阶函数进行逻辑组合

可以编写返回函数的高级函数，例如实现逻辑取反操作。

function not(f) {
 return function() {
  var result = f.apply(this, arguments);
  return !result;
 };
}

var even = x => x % 2 === 0;
var odd = not(even); // 创建奇数判定函数
[1, 3, 5].every(odd); // true