函数调用方法

在谈论JavaScript中apply、call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些:

  • 作为函数
  • 作为方法
  • 作为构造函数
  • 通过它们的call()和apply()方法间接调用

前面的三种调用方法,我们都知道且不在这篇文章的讨论范围内,就不说了。

下面我们来说说这第四种调用方法

通过call()和apply()间接调用

其实,我们可以将这两个函数看做是某个对象的方法,通过调用方法的方式来间接调用函数:

function f(){}

f.call(o);
f.apply(o);

call()和apply()的第一个参数是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对它的引用。

那么他们是一样的,还是有区别的,还有bind方法呢?君莫急,下面详细的解析他们三者的区别和联系。

call()

call()方法给调用它的方法指定特定的this指针(习惯用语,不要和我纠结它的正确性)和参数。例如有这么一个函数:

var fn = function (arg1, arg2) {
console.log(this, arg1, arg2);
}

我来调用它:

fn.call(null, 'Skylor', 'min');        //
fn.call(undefined, 'Skylor', 'min'); // var fx = function() {} fn.call(fx, 'Skylor', 'min'); //

这三个call方法的返回值是什么呢?不废话,请看:

1.  null "Skylor" "min"
2. undefined "Skylor" "min"
3. fx "Skylor" "min"

真的是这样吗,机智的你,去浏览器控制台小试了一下,我去,你这坑货,不是这样的:

chrome
1. Window "Skylor" "min"
2. Window "Skylor" "min"
3. fx "Skylor" "min"

好吧,你机智。但这已经很好的说明了call方法了。(window很高级,微软偷笑中...)

我们注意到call方法,第一个参数是指定this指针,后面每个参数指定需要的参数,注意我用的是“每个”,这意味着你需要几个参数就要想调用函数那样,一个个参数写进去。

apply()

apply()是call()的兄弟啊,其他地方长的都一样,都是男的,就一个地方不一样。先看例子:

fn.apply(null, ['Skylor', 'min']); //1
fn.apply(fx, ['Skylor', 'min']); //2

哥们,你是不是写错了,多了个中括号啊。不,不,不,这就是他和call长的不一样的地方,它的第二个参数是个需要的参数Array。

bind()

bind()嘛,他们三个不是仨兄弟嘛,,这个我懂,blabla....不不不,它是和apply、call结拜的兄弟,不是亲兄弟。

当然,bind方法也是允许你指定this指针,但是它不是调用函数,而是返回一个(或者说是拷贝)调用它的函数的函数,并给这个函数指定特定的this指针和参数。惯例,例子说明一切:

var fnbound = fn.bind(null, 'Skylor', 'min');

这时,fnbound是一个函数,一个this指向null,参数为['Skylor', 'min']的另一个函数。调用之:

fnbound();

结果:

null, 'Skylor', 'min'

不要和我纠结Window的事了。。。。。

bind和其他两个兄弟不一样的地方,是,它不是调用函数,而是返回一个新的函数,同样,它也是指定this指针和参数的,指定参数的方式和call一样,是一个一个来的。

最后来一个例子呗:

var shoppingCart = (function(){
var _calculatePrice = function () {
return this.price * this.amount;
}; return {
calculatePrice : _calculatePrice
}
})(); var goods = {
name : ‘hammer’,
price: 199,
amount : 2
}; shoppingCart.calculatePrice.call(goods);

OK,以上是我的见解,如有不正确的地方,欢迎指正和批评,不甚欢喜与感谢。By Skylormin

解析JavaScript中apply和call以及bind的更多相关文章

  1. (转)深入浅出 妙用Javascript中apply、call、bind

    原文连接 深入浅出 妙用Javascript中apply.call.bind 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且 ...

  2. javascript中apply、call和bind的区别,容量理解,值得转!

    a)  javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b)  深入浅出 妙用Javascrip ...

  3. 一个简单的例子让你很轻松地明白JavaScript中apply、call、bind三者的用法及区别

    JavaScript中apply.call.bind三者的用法及区别 引言 正文 一.apply.call.bind的共同用法 二. apply 三. call 四. bind 五.其他应用场景 六. ...

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

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

  5. 【优雅代码】深入浅出 妙用Javascript中apply、call、bind

    这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: “对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂的知识.我 ...

  6. Javascript中apply、call、bind

    网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript ...

  7. 妙用Javascript中apply、call、bind

    对apply.call.bind的认识,并且列出一些它们的妙用加深记忆.   apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(cont ...

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

    这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: "对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂 ...

  9. javascript中apply、call和bind的区别及方法详解

    文章目录   apply.call apply.call 区别 apply.call实例 数组之间追加 获取数组中的最大值和最小值 验证是否是数组(前提是toString()方法没有被重写过) 类(伪 ...

随机推荐

  1. Egret 双端接入爱贝支付遇到的问题

    首先要为 egret 工程引入第三方库: Egret 接第三方库:http://edn.egret.com/cn/index.php?g=&m=article&a=index& ...

  2. InfiniBand技术简介

    InfiniBand技术简介   转载请在文首保留原文出处:EMC中文支持论坛https://community.emc.com/go/chinese 介绍         随着CPU和通讯处理速度的 ...

  3. mysql 修改max_allowed_packet

    -- 查询max_allowed_packetshow VARIABLES like '%max_allowed_packet%'; 修改 my.ini 或 my.cnf [mysqld] max_a ...

  4. Promise 让异步更优

    每个异步方法都返回一个Promise 更优雅. then方法 每一个Promise  都有一个叫then 的方法, 接受一对callback    被解决时调用,resolve, 被拒绝   reje ...

  5. Building a Space Station

    poj2031:http://poj.org/problem?id=2031 题意:就是给出三维坐标系上的一些球的球心坐标和其半径,搭建通路,使得他们能够相互连通.如果两个球有重叠的部分则算为已连通, ...

  6. ArrayList的toArray

    ArrayList提供了一个将List转为数组的一个非常方便的方法toArray.toArray有两个重载的方法: 1.list.toArray(); 2.list.toArray(T[]  a); ...

  7. Maven实战三

    转载:http://www.iteye.com/topic/1123228 1. 三套生命周期     Maven拥有三套相互独立的生命周期,它们分别为clean,default和site. 每个生命 ...

  8. MFC中对话框的工具栏的使用

    1.新建一个MFC项目:在资源视图中新建Toolbar资源: 2.编辑状态栏: 3.在***Dlg.h文件中添加CToolBar类型或其派生类型的一个变量如:(CdlgToolBar myToolBa ...

  9. Finding Nemo(bfs)

    Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 6988   Accepted: 1600 Description Nemo ...

  10. bzoj3230

    以前觉得这题好难,现在觉得这题还是挺简单首先看到类似LCP问题不难想到后缀数组吧前后的相似需要我们分别做一个后缀数组和“前缀数组”(就是把字符串反向然后跑后缀数组)这道题的难点就在于如何确定子串是什么 ...