bind,call,apply区别

2015-02-27 21:16:39
最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站。但真正大规模的使用 js 这还是第一次。我也是初生牛犊不怕虎,这次服务器居然抛弃 C++ 和 lua 的正统搭配,而尝试用 nodejs 来写游戏服务器,折腾的自己要死要活的我也是醉了。
在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手。前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务器的程序猿看 《javascript编程精粹》 这本书,crockford大神果然不是盖的。之后我在 segmentfault 上又看到了类似的问题,那边解答之后干脆这里记一笔。
首先,关于 js 定义类或对象的方法,请参看 w3school 的这里,写的非常详细和清晰,我不再赘言了。
为了介绍 bind、call、apply 这三个函数的用法,不得不介绍 js 里函数的一些设定。关于这部分推荐通读 《javascript编程精粹》 的第四章,这里我所说的在书里都能找到。
关于这三个函数的详细介绍,可以参看 MDN 的文档:bind、call、apply。
下面开始搬砖,修改自我之前在 segmentfault 上的答案:
js 里函数调用有 4 种模式:方法调用、正常函数调用、构造器函数调用、apply/call 调用。
同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形参,分别是 this 和arguments。
arguments 不涉及到上述 3 个函数,所以这里只谈 this。this 的值,在上面 4 中调用模式下,分别会绑定不同的值。分别来说一说:
方法调用:
这个很好理解,函数是一个对象的属性,比如
1
2
3
4
5
6
7
|
var a = { v : 0, f : function (xx) { this .v = xx; } } a.f(5); |
这个时候,上面函数里的 this 就绑定的是这个对象 a。所以 this.v 可以取到对象 a 的属性 v。
正常函数调用:
依然看代码
1
2
3
4
|
function f(xx) { this .x = xx; } f(5); |
这个时候,函数 f 里的 this 绑定的是全局对象,如果是在浏览器运行的解释器中,一般来说是 window 对象。所以这里 this.x 访问的其实是 window.x ,当然,如果 window 没有 x 属性,那么你这么一写,按照 js 的坑爹语法,就是给 window 对象添加了一个 x 属性,同时赋值。
构造器函数调用:
构造函数一直是我认为是 js 里最坑爹的部分,因为它和 js 最初设计的基于原型的面向对象实现方式格格不入,就好像是特意为了迎合大家已经被其他基于类的面相对象实现给惯坏了的习惯。
如果你在一个函数前面带上 new 关键字来调用,那么 js 会创建一个 prototype 属性是此函数的一个新对象,同时在调用这个函数的时候,把 this 绑定到这个新对象上。当然 new 关键字也会改变return 语句的行为,不过这里就不谈了。看代码
1
2
3
4
|
function a(xx) { this .m = xx; } var b = new a(5); |
上面这个函数和正常调用的函数写法上没什么区别,只不过在调用的时候函数名前面加了关键字 new罢了,这么一来,this 绑定的就不再是前面讲到的全局对象了,而是这里说的创建的新对象,所以说这种方式其实很危险,因为光看函数,你不会知道这个函数到底是准备拿来当构造函数用的,还是一般函数用的。所以我们可以看到,在 jslint 里,它会要求你写的所有构造函数,也就是一旦它发现你用了 new 关键字,那么后面那个函数的首字母必须大写,这样通过函数首字母大写的方式来区分,我个人只有一个看法:坑爹:)
apply/call 调用:
我们知道,在 js 里,函数其实也是一个对象,那么函数自然也可以拥有它自己的方法,有点绕,在js 里,每个函数都有一个公共的 prototype —— Function,而这个原型自带有好几个属性和方法,其中就有这里困惑的 bind、call、apply 方法。先说 apply 方法,它让我们构造一个参数数组传递给函数,同时可以自己来设置 this 的值,这就是它最强大的地方,上面的 3 种函数调用方式,你可以看到,this 都是自动绑定的,没办法由你来设,当你想设的时候,就可以用 apply()了。apply 函数接收 2 个参数,第一个是传递给这个函数用来绑定 this 的值,第二个是一个参数数组。看代码
1
2
3
4
5
6
7
|
function a(xx) { this .b = xx; } var o = {}; a.apply(o, [5]); alert(a.b); // undefined alert(o.b); // 5 |
是不是很神奇,函数 a 居然可以给 o 加属性值。当然,如果你 apply 的第一个参数传递 null,那么在函数 a 里面 this 指针依然会绑定全局对象。
call() 方法和 apply() 方法很类似,它们的存在都是为了改变 this 的绑定,那 call() 和apply() 有什么区别呢?就我个人看来,没啥鸟区别。。。开玩笑!刚刚说了,上面 apply() 接收两个参数,第一个是绑定 this 的值,第二个是一个参数数组,注意它是一个数组,你想传递给这个函数的所有参数都放在数组里,然后 apply() 函数会在调用函数时自动帮你把数组展开。而 call()呢,它的第一个参数也是绑定给 this 的值,但是后面接受的是不定参数,而不再是一个数组,也就是说你可以像平时给函数传参那样把这些参数一个一个传递。所以如果一定要说有什么区别的话,看起来是这样的
1
2
3
4
5
6
7
|
function a(xx, yy) { alert(xx, yy); alert( this ); alert(arguments); } a.apply( null , [5, 55]); a.call( null , 5, 55); |
仅此而已。
最后再来说 bind() 函数,上面讲的无论是 call() 也好, apply() 也好,都是立马就调用了对应的函数,而 bind() 不会, bind() 会生成一个新的函数,bind() 函数的参数跟 call() 一致,第一个参数也是绑定 this 的值,后面接受传递给函数的不定参数。 bind() 生成的新函数返回后,你想什么时候调就什么时候调,看下代码就明白了
1
2
3
4
5
6
7
8
9
10
|
var m = { "x" : 1 }; function foo(y) { alert( this .x + y); } foo.apply(m, [5]); foo.call(m, 5); var foo1 = foo.bind(m, 5); foo1(); |
末了来个吐槽,你在 js 里想定义一个函数,于是你会这么写:
1
|
function jam() {}; |
其实这是 js 里的一种语法糖,它等价于:
1
|
var jam = function () {}; |
然后你想执行这个函数,脑洞大开的你会这么写:
1
|
function jam() {}(); |
但是这么写就报错了,其实这种写法也不算错,因为它确实是 js 支持的函数表达式,但是同时 js 又规定以function 开头的语句被认为是函数语句,而函数语句后面是肯定不会带 () 的,所以才报错,于是聪明的人想出来,加上一对括号就可以了。于是就变成了这样:
1
|
( function jam() {}()); |
这样就定义了一个函数同时也执行它,详情参见 ECMAScript 的 Expression Statement 章节。
本文出自 “菜鸟浮出水” 博客,请务必保留此出处http://rangercyh.blog.51cto.com/1444712/1615809
bind,call,apply区别的更多相关文章
- JavaScript函数 bind call apply区别
1. apply calll 在JavaScript中 call 和 apply 都是为了改变某个函数运行时上下文而存在的, 换句话说就是为了改变函数内部的this的指向. 这里我们有一个新的对象 b ...
- 数组去重,call、apply、bind之间的区别,this用法总结
一.数组去重,直接写到Array原型链上. //该方法只能去除相同的数字 不会去判断24和'24'是不同的 所有数字和字符串数字是相同是重复的 Array.prototype.redup=functi ...
- Bind、Apply、Call三者的区别
1)bind与apply.call 的最大区别就是:bind不会立即调用,其他两个会立即调用 var fn = { _int: function(){return 3}, fun: function( ...
- this指向和apply,call,bind三者的区别
一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...
- apply、call、bind有什么区别?
使用 apply var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: ...
- JavaScript中的call、apply、bind方法的区别
在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这 ...
- bind call apply 的区别和使用
bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...
- js中的bind、apply、call、callee、caller的区别
1.bind.apply与call的区别与使用 相同点:2者是函数原型的一个方法,因此调用者都必须是函数,第1个参数都是对象.作用是,用另一个对象替换当前对象,另一对象也即是你传的第一个参数.通常用于 ...
- bind、apply与call
bind.apply与call 先说观点:不论是bind.apply还是call,最大的好处就是代码复用. bind 在开发中,我们只有复用代码时,才会出现this指向需要改动的情况. 纵观bind的 ...
随机推荐
- java线程中断和终止线程运行
ava中启动一个线程很容易,通常情况下我们都是等到任务运行结束后让线程自行停止.但有时需要在任务正在运行时取消他们,使得线程快速结束.对此Java并没有提供任何机制.但是我们可以通过Java提供的线程 ...
- Rectangle Intersection Test (with C#)
Rectangle Intersection Test (with C#) by Sebastian Krysmanskihttp://manski.net/2011/05/rectangle-int ...
- postgresql异常快速定位
今天下午在使用.NET链接postgresql的时候报了“3D000”的错误,经过测试得知原来是web.config中的数据库配置问题. 在这里有个小情况需要注意,postgresql是不允许创建相同 ...
- Could not load file or assembly 'System.Web.Mvc' or one of its dependencies. The located assembly's manifest definition does not
因为用了MVC,在本地是没有问题的,但是部署在服务器就出现了这个问题. 出错界面如下图 原因分析:上面的出错提示最后一句话翻译过来.找到的程序集清单定义与程序集引用不匹配.也就是程序引用的程序集版本和 ...
- 报错总结_java.lang.RuntimeException: Invalid action class configuration that references an unknown class name
在使用SSH进行项目开发时,一不小心就可能出现以上的错误提示. 这样的问题可以简单理解为未找到名字为XXX的action 1)xxxAction没有在Struts.xml中配置相应的action: 大 ...
- java中的if-Switch选择结构
字随笔走,笔随心走,随笔,随心.纯属个人学习分析总结,如有观者还请不啬领教. 1.if选择结构 什么是if结构:if选择结构是根据判断结果再做处理的一种语法结构. 起语法是: if(判断条件){ 操作 ...
- struts2视频学习笔记 15-17 (访问或添加request属性,文件上传)
课时15 访问或添加request/session/application属性 1.简单说 page指当前页面.在一个jsp页面里有效 2.request 指从http请求到服务器处理结束,返回响应的 ...
- Java三大特征之------多态
1.定义 指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行为方式. 2.存在条件 2.1存在父子关系 2.2子类中存在重写方法 2.3父类类型的变量指向子类对象 ...
- 用Google Analytics跟踪JavaScript Errors (译)
通过custom events来实施 // Track basic JavaScript errors window.addEventListener('error', function(e) { _ ...
- mvc学习记录
1.关于mvc中的session在controller中传递 在用mvc开发新项目的时候,不久就遇到一个头大的问题,session在controller中传递居然出现空值,但明明一开始就赋值了,通过度 ...