欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一个程序员的爱情故事(了解call/apply/bind)

程序员文章站 2022-04-11 07:55:44
...

一个程序员的爱情故事(了解call/apply/bind)

都是用来改变函数运行时的this指向

方法 示例 特点
call() fun.call(obj, params1, params2) 参数从第二个参数开始,依次传入,函数立即执行
apply() fun.apply(obj, [params1, params2]) 参数依数组的形式传入,函数立即执行
bind() fun.bind(obj, params1, params2) 不会立即执行当前函数,而是将函数返回

一个故事

公司有个前端程序员A 主要技能是js, 后来公司又来个设计师妹子B 主要技能是ps

const A = {
  name: "前端切图仔-上班摸鱼撩妹",
  skill: "js js js js js js js js",
  learn: function(param1, param2) {
    console.log("this的指向=>")
    console.log(this)
    console.log('================学习', this.skill)
    console.log(param1, param2)
  }
};

const B = {
  name: "设计长腿妹-温柔好看还单身",
  skill: "ps ps ps ps ps ps ps ps",
  learn: function(param1, param2) {
    console.log("this的指向=>")
    console.log(this)
    console.log('================学习', this.skill)
    console.log(param1, param2)
  }
}

正值青年,旺盛的荷尔蒙实在让程序员A招架不住。他要向设计师学习ps

// call 方法
A.learn.call(B, '前端切图仔', 'call')
// apply 方法,传参方式不同
A.learn.apply(B, ['前端切图仔', 'apply'])

一个程序员的爱情故事(了解call/apply/bind)

爱情的力量真是伟大,感谢公司提供这么好的福利。设计师B要把学习ps的方法全教给程序员A,以后程序员就可以自己独立学习了

const learnPsKill = A.learn.bind(B, '前端切图仔', 'bind')
learnPsKill()

一个程序员的爱情故事(了解call/apply/bind)

其他

  1. 如果call()/apply()的第一个参数是null或undefined,那么this的指向就是全局变量,在浏览器里就是window

  2. 改变this对象的指向问题不仅有call,apply,bind方法,也可以使用that变量来固定this的指向

  3. ES6 的箭头函数下, call 和 apply 将失效

一个程序员的爱情故事(了解call/apply/bind)

相关标签: Js/ES6 javascript