【JavaScript】call、apply、bind的区别和应用

历史小剧场

其实在大多数时间里，除去超人、蝙蝠侠等不可抗力出来维护正义外，邪是经常胜正的。所谓好人、善人、老实人常常被整得凄惨无比，比如于谦、岳飞等，都是死后很多年才翻身平反。
只有岁月的沧桑，才能淘尽一切污浊，扫清人们眼帘上的遮盖与灰尘，看到那些殉道者无比璀璨的光芒，历千年而不灭。 -------《明朝那些事儿》

概述与区别

概述

这三个函数都是为了改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向。
我们来看个例子

function Person(name) {
     this.name = name;
 }
 Person.prototype = {
     constructor: Person,
     showName: function () {
         console.log(this.name);
     }
 }
 const person = new Person('fangruichuan'); 
 person.showName(); // fangruichuan

接下来，我们增加一个对象字面量，它没有所谓的showName()方法，不过，我们可以使用call、apply、bind帮我们干这件事

const animal = {
   name: 'dog'
}
// call
person.showName.call(animal); // dog

// apply
person.showName.apply(animal); // dog

// bind
person.showName.bind(animal)(); // dog

如此，我们拿别人的showName()方法，并动态改变其上下文帮自己输出了信息

区别

• call、apply和bind的差别
  • call和apply改变了函数的this上下文后便可以执行该函数；
  • 但是bind是返回了改变了上下文后的一个函数
• call、apply的区别
  • call从第二个参数开始以参数列表的形式展现；
  • apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数

fn.call(obj, arg1, arg2, arg3...);
fn.apply(obj, [arg1, arg2, arg3...]);

应用

console.log("求数组中的最大和最小值-------------------------")
const arr = [34,5,3,6,54,6,-67,5,7,6,-8,687];
console.log(Math.max.call(Math, ...arr)); // 687
console.log(Math.min.call(Math, ...arr)); // -8
console.log(Math.max.apply(Math, arr)); // 687
console.log(Math.min.apply(Math, arr)); // -8


console.log("将伪数组转换为数组------------------------")
const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
const arr2 = Array.prototype.slice.call(arrayLike);
console.log(arr2); // ['a', 'b', 'c']


console.log("数组追加--------------------")
const arr3 = [1, 2, 3]
const arr4 = [4, 5, 6]
Array.prototype.push.apply(arr3, arr4);
console.log(arr3); // [1, 2, 3, 4, 5, 6]


console.log("判断变量类型-------------------------")
console.log(Object.prototype.toString.call(123)); // [object Number]
console.log(Object.prototype.toString.call('abc')); // [object String]
console.log(Object.prototype.toString.call(true)); // [object Boolean]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call({})); // [object Object]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call(function () {})); // [object Function]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
console.log(Object.prototype.toString.call(/test/)); // [object RegExp]
console.log(Object.prototype.toString.call(Math)); // [object Math]