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. log4j_自定义样式参数意义

    #自定义样式 %c 输出所属的类目,通常就是所在类的全名 %C 输出Logger所在类的名称,通常就是所在类的全名 %d 输出日志时间点的日期或时间,默认格式为ISO8601,也可以在其后指定格式,比 ...

  2. OAuth学习总结

    1.为什么需要OAuth? 新浪微博就是你的家.偶尔你会想让一些人(第三方应用)去你的家里帮你做一些事,或取点东西.你可以复制一把钥匙(用户名和密码)给他们,但这里有三个问题: 1)别人拿了钥匙后可以 ...

  3. bzoj1090 [SCOI2003]字符串折叠——区间DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1090 区间DP... 代码如下: #include<iostream> #inc ...

  4. 解析javascript变量

    //add by tim//提供解析javascript 脚本的变量集合 using System;using System.Collections.Generic;using System.Linq ...

  5. Ruby  Array类

    Array类 更新: 2017/06/03 更新: 2017/08/31 更新sort的详细内容 更新: 2017/09/07 增加each_with_index, each.with_index(o ...

  6. java多线程下模拟抢票

    我们设置三个对象分别同时抢20张票,利用多线程实现. public class Web123506 implements Runnable{ private int ticteksNums=20;// ...

  7. SSM-避坑记(一)

    在运行测试类的时候的报错,内容如下 报错: class path resource [spring/spring-search.xml] cannot be opened because it doe ...

  8. jQuery html操作

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 DOM = Document Object Model(文档对象模型) jQuery 中非常重要的部分,就是操作 ...

  9. [Usaco2006 Mar]Mooo 奶牛的歌声

    Description Farmer John's N (1 <= N <= 50,000) cows are standing in a very straight row and mo ...

  10. 逆序数 UVALive 6508 Permutation Graphs

    题目传送门 /* 题意:给了两行的数字,相同的数字连线,问中间交点的个数 逆序数:第一行保存每个数字的位置,第二行保存该数字在第一行的位置,接下来就是对它求逆序数 用归并排序或线段树求.想到了就简单了 ...