call,apply,bind在实际工作中可以使用的场景

在JavaScript中，改变函数内部this的指向是一个常见的需求，特别是在使用回调函数、事件处理器或者需要在某个特定对象上下文中执行函数时。call和apply和bind方法正是用来改变函数执行时this的指向的。下面我会详细解释这两种方法在实际工作中的一些应用场景。

1. 使用 call和apply，bind的场景

1.1 回调函数中的this绑定

在JavaScript中，当函数作为回调函数时，其this的值可能会变得不是你期望的那个对象。例如，在使用数组方法如Array.prototype.forEach时，回调函数内的this默认指向全局对象（在严格模式下为undefined）。此时，你可以使用call或apply来显式设置this的值。

var obj = {  
  value: 0,  
  increment: function(amount) {  
    this.value += amount;  
  }  
};  
  
[1, 2, 3].forEach(function(amount) {  
  obj.increment.bind(obj)(amount); // 显式设置this为obj  自执行
});  
  
console.log(obj.value); // 输出 6

1.2 继承

在JavaScript的伪经典继承模式中，call和apply,bind可以用来调用父类的构造函数，并设置this指向新创建的对象，从而模拟类的继承。

function Parent(name) {  
  this.name = name;  
}  
  
function Child(name, age) {  
  Parent.call(this, name); // 继承Parent的属性  
  this.age = age;  
}  
  
var child = new Child('Alice', 30);  
console.log(child.name); // 输出 Alice

1.3 借用方法

如果你想要在某个对象上调用另一个对象的方法，并且希望该方法的this指向被调用的对象，可以使用call或apply。

var array = [1, 2, 3];  
var object = {  
  max: Math.max  
};  
  
// 借用Math.max方法，并将其this指向array  
var max = object.max.apply(null, array); // 使用null因为Math.max不需要this  
console.log(max); // 输出 3

注意：在这个例子中，由于Math.max不依赖this，所以传入null作为this的值。但在其他情况下，你可能需要传入一个具体的对象作为this的值。

1.4 绑定函数

虽然call和apply可以动态地改变this的指向，但它们不会改变函数本身。如果你想要创建一个永久绑定到特定this值的新函数，可以使用Function.prototype.bind方法

var obj = {  
  x: 42,  
  getX: function() {  
    return this.x;  
  }  
};  
  
var unboundGetX = obj.getX;  
console.log(unboundGetX()); // 可能不是42，因为this未定义  
  
var boundGetX = unboundGetX.bind(obj);  
console.log(boundGetX()); // 输出 42

2. 结论

call和apply,bind在JavaScript中非常有用，特别是在需要显式设置函数内部this指向的场景中。它们提供了灵活性，允许你在不同对象之间借用方法和在回调函数中保持正确的this上下文。然而，对于需要永久绑定this的场景，bind方法可能是更好的选择。