apply,call,bine 这三兄弟经常让初学者感到疑惑。前两天准备面试时特地做了个比较,其实理解起来也不会太难。

apply

MDN上的定义:

The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).

apply() 方法调用一个函数,指定该函数的 this 值并将一个数组(或类数组对象)作为该函数的参数。

语法 (Syntax)

fun.apply(thisArg,[argsArray])

直接上代码

function sayColor(arg) {
var color = "red";
console.log(arg + this.color);
}
var obj = {color: "blue"};
sayColor.apply(obj, ["The color is"]); //输出"The color is blue"

此时 this 指向 obj ,则 this.colorobjcolor 属性,则输出 The color is blue

call

call()apply() 类似,区别在于 apply() 的第二个参数为数组,而 call() 把参数跟在第一个参数后面,并且可以跟多个参数。

语法 (Syntax)

fun.call(thisArg, arg1, arg2, arg3 ...)

看代码

function sayClothe(arg1,arg2) {
console.log(arg1 + this.color + arg2);
}
var obj = {color: "blue"};
sayClothe.call(obj, "This is a ", " clothe" ); //输出"This is a blue clothe"

bind

bind()call() 类似,有一点不同在于 bind() 返回一个新函数(new function),我们可以随时调用该函数。

语法(Syntax)

fun.bind(thisArg, arg1, arg2, arg3 ...)

返回值

返回一个具有指定 this 和初始参数的函数副本。

看代码

function sayClothe(arg1, arg2) {
console.log(arg1 + this.color + arg2);
}
var obj = {color: "blue"};
var sayClothe2 = sayClothe.bind(obj, "This is a ", " clothe");
sayClothe2(); //输出 "This is a blue clothe"

使用

有时候我们会碰到 Array.prototype.slice.call(arguments) 这种用法。许多人会疑惑,直接使用 arguments.slice() 不就行了吗,为什么要多此一举。

原因在于,arguments 并不是真正的数组对象,只是 array-like object ,所以它并没有 slice 这个方法。而 Array.prototype.slice.call(arguments) 可以理解为把 slice 的对象指向 arguments ,从而让 arguments 可以使用 slice 方法。如果直接使用 arguments.slice() 则会报错。

bind() 的另一个用法则是让函数拥有预设参数,而又跟预设参数有所不同。

以下例子结合上面两条规则 本例出自MDN

function list() {
return Array.prototype.slice.call(arguments);
} var list1 = list(1, 2, 3); //[1, 2, 3] //Create a function with a preset leading arguments
var leadingThirtysevenList = list.bind(null, 37); var list2 = leadingThirtysevenList();
//[37] var list3 = leadingThirtysevenList(1, 2, 3);
//[37, 1, 2, 3]

我们想到预设参数就会理所当然的想到 “如果该函数没有参数就使用预设参数,有参数就使用提供的参数”。不过 bind() 所提供的预设参数功能与此不同。

在我们的印象中, list3 应该输出 [1, 2, 3] 但实际输出的却是 [37, 1, 2, 3]。因为 bind() 的特点,leadingThirtysevenList(1, 2, 3) 可以写为 list.bind(null, 37, 1, 2, 3)

总结

apply() call() bind() 三者区别不大,都是用来改变函数的 this 指向。

apply()this 所需参数放入一个数组,作为 apply() 的第二个参数传入。当参数不定时,我们可以传入 argumentscall()bind() 则把参数按顺序依次传入。

bind() 返回对应函数,便于稍后调用,而 apply()call()则立即调用

由于其特性,使用起来千奇百怪,有各种各样有趣的用法,还等待我们去挖掘。

浅谈JavaScript中的apply,call和bind的更多相关文章

  1. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  2. 浅谈JavaScript中的null和undefined

    浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...

  3. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  4. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  5. 浅谈JavaScript中的内存管理

    一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...

  6. 浅谈JavaScript中闭包

    引言 闭包可以说是JavaScript中最有特色的一个地方,很好的理解闭包是更深层次的学习JavaScript的基础.这篇文章我们就来简单的谈下JavaScript下的闭包. 闭包是什么? 闭包是什么 ...

  7. 浅谈JavaScript中的Function引用类型

    引言 在JavaScript中最有意思的就是函数了,这一切的根源在于函数实际上是一个对象.每一个函数都是Function类型的实例,而且都和其他引用类型的实例一样具有属性和方法.函数作为一个对象,因此 ...

  8. 浅谈JavaScript中的this

    引言 JavaScript 是一种脚本语言,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.本文仅采撷其中的一例:JavaScri ...

  9. 浅谈JavaScript中继承的实现

    谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我 ...

随机推荐

  1. iOS开发——实用OC篇&多种定时器详细介绍

    多种定时器详细介绍   在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 然而,在iOS中有很多方法完成以上的任务,到底有 ...

  2. 0c-33-@class,循环retain

    2个对象互相有着引用,A中有B,B中有A. // 对于循环retain的情况,对象不能够释放,此时只能让一方使用assign一方使用retain,retain用于对象assign用于基本类型,assi ...

  3. javascript实现单例模式

    1.简单实现单例模式: var singleTon = function(){ var _pria = 'private value'; var show_pria = function(){ con ...

  4. git-ssh 配置和使用

    1.设置Git的user name和email:(如果是第一次的话) $ git config --global user.name "humingx" $ git config ...

  5. socketpair理解

    转载:http://liulixiaoyao.blog.51cto.com/1361095/533469/ 今天跟人谈到socketpair的问题,晚上回来写了个程序验证下自己的猜测! 先说说我的理解 ...

  6. gridview_RowCommand 获取当前行中的控件

    <asp:GridView ID="gvStorglog" runat="server" Width="100%" SkinID=&q ...

  7. 开发一个支持多用户在线的FTP程序

    要求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp server上随意切换目录 允许用户查看当前目 ...

  8. Asynctask的使用及理解

    1.对于耗时的操作,我们的一般方法是开启“子线程”.如果需要更新UI,则需要使用handler 2.如果耗时的操作太多,那么我们需要开启太多的子线程,这就会给系统带来巨大的负担,随之也会带来性能方面的 ...

  9. Android进阶笔记18:选用合适的IPC方式

    1. 相信大家都知道Android进程间通信方式很多,比如AIDL.Messenger等等,接下来我就总结一下这些IPC方式优缺点. 2. IPC方式的优缺点和适用场景 3. 附加:使用Intent实 ...

  10. 自己调用NTDLL函数

    一.概述 在DLL初始化的时候有时不能调用其它系统DLL的函数,以免导致问题,但有时候又必须要调用怎么办?一种办法就是自己直接调用NTDLL接口,这样肯定没有问题. 下面我写个自己调用Registry ...