博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS call和apply方法使用
阅读量:6413 次
发布时间:2019-06-23

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

总是对call和apply方法使用存在迷惑,特此记录一下

一句话理解这两个方法:

  call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作

举个栗子:

  我们都知道在函数中有一个伪数组 arguments ,其结构像数组,但是没有数组的(join,slice)等方法,因此我们用call借用数组中的这些方法操作 arguments

function fn(){        console.log(Array.prototype.join.call(arguments,'-'));    }    fn('abc','bdc','fgv');   输出:·abc-bdc-fgv·

再举一个栗子:

  通过document.getElementsByTagName选择的dom 节点是一种类似array的array,它不能应用Array下的push,pop等方法

var domNodes =  Array.prototype.slice.call(document.getElementsByTagName("*"));

到此我们大概可以了解call和apply的使用场景了

接下来具体介绍一下这两个方法

在下面代码中,我们定义了猫和狗两个类,其各自有自己的属性(name、color),但是狗没有eat和say这两个方法,因此可以通过call调用猫 ,cat的say方法中this指向会指向dog

  function cat(obj){
             this.color = obj.color;     this.name = obj.name; } cat.prototype = { food : 'fish', say : function (){ console.log('喵~ , 我的名字叫'+this.name); }, eat : function(food1,food2){ console.log('我是'+this.name+',我吃'+ food1 + food2); } } var xiaobai = new cat({name:'xiaobai',color:'white'}); function dog(obj){ this.color = obj.color; this.name = obj.name; } dog.prototype = { food : 'bone' } var xiaohei = new dog({name:'xiaohei',color:'black'}); xiaobai.say.call(xiaohei); //这里调用猫的say方法,this指向 xiaohei    喵~ , 我的名字叫xiaohei xiaobai.eat.apply(xiaohei,['骨头','肉']); //apply可以跟多个参数,以数组的形式   我是xiaohei,我吃骨头肉

引用网友的一段话,帮助记忆这两个方法

猫吃鱼,狗吃肉,奥特曼打小怪兽。

有天狗想吃鱼了

猫.吃鱼.call(狗,鱼)

狗就吃到鱼了

猫成精了,想打怪兽

奥特曼.打小怪兽.call(猫,小怪兽)

转载于:https://www.cnblogs.com/xiaoliwang/p/9034318.html

你可能感兴趣的文章
vista系统释放电脑本身内存
查看>>
我的友情链接
查看>>
简明 Vim 练级攻略
查看>>
Windows下使用命令创建rar压缩包
查看>>
HTML --块
查看>>
在DLL中获取主进程窗口句柄
查看>>
基于消息队列的双向通信
查看>>
一个不错的loading效果
查看>>
高中学渣逆袭入“大学”:如今月收入达五位数
查看>>
Debian允许root用户登录
查看>>
C++ - this指针
查看>>
Google Test and Google Mock Introduction
查看>>
Spring整合Struts2
查看>>
exwc,system,passthru,shell_wxwc讲解
查看>>
BPM表单设计器公式设计参考
查看>>
近万字长文,设计分布式系统需要考虑因素的都在这里!
查看>>
linux的文件系统
查看>>
MySQL测试
查看>>
分析的套路
查看>>
使用pure-ftpd搭建ftp服务
查看>>