理解 call, apply 的用法
call
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
function list() {
return Array.prototype.slice.call(arguments, 0, 1);
}
list(1, 2, 3, 4, 5); // [1]
1
2
3
4
我们经常能看到以上代码 Array.prototype.slice.call(arguments) 或者 [].slice.call(arguments),这种用法一般用在类数组对象想要使用数组方法的时候(如果你想直接用在数组上当然也不会报错,但是这样就多次一举了。然而有一些情况也是会用到数组上的,见 apply)。
数组的所有方法都是挂在 Array 的 prototype 上的,如图:
而类数组对象本身是没有这些方法的,当然也无法调用:
那么想在一些对象上调用这个对象本身没有的方法就可以用 call 方法,以下图为例:
nodeList 是一个类数组对象它本身没有 slice 方法,所以调用的时候是 undefined。
Array.prototype.slice.call(nodeList, 0, 1) 这段代码就相当于 nodeList.slice(0, 1)。
因为 nodeList 没有 slice 方法而 Array.prototype 有,那么就在 Array.prototype 上调用 slice 方法,并且使用 call 方法让 slice 作用在 nodeList 上, call 方法的后两个参数就当作 slice 的参数传入。
当然,使用 [].slice.call(nodeList, 0, 1) 也是一样的,只要 slice 前面的对象上有 slice 这个方法就可以。
apply 的用法也是一样的, 区别是 apply() 方法接受的是一个参数数组。
apply
apply() 方法调用一个具有给定 this 值的函数,以及作为一个数组(或类似数组对象)提供的参数。
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]
1
2
3
4
上例中这一段代码 array.push.apply(array, elements) 相当于 array.push(0, 1, 2)。
这里 array 是数组对象本身也有 push 方法,主要是用到 apply 将第二个参数 elements 这个数组参数拆成一个参数列表 0, 1, 2。
虽然 apply 的第二个参数接收的是一个数组,但是它会把数组中的每一个元素依次作为给定调用方法的参数,而不是将这个数组作为一整个参数。
如果直接 array.push(elements) ,那么 elements 将作为一个元素插入到 array 中:
当 call 和 apply 的第一参数为 null 或 undefined 时,this 指向 window(非严格模式下):
var numbers = [1, 3, 5, 7, 19];
Math.max.apply(null, numbers); // 19
Math.min.apply(null, numbers); // 1
1
2
3
bind
bind() 方法创建一个新的函数,在调用时设置 this 关键字为提供的值。并在调用新函数时,将给定参数列表作为原函数的参数序列的前若干项。
var module = {
x: 42,
getX: function() {
return this.x;
}
}
var unboundGetX = module.getX;
unboundGetX(); // undefined
var boundGetX = unboundGetX.bind(module);
boundGetX(); // 42
---------------------
理解 call, apply 的用法的更多相关文章
- 博文推荐】Javascript中bind、call、apply函数用法
[博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...
- 转:js中this、call、apply的用法
(一)关于this首先关于this我想说一句话,这句话记住了this的用法你也就差不多都能明白了:this指的是当前函数的对象.这句话可能比较绕,我会举出很多例子和这句话呼应的!(看下文)1.首先看下 ...
- js1中call和apply的用法
js1中call和apply的用法 е辊顷 饼蹭瑭 岚辗疥 碜坪命 笛攮鼠 鲳篝等 ざ遛膜 镀鞭冢蒯 晕 册薷濑 就不是抓了而是人拳啪啪两声两个人都被拳头打在了腿骨 许郾犍 国 ...
- JavaScript中如何理解如何理解Array.apply(null, {length:5})
先来看一个问题: 如何理解Array.apply(null, {length:5})的{length:5}? 我测试过Array.apply(null, {length:5}) //返回[undefi ...
- js中apply的用法(转)
之一------(函数的劫持与对象的复制)关于对象的继承,一般的做法是用复制法: Object.extend见protpotype.js 的实现方法: Object.extend = function ...
- vue第十四单元(认识单页面应用,理解vue-router的基本用法)
第十四单元(认识单页面应用,理解vue-router的基本用法) #课程目标 1.了解单页应用与多页应用以及各自的优缺点 2.掌握路由如何实现单页应用 3.精通路由的基本语法 #知识点 #一.单页应用 ...
- JavaScript中bind、call、apply函数用法详解
在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手.前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务 ...
- js apply的用法
问题: 1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和ca ...
- Javascript中call()和apply()的用法 ----2
前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受 ...
随机推荐
- (MySQL里的数据)通过Sqoop Import HDFS 里 和 通过Sqoop Export HDFS 里的数据到(MySQL)(五)
下面我们结合 HDFS,介绍 Sqoop 从关系型数据库的导入和导出 一.MySQL里的数据通过Sqoop import HDFS 它的功能是将数据从关系型数据库导入 HDFS 中,其流程图如下所示. ...
- “Invalid configuration file. File "I:/My Virtual Machines/Windows XP english Professional/Windows XP Professional.vmx" was created by a VMware product
“Invalid configuration file. File "I:/My Virtual Machines/Windows XP english Professional/Windo ...
- YTU 2864: 分跑道。
2864: 分跑道. 时间限制: 1 Sec 内存限制: 128 MB 提交: 23 解决: 19 题目描述 有N个人参加100米短跑比赛.跑道为8条.程序的任务是按照尽量使每组的人数相差最少的原 ...
- javascript来实现详细时间提醒信息效果
我们经常在社交网络上面看到很人性化的时间提示比如,你的朋友几分钟前更新了什么,你的朋友几天前更新了什么信息. 这些小tips比直接显示某年某月人性化很多.我们可以用不同的程序实现这种效果.中国音效网下 ...
- 并不对劲的bzoj4651:loj2086:uoj222:p1712:[NOI2016]区间
题目大意 有\(n\)(\(n\leq 5*10^5\))个闭区间\([L_1,R_1],[L_2,R_2],...,[L_n,R_n]\)(\(\forall i\in [1,n],0\leq L_ ...
- Linux CentOS 6.5中安装与配置Tomcat-8方法
安装环境:CentOS-6.5 安装方式:源码安装 软件:apache-tomcat-8.0.0.RC3.tar.gz 下载地址:http://tomcat.apache.org/download-8 ...
- 【转】浏览器中输入url后发生了什么
原文地址:http://www.jianshu.com/p/c1dfc6caa520 在学习前端的过程中经常看到这样一个问题:当你在浏览器中输入url后发生了什么?下面是个人学习过程中的总结,供个人复 ...
- 异常备忘:java.lang.UnsupportedClassVersionError: Bad version number in .class file
转自:https://blog.csdn.net/myyugioh/article/details/7724915 今天在导入一个工程时,编译并打包到Tomcat后,发现出现java.lang.Uns ...
- linux简单技巧和怎么样进入root用户
1.使用shell的Tab键自动补全 Tab在linux命令行输入中可以自动完成.在linux 命令行中使用Tab键会极大提高输入效率2.使用shell的历史记录 shell会记录用户执行命令的历史记 ...
- Sql Server 查询重复记录
参考网址:http://database.51cto.com/art/201103/250046.htm SQL Server数据库多种方式查找重复记录 select * from dbo.T0058 ...