理解call,apply,bind区别和使用场景

前端茅台

共同点

三个方法都是用来重新定义this指向的,第一个参数都是this要指向的对象

不同点

a、call函数可以有多个参数
b、apply函数的第二个参数是数组,数组的每一项都是目标函数的参数
c、bind函数返回的是一个函数,使用时需要调用触发
d、bind函数的底层是call实现的

使用方法

call的用法:
例如判断数据类型,一般用Object.prototype.toString结合call方法来进行判断:

var obj = {}
console.log(Object.prototype.toString.call(obj) === "[object Object]");

为什么需要使用call函数来判断?而不是直接使用obj.toString()呢?
因为obj对象可能重写toString方法

apply的用法:
栗子1: 例如我们在使用Math函数获取最大最小值时可以这样使用Math.max(5,6,7,8,9),这样能获取到最大值9,但是如何去求一个数组中的最大值呢?

//这样使用是行不通的
var arr = [5,6,7,8,9]
Math.max(arr)
//只能这样使用
Math.max.apply(null, arr)

栗子2: 两个数组 var arr1 = [1,2,3]; var arr2 = [2,3,4],如何优雅的将arr2中的值追加到arr1中去呢?
这里可以使用apply函数,可以这样写:
Array.prototype.push.apply(arr1, arr2)

bind用法:

this.num = 9; 
var mymodule = {
  num: 81,
  getNum: function() { return this.num; }
};

mymodule.getNum(); // 打印出来是 81

var getNum = mymodule.getNum;

getNum() // 这里打印出来是9,因为this指向window

var bindNumber = mymodule.getNum.bind(mymodule)
bindNumber() // 这里打印出来的是81,利用bind将this指向了mymodule对象
阅读 122

喜欢茅台的前端开发

14 声望
0 粉丝
0 条评论

喜欢茅台的前端开发

14 声望
0 粉丝
宣传栏