JS call和apply方法使用
总是对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方法使用的更多相关文章
- js巧用apply方法实现数组最值以及合并
尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子:1.数组最大最小值 求数组中的最大最小值,js有相应的方法:Math.min() ...
- js call 和 apply方法记录
最近看到一篇很好的讲解apply和call的文章转了过来,若涉及版权问题请联系本人删除 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用 ...
- js call与apply方法
js中所有函数都默认定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值,call与a ...
- js中call apply方法的使用介绍
js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, ...
- angularJS之$watch、$digest和$apply方法
最近项目上使用了比较多的angular JS,一直都对它感觉比较陌生,总觉得有点反直觉,这段时间,准备下定决心弄明白,这个框架到底是怎么一回事,以及它的工作原理,生命周期……一点一点的啃完它吧.首先, ...
- JS中 call() 与apply 方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- JS中的call()和apply()方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- js中apply方法的使用
js中apply方法的使用 1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...
随机推荐
- 【JVM】Class结构之常量池
常量池 主要包括下面2类: 字面量(Literal):如int,double,String等: 符号引用(Symbolic Reference): 符号引用 类和接口的全限定名: 字段的名称和描述符: ...
- bzoj5008: 方师傅的房子
Description 方师傅来到了一个二维平面.他站在原点上,觉得这里风景不错,就建了一个房子.这个房子是n个点的凸多边形 ,原点一定严格在凸多边形内部.有m个人也到了这个二维平面.现在你得到了m个 ...
- SSH的配置文件
Hibernate: xxx.hbm.xml ,作用:类的属性和表的列建立映射关系,主键策略,多表查询等 hibernate.cfg.xml ,核心配置文件,数据库配置信息,加载xxx.hbm.x ...
- [UE4]移动惯性
2个因素影响滑行: 1.摩擦力:Ground Frition 2.减速度:Braking decelearation Walking
- Laravel 5.5 FormRequest 自定义错误消息 postman调试时X-Requested-With设为XMLHttpRequest
Laravel 5.5 FormRequest 自定义错误消息 使用FormRequest进行表单验证,就不用让验证逻辑和控制器里面的逻辑都混在一起.但在使用的时候呢,发现json错误返回的数据,与我 ...
- Linux中/目录扩容
1:原来的系统20G,目前增加到30G,我要把增加的10G扩容到/目录下 2:fdisk /dev/sda (对sda这块磁盘没有被使用的空间进行分区,联想Windows操作系统) 使用L ...
- 0000 - Spring MVC 原理以及helloworld
1.概述 Spring MVC是目前最好的实现MVC设计模式的框架,是Spring框架的一个分支产品.以Spring IOC容器为基础,并利用容易的特性来简化它的配置.Spring MVC相当于Spr ...
- 01-Socket服务器
package com.day1; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOExc ...
- 过滤器Filter的四种拦截方式
过滤器有四种拦截方式!分别是:REQUEST.FORWARD.INCLUDE.ERROR. REQUEST: 直接访问目标资源时执行过滤器.包括:在地址栏中直接访问.表单提交.超链接.重定向,只要在地 ...
- MVP与MVC的区别
MVP的主要思想就是解耦View和Model 先大致从图上看一下MVP和MVC又什么不同: MVC: M : Model 数据模型,就是对数据的封装和保存: V : View 视图界面,相当于布局文件 ...