apply和call怎么在JavaScript中使用

本篇文章为大家展示了apply和call怎么在JavaScript中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

王屋网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联自2013年创立以来到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

一.apply函数定义与理解，先从apply函数出发

在MDN上，apply的定义是：

“apply()方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。”

我的理解是：apply的前面有个含有this的对象，设为A，apply()的参数里，也含有一个含有this的对象设为B。则A.apply(B)，表示A代码执行调用了B，B代码照常执行，执行后的结果作为apply的参数，然后apply把这个结果所指代表示的this替换掉A本身的this，接着执行A代码。

比如：

var aa = {
  _name:111,
  _age:222,
  _f:function(){
   console.log(this)
   console.log(this._name)
  }
 }
 var cc = {
  _name:0,
  _age:0,
  _f:function(){
   console.log(this)
   console.log(this._name)
  }
 }
 cc._f.apply(aa)//此时aa表示的this就是aa本身
 cc._f.apply(aa._f)//此时aa._f表示的this就是aa._f本身
 
 /**
  * 此时aa._f()表示的this，就是执行后的结果本身。aa._f()执行后，没有返回值，所以应该是undefined，而undefined作为call和apply的参数时，call和apply前面的方法 cc._f 的this会替换成全局对象window。
  * 参考MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply 的参数说明
  */
 cc._f.apply(aa._f())

执行结果：

1.参数为aa

这两行的打印的都是来自 cc._f 方法内的那两句console 。aa的时候算是初始化，里面的 aa._f 方法没有执行。

2.参数为aa.f

这两行的打印的都是来自 cc._f 方法内的那两句console 。aa.f 的时候应该也算是初始化，或者是整个函数当参数传但是不执行这个参数，即 aa._f 方法没有执行。

3.参数为aa.f()

这四行的打印，前面两行来自 aa._f() 方法执行打印的；后面两行是来自cc._f()方法打印的。

后两行解析：aa._f()执行后，没有返回值，所以是undefined，在apply执行解析后，cc._f()的this变成的window，所以打印了window。window里面没有_name这个属性，所以undefined。

 二.apply与call的区分

1.apply()

A.apply(B, [1,2,3]) 后面的参数是arguments对象或类似数组的对象，它会被自动解析为A的参数；

对于A.apply(B) / A.call(B) , 简单讲，B先执行，执行后根据结果去执行A。这个时候，用A去执行B的内容代码，然后再执行自己的代码。

比如：

var f1 = function(a,b){
  console.log(a+b)
 }
 var f2 = function(a,b,c){
  console.log(a,b,c)
 }
 f2.apply(f1,[1,2])//1 2 undefined

先执行f1，f1执行后（f1是f1，不是f1()执行方法，所以console.log(a+b)这行代码并没有执行，相当于，初始化了代码f1），由于没有返回值，所以结果是undefined，f2执行的时候this指向window；参数中的 ” [1,2] “，解析后变成 f2 的参数 “ 1,2，undefined ”，执行f2方法后，打印出1,2，undefined三个值

2.call()

A.call(B, 1,2,3) 后面的参数都是独立的参数对象，它们会被自动解析为A的参数；

比如：　

var f1 = function(a,b){
  console.log(a+b)
 }
 var f2 = function(a,b,c){
  console.log(a,b,c)
 }
 f2.call(f1,[1,2])//[1,2] undefined undefined
 f2.call(f1,1,2)//1 2 undefined

参数中的 ” [1,2] “，因为传入了一个数组，相当于只传入了第一个参数，b和c参数没有传。解析后变成 f2 的参数 “ [1,2]，undefined ，undefined ”，执行f2方法后，打印出 [1,2]，undefined ，undefined 三个值。

三.apply与call带来的便利

1. push();

push参数是类似(a,b,c,d,e)如此传输的，如果在一个数组的基础上进行传输另一个数组的内容，可以如下：

//apply用法
 var arr = new Array(1,2,3)
 var arr1 = new Array(11,21,31)
 Array.prototype.push.apply(arr,arr1)
 console.log(arr)//[1, 2, 3, 11, 21, 31]
 
 //call用法
 var arr = new Array(1,2,3)
 var arr1 = new Array(11,21,31)
 Array.prototype.push.call(arr,arr1[0],arr1[1],arr1[2])
 console.log(arr)//[1, 2, 3, 11, 21, 31]

2. 数组利用Math求最大和最小值

apply和call的第一个参数，如果是null或者undefined，则apply或call前面的函数会把this指向window

//apply的用法
 var _maxNum = Math.max.apply(null,[1,3,2,4,5])
 console.log(_maxNum)//5
 var _minNum = Math.min.apply(null,[1,3,2,4,5])
 console.log(_minNum)//1
 
 //call的用法
 var _maxNum = Math.max.call(null,1,3,2,4,5)
 console.log(_maxNum)//5
 var _minNum = Math.min.call(null,1,3,2,4,5)
 console.log(_minNum)//1

上述内容就是apply和call怎么在JavaScript中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。