js中apply和call的理解与使用方法


Posted in Javascript onNovember 27, 2019

前言

关于call和apply,以前也思考良久,很多时候都以为记住了,但是,我太难了。今天我特地写下笔记,希望可以完全掌握这个东西,也希望可以帮助到任何想对学习这个东西的同学。

一.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

js中apply和call的理解与使用方法

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

2.参数为aa.f

js中apply和call的理解与使用方法

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

3.参数为aa.f()

js中apply和call的理解与使用方法 

这四行的打印,前面两行来自 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函数的第一个参数都是用来替换this指向的对象;apply的第二个参数使用arguments或者类似数组的参数进行传参,call的第二个或以上的参数,使用独立单位,一个一个进行传参;执行顺序是apply或call的第一个参数先执行得到结果,然后执行apply或call前面的函数,执行的时候用已经执行的结果所指代的this去执行。apply和call的使用除了参数上的使用方式不同外,功能是一模一样的。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
Three.js学习之网格
Aug 10 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
javascript操作cookie
Jan 17 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
Promise扫盲贴
Jun 24 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 Javascript
vue-cli在 history模式下的配置详解
Nov 26 #Javascript
js实现淘宝首页的banner栏效果
Nov 26 #Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 #Javascript
vue实现pdf文档在线预览功能
Nov 26 #Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 #Javascript
使用Vue生成动态表单
Nov 26 #Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 #Javascript
You might like
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
电子银行营销方案
2014/02/22 职场文书
事业单位考核材料
2014/05/21 职场文书
项目经理任命书内容
2014/06/06 职场文书
离婚协议书范本样本
2014/08/19 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
消防安全月活动总结
2015/05/08 职场文书
教师外出学习心得体会
2016/01/18 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android