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 的用法的更多相关文章

  1. 博文推荐】Javascript中bind、call、apply函数用法

    [博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...

  2. 转:js中this、call、apply的用法

    (一)关于this首先关于this我想说一句话,这句话记住了this的用法你也就差不多都能明白了:this指的是当前函数的对象.这句话可能比较绕,我会举出很多例子和这句话呼应的!(看下文)1.首先看下 ...

  3. js1中call和apply的用法

    js1中call和apply的用法 е辊顷 饼蹭瑭 岚辗疥 碜坪命 笛攮鼠 鲳篝等 ざ遛膜 镀鞭冢蒯 晕 册薷濑 就不是抓了而是人拳啪啪两声两个人都被拳头打在了腿骨 许郾犍 国 ...

  4. JavaScript中如何理解如何理解Array.apply(null, {length:5})

    先来看一个问题: 如何理解Array.apply(null, {length:5})的{length:5}? 我测试过Array.apply(null, {length:5}) //返回[undefi ...

  5. js中apply的用法(转)

    之一------(函数的劫持与对象的复制)关于对象的继承,一般的做法是用复制法: Object.extend见protpotype.js 的实现方法: Object.extend = function ...

  6. vue第十四单元(认识单页面应用,理解vue-router的基本用法)

    第十四单元(认识单页面应用,理解vue-router的基本用法) #课程目标 1.了解单页应用与多页应用以及各自的优缺点 2.掌握路由如何实现单页应用 3.精通路由的基本语法 #知识点 #一.单页应用 ...

  7. JavaScript中bind、call、apply函数用法详解

    在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手.前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务 ...

  8. js apply的用法

    问题: 1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和ca ...

  9. Javascript中call()和apply()的用法 ----2

    前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受 ...

随机推荐

  1. 避免表单重复提交(js实现) (转)

    <script language="javascript">       function submitForm(obj){            obj.disabl ...

  2. ios app 上架AppStore

    一.证书的导出      1.1 前期工作        首先你需要有一个苹果的开发者帐号,一个Mac系统.        如果没有帐号可以在打开http://developer.apple.com/ ...

  3. COLORREF

    COLORREF含义及在VC++中的使用 转载 原创 2016年03月11日 23:40:19 4019 所谓真彩色是指显示出来的图像的颜色与真实世界中的颜色非常自然逼真,使得人眼难以区分它们之间的差 ...

  4. 更改Identity用户信息

    1.用当前上下文对象初始化为一个一个UserStote 对象,然后使用 userstore对象 初始化一个UserManagement对象.找到这个对象,然后更新它的部分属性.然后调用 manager ...

  5. 10款Web开发最佳的Python框架

    Python是跻身于当代IT世界最流行和代码最高效的编程语言之一.Python框架能帮助你快速启动Web应用. 1.CubicWeb CubicWeb的最重要的功能是其代码的可重用性,由一个个代码单元 ...

  6. 如何替换某文件中的所有的特定字符?---linux sed命令(文本编辑命令) (转载)

    转自:http://blog.csdn.net/year_9/article/details/20318407 sed是一个很好的文件处理工具,主要是以行为单位进行处理,可以将数据行进行替换.删除.新 ...

  7. ubuntu下为thunderbird添加邮件提醒功能(转载)

    转自:http://blog.csdn.net/zhangt85/article/details/9154525 1.“工具”-->“附件组件” 2.搜索“new_mail_attention” ...

  8. htm 与 html 的区别

    htm 与 html 的区别 前者是超文本标记(Hypertext Markup) 后者是超文本标记语言(Hypertext Markup Language) 可以说 htm = html 同时,这两 ...

  9. 记一次线上环境的内存溢出(java.lang.OutOfMemoryError)

    事故背景 今天客户说风控项目有个别用户查询不到数据不是报错就是一直卡在那里,我就去那个接口看了下. 一看项目日志今天的都几个g了,平常也就几百兆吧,很明显出了问题. 请求接口后使用命令tail -f ...

  10. python爬虫抓取哈尔滨天气信息(静态爬虫)

    python 爬虫 爬取哈尔滨天气信息 - http://www.weather.com.cn/weather/101050101.shtml 环境: windows7 python3.4(pip i ...