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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
js切换光标示例代码
2013/10/10 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
演讲稿怎么写
2014/01/07 职场文书
农村葬礼主持词
2014/03/31 职场文书
法定代表人授权委托书
2014/09/19 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
文明礼貌主题班会
2015/08/14 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
海弦WR-800F
2022/04/05 无线电