理解 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二者的作用完全一样,只是接受 ...
随机推荐
- 网络驱动移植之简述CS8900A网络芯片的基本原理
CS8900A数据手册:http://www.cirrus.com/cn/products/cs8900a.html 1.概述 CS8900A是CIRRUS LOGIC公司生产的低功耗.性能优越的16 ...
- [Codeforces 1011E] Border
[题目链接] https://codeforces.com/contest/1011/problem/E [算法] 裴蜀定理 : 设为n个整数,d是它们的最大公约数,那么存在整数 使得 显然 , ...
- 【JSOI 2007】祖玛
[题目链接] 点击打开链接 [算法] f[i][j]表示第i段到第j段,最少需要多少次全部消除 那么,当color[i] = color[j]时 : 若s[i] + s[j] > 2,根据题目中 ...
- 【转】js中15个常用的正则表达式+正则集合
1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP ...
- sqlserver2008Mail
use msdb GO DROP PROC MailTim GO CREATE PROC MailTim @Subject NVARCHAR(100),@Body NVARCHAR( ...
- 【181】IDL 代码从 Windows 转移到 Linux
文件夹分隔符,Windows 是“/”,Linux 是“\”,按照程序,需要修改 通过 bash 运行 *.pro 文件,貌似只能运行没有参数的,有参数的需要写入到文件中 idl 的文件不能用大写字母 ...
- 关于loadrunner运行场景时提示“初始化失败,通信错误”的解决方案
1)在loadrunner的安装目录下的bin文件夹下有个“wlrun.exe”的文件 2)右键点击“属性”->"兼容性"->兼容模式中选择“windows xp(se ...
- jquery datatable无数据提示不居中显示
原文地址:https://www.jianshu.com/p/fc4784d11722 昨天遇到一个问题,datatable生成的表格没有数据,但是“No data found”没有居中,根本原因是c ...
- bzoj 4585: [Apio2016]烟火表演【左偏树】
参考:https://blog.csdn.net/wxh010910/article/details/55806735 以下课件,可并堆部分写的左偏树 #include<iostream> ...
- 如何验证自己的网络是否支持ipv6
http://test-ipv6.com/进入得到自己的ipv6地址 然后命令行 ping 一下