bind方法

bind 方法与 call 和 apply 不同，它不会立即执行函数，而是返回一个新的函数，并将指定的对象作为新函数中的 this 值。bind 方法在实际使用中常用于创建一个指定上下文的函数，以便稍后调用。

// bind方法
const bookEW = book.bind(eurowings);
bookEW(66, 'IT知识一享_bind方法');

在这里插入图片描述

● 我们实现执行参数的一部分，只传入部分参数即可

const bookEW66 = book.bind(eurowings, 23);
bookEW66('张三');
bookEW66('李四');
bookEW66('王二麻子');

在这里插入图片描述

● 和监听事件一起

lufthansa.planes = 300;
lufthansa.buyPlane = function () {
  console.log(this);

  this.planes++;
  console.log(this.planes);
};

document.querySelector('.buy').addEventListener('click', lufthansa.buyPlane);

在这里插入图片描述

● 为什么会出错呢？
这个问题涉及 JavaScript 中的上下文和 this 关键字。在给 addEventListener 方法传递事件处理程序时，lufthansa.buyPlane 会丢失其原始上下文。这意味着在 lufthansa.buyPlane 方法中，this 不再指向 lufthansa 对象。相反，它指向了触发事件的 DOM 元素。

● 为了解决这个问题，可以使用 bind 方法将 lufthansa 对象绑定到事件处理程序，以确保 this 指向正确的上下文。

document.querySelector('.buy').addEventListener('click', lufthansa.buyPlane.bind(lufthansa));

在这里插入图片描述

● 部分应用
计算税率和增值税

//部分应用
const addTax = (rate, value) => value + value * rate;
console.log(addTax(0.1, 200));

const addVAT = addTax.bind(null, 0.23);
console.log(addVAT(100));
console.log(addVAT(23));

在这里插入图片描述

挑战

记得之前我们说过用函数返回一个函数吗？尝试这种方法实现上面的功能
参考如下

const addTaxRate = function (rate) {
  return function (value) {
    return value + value * rate;
  };
};

const addVAT2 = addTaxRate(0.23);
console.log(addVAT2(100));
console.log(addVAT2(23));