阅读 26

js中apply、call、bind的区别,以及对应的小技巧

这是我参与8月更文挑战的第11天,活动详情查看:8月更文挑战

首先,这三者有一定的相似之处:

1、接收两个参数 2、第一个,改变this指向,第一个参数即是改变后的this 3、第二个,需要传递的参数

然后这三者的主要区别 如下:

1、call,apply会直接运行,而bind只是改变指向,并不会运行函数

var personWang = {
    name : "小王",
    sex : "男",
    age : 24,
    say : function() {
        console.log((this.name + " , " + this.sex + " ,今年" + this.age+"岁"));
    }};
var personMing = {
    name:"小明",
    sex: "男",
    age: 99
}
personWang.say.call(personMing);
personWang.say.apply(personMing);
personWang.say.bind(personMing)();//注意这里的括号
复制代码

输出: 在这里插入图片描述

因此,bind 在js事件触发里 需要改变指向时经常用到 比如 react中,constructor里的this指向的实例本身,而在触发事件例如 <a onClick={this.sayHello}> </a> 中,this指向为对应的DOM元素,因此要用bind改变指向(使用其余两种会触发函数的执行) : <a onClick={(this.sayHello).bind(this)}> </a>

2、三者传参有区别

call,bing,传参时要枚举
var test = {
    say : function(a,b,c) {
        console.log(a+b+c);
    }};
test.say.call(null,1,2,3);
test.say.bind(null,1,2,3)();
复制代码

输出: 在这里插入图片描述

apply传参时要用数组或类数组
test.say.apply(null,[1,2,3]); //输出 6

复制代码

利用可以传数组这个属性,可以完成以下小tip

  1. Math.max 可以实现得到数组中最大的一项,但是Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组,它只支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(Math,array),这样轻松的可以得到一个数组中最大的一项
Math.max.apply(Math, [1,2,3,4,5]) // 5
复制代码

同理: Math.min 可以实现得到数组中最小的一项

  1. 与arguments参数结合使用

arguments:所有参数集合的数组,是function的默认参数

//计算实参列表所有数字的和
function sum(){
    for (var i = 0 , _sum = 0; i < arguments.length; i++) {
        _sum += arguments[i];
    }
    return _sum;
}
console.log(sum(1,2,3,4,5,6)) //输出 21
复制代码
文章分类
前端
文章标签