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));

在这里插入图片描述

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值