`

深入浅出妙用 Javascript 中 apply、call、bind

 
阅读更多

 出处:http://web.jobbole.com/83642/

 

这篇文章实在是很难下笔,因为网上相关文章不胜枚举。
巧合的是前些天看到阮老师的一篇文章的一句话:
“对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。”
对于这句话,不能赞同更多,也让我下决心好好写这篇,网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply、call、bind的认识,并且列出一些它们的妙用加深记忆。
 
   apply、call
在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。
JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。
先来一个栗子: 

但是如果我们有一个对象banana= {color : “yellow”} ,我们不想对它重新定义 say 方法,那么我们可以通过 call 或 apply 用 apple 的 say 方法:

所以,可以看出 call 和 apply 是为了动态改变 this 而出现的,当一个 object 没有某个方法(本栗子中banana没有say方法),但是其他的有(本栗子中apple有say方法),我们可以借助call或apply用其它对象的方法来操作。

 

apply、call 的区别

对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:

就可以通过如下方式来调用:

其中 this 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

JavaScript 中,某个函数的参数数量是不固定的,因此要说适用条件的话,当你的参数是明确知道数量时用 call 。
而不确定的时候用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个数组来遍历所有的参数。
 
为了巩固加深记忆,下面列举一些常用用法:
1、数组之间追加 

2、获取数组中的最大值和最小值

number 本身没有 max 方法,但是 Math 有,我们就可以借助 call 或者 apply 使用其方法。

 

3、验证是否是数组(前提是toString()方法没有被重写过)

4、类(伪)数组使用数组方法

 

Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象,还有像调用 getElementsByTagName , document.childNodes 之类的,它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。
但是我们能通过 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象,这样 domNodes 就可以应用 Array 下的所有方法了。

深入理解运用apply、call

下面就借用一道面试题,来更深入的去理解下 apply 和 call 。

定义一个 log 方法,让它可以代理 console.log 方法,常见的解决方法是:

上面方法可以解决最基本的需求,但是当传入参数的个数是不确定的时候,上面的方法就失效了,这个时候就可以考虑使用 apply 或者 call,注意这里传入多少个参数是不确定的,所以使用apply是最好的,方法如下:

接下来的要求是给每一个 log 消息添加一个”(app)”的前辍,比如:

该怎么做比较优雅呢?这个时候需要想到arguments参数是个伪数组,通过 Array.prototype.slice.call 转化为标准数组,再使用数组方法unshift,像这样:

bind

说完了 apply 和 call ,再来说说bind。bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。

MDN的解释是:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

直接来看看具体如何使用,在常见的单体模式中,通常我们会使用 _this , that , self 等保存 this ,这样我们可以在改变了上下文之后继续引用到它。 像这样:

由于 Javascript 特有的机制,上下文环境在 eventBind:function(){ } 过渡到 $(‘.someClass’).on(‘click’,function(event) { }) 发生了改变,上述使用变量保存 this 这些方式都是有用的,也没有什么问题。当然使用 bind() 可以更加优雅的解决这个问题:

在上述代码里,bind() 创建了一个函数,当这个click事件绑定在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数)。因此,这里我们传入想要的上下文 this(其实就是 foo ),到 bind() 函数中。然后,当回调函数被执行的时候, this 便指向 foo 对象。再来一个简单的栗子:

这里我们创建了一个新的函数 func,当使用 bind() 创建一个绑定函数之后,它被执行的时候,它的 this 会被设置成 foo , 而不是像我们调用 bar() 时的全局作用域。

有个有趣的问题,如果连续 bind() 两次,亦或者是连续 bind() 三次那么输出的值是什么呢?像这样:

答案是,两次都仍将输出 3 ,而非期待中的 4 和 5 。原因是,在Javascript中,多次 bind() 是无效的。更深层次的原因, bind() 的实现,相当于使用函数在内部包了一个 call / apply ,第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

apply、call、bind比较

那么 apply、call、bind 三者相比较,之间又有什么异同呢?何时使用 apply、call,何时使用 bind 呢。简单的一个栗子:

三个输出的都是81,但是注意看使用 bind() 方法的,他后面多了对括号。

也就是说,区别是,当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind() 方法。而 apply/call 则会立即执行函数。

再总结一下:

  • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
  • apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
  • apply 、 call 、bind 三者都可以利用后续参数传参;
  • bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

本文实例出现的所有代码,在我的github上可以下载

分享到:
评论

相关推荐

    浅谈javascript中的call、apply、bind_.docx

    JavaScript 中的 call、apply、bind 方法详解 JavaScript 中的 call、apply、bind 方法是 Function 对象自带的三个方法,这三个方法的主要作用是转变函数中的 this 指向,从而可以达到“接花移木”的效果。下面将对...

    开启Javascript中apply、call、bind的用法之旅模式

    总结来说,apply、call和bind是JavaScript中非常重要的函数方法,它们提供了控制函数上下文的能力,无论是直接调用函数、扩展数组元素,还是改变对象的方法调用,这些方法都是不可或缺的工具。掌握它们的用法,能够...

    javascript中apply、call和bind的用法区分_.docx

    ### JavaScript中apply、call和bind的用法区分 在JavaScript编程中,`apply`、`call`和`bind`这三个方法被广泛用于改变函数内部`this`的指向,这对于理解和编写复杂的JavaScript代码至关重要。虽然它们的功能相似,...

    【JavaScript源代码】JavaScript函数之call、apply以及bind方法案例详解.docx

    JavaScript中的call、apply和bind方法都是用来改变函数调用时的上下文(即this值)以及传递参数。它们之间的相同点在于,都能够指定函数执行时的this对象,并且都能接收参数。不同点在于它们的调用方式和执行时机。 ...

    javascript中apply、call和bind的使用区别

    在JavaScript中,`apply()`, `call()`, 和 `bind()` 都是用来操作函数的上下文,即改变函数内部 `this` 指向的方法。它们有三个共同点:第一,它们都能改变函数执行时的 `this` 值;第二,第一个参数都是指定的新 `...

    浅谈javascript中的call、apply、bind

    JavaScript中的call、apply和bind方法是Function对象自带的三个用于改变函数this指向的关键方法。理解这些方法有助于我们更好地掌握函数式编程和面向对象编程的高级技巧。 首先,我们来了解call方法。call方法可以...

    Javascript中call,apply,bind方法的详解与总结

    本文针对JavaScript中三个重要的函数方法——call、apply和bind,进行详尽的分析,并在文章的结尾部分对这三个方法之间的联系和区别进行了概括,以便于读者更深入地理解它们的用途和应用场景。 首先,我们来探讨...

    深入理解JavaScript中的call、apply、bind方法的区别

    call、apply和bind是JavaScript中用于改变函数内部this指向的三个方法。虽然它们的作用都是为了改变函数的上下文,但它们在使用方式和用途上存在一些差异。 首先,我们来看call方法。call方法的第一个参数是作为...

    javascript中apply/call和bind的使用

    总结来说,apply()、call()和bind()在JavaScript中都是非常重要的方法,它们可以控制函数内部的this指向,允许参数的灵活传递,并且可以创建可重用的函数,从而提升代码的模块性和灵活性。通过理解这些方法的使用...

    浅谈JavaScript中的apply/call/bind和this的使用

    apply/call/bind三者的联系就在于,都可以用来改变函数中 this 指向的值,且第一个参数为要指向的 this 的值,apply的第二个参数(或 bind 与 call 的不定参数)为要传入的参数。这就不得不提及 javascript 中函数的...

    JS中的call、apply、bind方法详解.pdf

    在JavaScript中,call、apply、bind三个方法都是函数对象的方法,它们的作用都是改变函数的调用对象。下面,我们将详细介绍这些方法的定义、语法、使用场景和区别。 一、call方法 call方法的语法是:call([thisObj...

    js代码-generator apply call bind

    在JavaScript编程中,`generator`、`apply`、`call`和`bind`是四个非常重要的概念,它们各自扮演着不同的角色,对于理解和编写高效、灵活的代码至关重要。接下来,我们将详细探讨这些知识点。 首先,`generator`是...

    javascript中call,apply,bind函数用法示例

    在JavaScript中,`call`, `apply`, 和 `bind` 是三个非常重要的函数,它们都用于改变函数内部 `this` 的指向。下面将详细介绍这三个函数的功能、使用方法以及它们之间的区别。 1. **call() 函数** `call()` 函数...

    跟我学习javascript的call(),apply(),bind()与回调

    本文将详细解释JavaScript中call(), apply(), 和 bind() 方法的作用、语法以及使用场景,并且会探讨回调函数的使用,帮助理解这些概念在实际编程中的应用。 首先,我们来探讨call() 和 apply() 方法。这两个方法都...

    关于JS中的apply,call,bind的深入解析.docx

    JavaScript 中的 `apply`、`call` 和 `bind` 都是用来操控函数调用时 `this` 指向的三个关键方法。它们允许开发者在不同的上下文中执行函数,这对于面向对象编程和函数式编程非常重要。下面我们将深入解析这三个方法...

    javascript中call apply 与 bind方法详解

    在JavaScript中,call、apply和bind是Function对象自带的三个方法,本文将通过几个场景的应用,来详细理解三个方法。 call() call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。 ...

    Javascript中从学习bind到实现bind的过程

    ### Javascript中bind方法的理解与实现 #### 1. bind方法的基本概念 JavaScript中的`bind`方法是一个重要的函数方法,它可以用来创建一个新的函数,并且在新函数被调用时,可以指定这个新函数的`this`关键字绑定到...

Global site tag (gtag.js) - Google Analytics