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. commons-fileupload、smartUpload和commons-net-ftp

    1.本地上传 在许多Web站点应用中都需要为用户提供通过浏览器上传文档资料的功能,例如,上传个人相片.共享资料等.在DRP中,就有这个一个功能,需要将对应的物料图片上传并显示.对于上传功能,其实在浏览 ...

  2. UVA10600 ACM Contest and Blackout —— 次小生成树

    题目链接:https://vjudge.net/problem/UVA-10600 In order to prepare the “The First National ACM School Con ...

  3. POJ1733 Parity game —— 种类并查集

    题目链接:http://poj.org/problem?id=1733 Parity game Time Limit: 1000MS   Memory Limit: 65536K Total Subm ...

  4. codeforces round 418 div2 补题 CF 814 A-E

    A An abandoned sentiment from past 水题 #include<bits/stdc++.h> using namespace std; int a[300], ...

  5. Lightoj 1140(数位DP)

    求一个区间内的数含有多少个0. dp[len][pre]表示长度为len的数,含有pre个0. 需要加一个标记,来表示前缀是否为0(可以是一串连续的0),如果前缀一直为0,就一直搜,如果前缀不为0,就 ...

  6. vue tab切换demo

    定义tab页面切换的内容 var app=new Vue({ el:'#app', data:{ navTabs:[ { text:"tab1", isActive:true, t ...

  7. Hibernate4 拦截器(Interceptor) 实现实体类增删改的日志记录

    转自:https://blog.csdn.net/he90227/article/details/44783099 开发应用程序的过程中,经常会对一些比较重要的数据修改都需要写日志.在实际工作的工程中 ...

  8. 520. Detect Capital(检测数组的大小写)

    Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...

  9. ubuntu12.04中极品五笔简体繁体切换

    不小心切换成了繁体,按Ctrl+:,可以切换回来.

  10. Ruby模块与类

    Ruby是单一继承,一个类只能有一个直接的母类 Mix-in 模式来处理复合需求 多重包含: 由下往上回溯,重复的只看最上方的      换句话说,程序由上往下执行,由具体到抽象,第二次发现同一个模块 ...