博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
call与apply方法的异同
阅读量:6653 次
发布时间:2019-06-25

本文共 3085 字,大约阅读时间需要 10 分钟。

hot3.png

相信很多前端小伙伴们在写代码的时候应该都用过 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,3func.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还可以扩展自己的其他方法

转载于:https://my.oschina.net/u/3687565/blog/1554477

你可能感兴趣的文章
修改10g自动统计信息收集作业GATHER_STATS_JOB到仅仅周末执行
查看>>
Calibrate测试Exadata IO
查看>>
【C语言】15-预处理指令1-宏定义
查看>>
【C语言】19-static和extern关键字1-对函数的作用
查看>>
9、单机运行环境搭建之 --CentOS-6.4下mysqldump 备份与还原数据库
查看>>
分享:C++中头文件、源文件之间的区别与联系
查看>>
好类 笔记
查看>>
Web前端浏览器兼容初探【转】
查看>>
菜鸟开技术博啦
查看>>
关于多线程生命周期原理
查看>>
如何使用U盘安装操作系统 安装GHOST XP, xp纯净版
查看>>
POJ 1062 昂贵的聘礼
查看>>
理解Java对象序列化——Serializable接口
查看>>
一个简易的WebServer程序
查看>>
Python学习入门基础教程(learning Python)--5.3 Python写文件基础
查看>>
关于js加密解密
查看>>
JBoss7快速入门
查看>>
Sequence one(hdu2610dfs+去重)
查看>>
每日英语:Rethinking How We Watch TV
查看>>
[置顶] EasyMock的简单使用
查看>>