总是对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(猫,小怪兽)

JS call和apply方法使用的更多相关文章

  1. js巧用apply方法实现数组最值以及合并

    尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...

  2. js call 和 apply方法记录

    最近看到一篇很好的讲解apply和call的文章转了过来,若涉及版权问题请联系本人删除 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用 ...

  3. js call与apply方法

    js中所有函数都默认定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值,call与a ...

  4. js中call apply方法的使用介绍

    js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, ...

  5. angularJS之$watch、$digest和$apply方法

    最近项目上使用了比较多的angular JS,一直都对它感觉比较陌生,总觉得有点反直觉,这段时间,准备下定决心弄明白,这个框架到底是怎么一回事,以及它的工作原理,生命周期……一点一点的啃完它吧.首先, ...

  6. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  7. JS中的call()和apply()方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  8. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  9. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

随机推荐

  1. 自动化测试Java一:Selenium入门

    From: https://blog.csdn.net/u013258415/article/details/77750214 Selenium入门 欢迎阅读Selenium入门讲义,本讲义将会重点介 ...

  2. 函数节流和防抖(todo)

    一.什么是函数节流和函数防抖 函数节流和函数防抖目的都是避免同时多次执行函数. 函数防抖是将多次执行变成一次执行,函数节流是将多次执行变成每隔一定时间执行一次. 二.具体实现 三.什么时候需要节流,什 ...

  3. Android开发之选项菜单(optinosMenu)

    android一共有三种形式的菜单:                  1.选项菜单(optinosMenu)                  2.上下文菜单(ContextMenu)       ...

  4. 新版appium 支持name定位的方法(没试 记录再此)

    查找路径:appium-desktop\resources\app\node_modules\appium\node_modules\appium-android-driver\build\lib 修 ...

  5. [UE4]射击产生弹孔:Spawn Decal At Location、Spawn Decal Attached

    Spawn Decal At Location.Spawn Decal Attached 在指定的位置生成一个材质贴上去 产生随意旋转角度

  6. KPPW2.2 漏洞利用--文件下载

    KPPW2.2 漏洞利用--文件下载 任意文件下载漏洞 环境搭建 1,集成环境简单方便,如wamp,phpstudy.... 2,KPPW v2.2源码一份(文末有分享)放到WWW目录下面 3,安装, ...

  7. 第11章 拾遗5:IPv6和IPv4共存技术(2)_ISATAP隧道技术

    6.3 ISATAP隧道技术 (1)基本概念 ①在一个IPv4网络中主机与路由器之间创建一条ISATAP隧道,以便让该主机可以访问IPv6网络中的资源. ②条件:IPv4中的PC主机需要支持IPv4和 ...

  8. python数据类型总结

    按存值个数区分 标量/原子类型 数字,字符串 容器类型 列表,元组,字典 按可变不可变区分 可变 列表,字典 不可变 数字,字符串,元组 按访问顺序区分 直接访问 数字 顺序访问(序列类型) 字符串, ...

  9. json及JavaBean转json

    先来看看JSON: 什么是JSON: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON是用字符串来表示Javascript对象,例如可以在Ser ...

  10. synergy一个鼠标键盘控制多台电脑

    有些时候我们同时操作多台电脑,但是我们只用一个鼠标和一个键盘,如果通过转换器啊或者是多个鼠标键盘就非常不方便了 下面我介绍一下通过安装synergy这个软件来给开发人员提供方便 这个软件安装比较简单, ...