JS基础之call（）和apply（）函数的应用

前言

        在js中，每个函数的原型都指向Function.prototype对象（js基于原型链的继承）。因此，每个函数都会有apply，call，和bind方法，这些方法继承于Function。它们的作用是一样的，都是用来改变函数中this的指向。

介绍

        今天接触了两个关于改变this指向的函数，说实话在一开始学习JS的时候就对this的使用不是很清楚，不是很明白this指的是哪一个对象，要在什么时候使用this调用才合适。当碰到改变this指向的函数，自然也是有点兴趣。今天就简单的做一个小小的总结和分享。

        call()函数：

字面意思就是调用的意思。在C#和VB中，也经常使用call函数来调用一些经常用到的类。此处使用也是调用的意思。使用一个小例子来解析一些关于call()函数调用时候的一些特点：

        首先是关于call函数无参的调用。

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"John",
    lastName: "Doe",
}
var person2 = {
    firstName:"Mary",
    lastName: "Doe",
}
person.fullName.call(person2);  // 将返回 "Steve Jobs"

通过此实例的运行结果，可以看出，call函数在无参数时，调用的就是括号中的内容，当我们传入参数之后在进行一次对比：

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

返回结果：Bill Gates Seattle USA

        两个实例的结果可以看出：我们调用的事person实例的方法，但是实际上person中的this都是代表的person1（2）；很明显的改变了this指向。

        apply()函数

        接下来是apply函数，其实两者在使用上是没有很大区别的，但是在传参方面有一点点的区别：apply函数传的是数组中的参数。如果要使用数组而不是参数列表，则 apply() 方法非常方便。

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);
返回结果：John Doe Oslo Norway

    bind()函数

       除此之外还有一个bind函数，和两者的用途差不多，就顺便就此做一个小总结。

       bind函数和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。

var name = "佚名";
var age = 20;
//global.name
//global.age

var p1 = {
    name: "张三",
    age: 12,
    func: function(){
        console.log(`姓名:${this.name},年龄:${this.age}`)
    }
}

var p2 = {
	name: "李四",
	age: 15
}
p1.func.bind(p2)(); //姓名:李四,年龄:15

      call，apply，bind 在用法上的异同

相同点：

        call，apply，bind 这三个方法的第一个参数，都是this。如果你使用的时候不关心 this是谁的话，可以直接设置为 null

不同点：

        函数调用 call，apply方法时，返回的是调用函数的返回值。而bind是返回一个新的函数，你需要再加一个小括号来调用。call和apply的区别就是，call接受的是一系列参数，而apply接受的是一个数组。但是有了 ES6引入的 ...展开运算符，其实很多情况下使用 call和apply没有什么太大的区别。

举个例子，找到数组中最大的值

        const arr = [1, 2, 3, 5];Math.max.call(null, ...arr);Math.max.apply(null, arr);复制代码Math.max 是数字的方法，数组上并没有，但是我们可以通过 call, apply 来使用 Math.max 方法来计算当前数组的最大值。

参考链接：

https://baijiahao.baidu.com/s?id=1661453842078025203&wfr=spider&for=pc

https://www.cnblogs.com/starry-skys/p/11901677.html