call与apply方法的异同

相信不少前端小伙伴们在写代码的时候应该都用过 call() 和 apply() 这两个方法，应该也对这两个方法有个基本的了解。但确定也有些小伙伴对它们不是很熟悉，那此次就来探究一下这两个方法
【基本做用】

想要深刻了解 call() 和 apply() 这两个方法，那么必需要先知道他们的基本做用：

改变对象的执行上下文
什么是执行上下文？

咱们在写一个方法的时候，老是会用到一个关键字this，而this的指向就是咱们这里所说的执行上下文（执行环境）

首先咱们要知道，this指向的永远是调用该方法的对象，如何证实this的指向就是当前对象呢？看下面这段代码：

function func () { this.a = 1; console.log(this.a); } func(); // 1

代码中方法执行后控制台输出1，因为func是全局对象window下的一个方法，那么调用该方法的对象就应该是全局对象window，因此this理论上指向的对象就应该是window

若是理论成立，而this.a==1，也就是说变量a是一个全局变量。在控制台上直接输入a或window.a后回车，会发现输出了1，因此在func这个方法中，this的指向就是window

换个方式来验证下：

var person = { name: 'xiao ming', age: 18, who: function () { console.log( 'my name is ' + this.name + ' , ' + this.age + ' years old' ); console.log( person === this); } } person.who(); // my name is xiao ming , 18 years old // true

上面这段代码中who方法是person对象的一个属性，被person对象调用，因此this的指向也就是person

那么在知道什么是执行上下文之后，就能够比较好的理解改变执行上下文的含义了，举个不恰当的栗子：

我有一张银行卡，只有我知道密码，因此只有我取钱，此时银行卡的“执行上下文”是我；而以后我把密码告诉了老婆大人，那么老婆大人知道密码之后也就能够从这张卡取钱，老婆大人取钱的时候，“执行上下文”就变成了老婆大人

小伙伴们可能就会问了，银行卡本身用挺好的还能存点私房钱，又为何要给老婆大人用呢？

这个问题问得很好，由于我妻管严啊 ：）你管我呢
为何须要改变执行上下文？

简单来讲，方便啊！复杂点说，缘由能够有不少，得看具体的业务场景。下面仍是举个🌰栗子 ：）但不表明全部场景

小明有一个炒菜的铲子，小明的室友小刚今天忽然想本身作菜吃，可是小刚没有铲子。小刚又不想为了作个菜单独买把铲子，因而就借用了小明的铲子，这样既达到了目的，又节省了开支，一箭双雕

改变执行上下文也是同样，A对象有一个方法，而B对象由于某种不可言说的状况也须要用到同样的方法，那么这时候咱们是单独为B扩展个方法呢，仍是借用一下A的方法呢？固然是借用A的啦，既完成了需求，又减小了内存的占用
【call()与apply()异同】

在了解异同以前，先来搞清楚这两个方法都是怎么用的
基本使用

call()

function.call(obj[,arg1[, arg2[, [,.argN]]]]])

调用call的对象必须是个函数function
call的第一个参数将会是function改变上下文后指向的对象，也就是上面例子里的小刚，也就是上上面例子里的老婆大人，若是不传，将会默认是全局对象window
第二个参数开始能够接收任意个参数，这些参数将会做为function的参数传入function
调用call的方法会当即执行

apply()

function.apply(obj[,argArray])

与call方法的使用基本一致，可是只接收两个参数，其中第二个参数必须是一个数组或者类数组，这也是这两个方法很重要的一个区别

数组与类数组小科普

数组咱们都知道是什么，它的特征都有哪些呢？

    能够经过角标调用，如 array[0]
    具备长度属性length
    能够经过 for 循环和forEach方法进行遍历

类数组顾名思义，具有的特征应该与数组基本相同，那么能够知道，一个形以下面这个对象的对象就是一个类数组

var arrayLike = { 0: 'item1', 1: 'item2', 2: 'item3', length: 3 }

类数组arrayLike能够经过角标进行调用，具备length属性，同时也能够经过 for 循环进行遍历

咱们常用的获取dom节点的方法返回的就是一个类数组，在一个方法中使用 arguments关键字获取到的该方法的全部参数也是一个类数组

可是类数组却不能经过forEach进行遍历，由于forEach是数组原型链上的方法，类数组毕竟不是数组，因此没法使用

那么如何才能让类数组可以使用forEach呢？小伙伴们能够在看完本篇后本身思考一下哦
异同

相同点

都可以改变方法的执行上下文（执行环境），将一个对象的方法交给另外一个对象来执行，而且是当即执行

不一样点

call方法从第二个参数开始能够接收任意个参数，每一个参数会映射到相应位置的func的参数上，能够经过参数名调用，可是若是将全部的参数做为数组传入，它们会做为一个总体映射到func对应的第一个参数上，以后参数都为空

function func (a,b,c) {}

func.call(obj, 1,2,3)
// function接收到的参数其实是 1,2,3

func.call(obj, [1,2,3])
// function接收到的参数其实是 [1,2,3],undefined,undefined

apply方法最多只有两个参数，第二个参数接收数组或者类数组，可是都会被转换成类数组传入func中，而且会被映射到func对应的参数上

func.apply(obj, [1,2,3]) 
// function接收到的参数其实是 1,2,3 
func.apply(obj, { 0: 1, 1: 2, 2: 3, length: 3 }) 
// function接收到的参数其实是 1,2,3

两个方法该如何选择？

跟简单，根据你要传入的参数来作选择，不须要传参或者只有1个参数的时候，用call，当要传入多个对象时，用apply

或者，若是须要传入的参数已是一个数组或者类数组了，就用apply，若是仍是单独的须要逐个传入的，能够考虑使用call（若是你不嫌麻烦的话 ）
【其余用途——对象继承】

因为能够改变this的指向，因此也就能够实现对象的继承

function superClass () { 
this.a = 1; this.print = function () { 
console.log(this.a); }
 } 
function subClass () { 
superClass.call(this); this.print(); 
} 
subClass(); // 1

subClass经过call方法，继承了superClass的print方法和a变量，同时subClass还能够扩展本身的其余方法