一个程序员的爱情故事(了解call/apply/bind)
程序员文章站
2022-04-11 07:55:44
...
都是用来改变函数运行时的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'])
爱情的力量真是伟大,感谢公司提供这么好的福利。设计师B要把学习ps的方法全教给程序员A,以后程序员就可以自己独立学习了
const learnPsKill = A.learn.bind(B, '前端切图仔', 'bind')
learnPsKill()
其他
-
如果call()/apply()的第一个参数是null或undefined,那么this的指向就是全局变量,在浏览器里就是window
-
改变this对象的指向问题不仅有call,apply,bind方法,也可以使用that变量来固定this的指向
-
ES6 的箭头函数下, call 和 apply 将失效
下一篇: 在node.js中下载图片有几种方法