call、apply和bind的使用姿势

最近项目中用了下call、apply和bind,因为不是经常用,所以总结了一下使用方法。

定义

call() 方法调用一个函数,其具有一个指定的this值和分别提供的参数。

fun.call(thisArg, arg1, arg2, ...)

apply() 方法调用一个函数,其具有一个指定的this值,以及作为一个数组提供的参数。

fun.apply(thisArg, [argsArray])

bind() 方法创建一个新的函数,当这个函数被调用时,将其this关键字设置为提供的值,在调用新函数时,给定的参数序列排在提供的参数序列前面。

fun.bind(thisArg, arg1, arg2, ...)

区别

call、apply方法是在调用时使用,bind是在创造函数时使用。 除去指定this值参数外,call、bind参数是分别提供的,apply参数是一个数组。

示例

使用call、apply:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Animate() { //创建构造函数Animate
this.name = 'animate';
}
Animate.prototype.say = function(color, fontSize) { //构造函数Animate添加say方法
console.log('%c'+this.name, 'color:'+color+';font-size:'+fontSize+';');
}
function Humen() { //创建构造函数Humen
this.name = 'humen';
}
var animate = new Animate(),
humen = new Humen();
animate.say.call(humen, '#ff0000', '20px');//humen使用call借用animate的say方法
animate.say.apply(humen, ['#00ff00', '20px']);//humen使用apply借用animate的say方法
// 可以看出来,call和apply的区别只是参数的问题

Animate.prototype.bindSay = function(color, fontSize) { //构造函数Animate添加bindSay方法
console.log('%c'+this.name, 'color:'+color+';font-size:'+fontSize+';');
}.bind(Humen, '#0000ff', '30px'); //在方法最后绑定上thisArg, 并依次填写参数
animate.bindSay(); //之后使用Animate构造的对象使用bindSay方法后输出的方法内的this均指向Humen函数

附赠实战使用:

实现一个函数,输入一个整数,输出该数二进制表示中1的个数:

1
2
3
function numberOf1(number) {
return [].filter.call(number.toString(2), i=>i==1).length;
}

数组中查询最大值或最小值

1
2
3
4
5
6
var arr = [1,2,3,4,5];
Math.max.apply(this, arr);//这里可以看出apply其实是把参数数组打散了
Math.min.apply(this, arr);

Math.max(...arr);//也可以这么写
Math.min(...arr);

jquery.ajax中绑定this

1
2
3
4
5
6
7
8
9
10
11
12
13
function() {
// someCode...
var _this = this;//可以使用_this保证外层this无法正确指向
$.ajax({
// someCode...
success: function() {
console.log(this)//这里的this可以正确的指向外层函数了
}.bind(this),
error: ()=>{
console.log(this)//使用箭头函数也是很好的解决办法
}
})
}

总结

call 和 apply 是在使用时,临时借用其他类型的方法; bind是在创建方法时,绑定上this指向,使调用该方法时可以使用正确的this。

坚持原创技术分享,您的支持将鼓励我继续创作!