在JavaScript中,call、apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向。apply和call方法、bind方法都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()、bind()方法时,就会改变this的指向。

call、apply、bind方法的共同点:

  • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
  • apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值——本次调用的上下文(context)——这就是this关键字的值。);
  • apply 、 call 、bind 三者都可以利用后续参数传参;

call、apply、bind方法的区别:

  • bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

apply()方法:能劫持另外一个对象的方法,继承另外一个对象的属性.

Function.apply(obj,args)

接收两个参数:obj:这个对象将代替Function类里this对象,args:这个是数组,它将作为参数传给Function(args-->arguments)

obj的取值有以下4种情况:
(1) 不传,或者传null,undefined, 函数中的this指向window对象
(2) 传递另一个函数的函数名,函数中的this指向这个函数的引用
(3) 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean
(4) 传递一个对象,函数中的this指向这个对象

apply示例:

/*定义一个人类*/
function Person(name,age) {
this.name=name;
this.age=age;
}
/*定义一个学生类*/
function Student(name,age,grade) {
Person.apply(this,arguments);
this.grade=grade;
}
//创建一个学生类
var student=new Student("qian",21,"一年级"); //测试
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//测试结果name:qian age:21 grade:一年级
//学生类里面没有为name和age属性赋值,为什么又存在这两个属性的值?这个就是apply的神奇之处.

分析: Person.apply(this,arguments);

this:在创建对象在这个时候代表的是student,arguments:是一个数组,也就是[“qian”,”21”,”一年级”];

通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面

call():和apply的意思一样,只不过是参数列表不一样.

Function.call(obj,[param1[,param2[,…[,paramN]]]])  :obj:这个对象将代替Function类里this对象  ,params:这个是一个参数列表

call示例

在Studen函数里面可以将apply中修改成如下:

Person.call(this,name,age);  

什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

apply的一些其他巧妙用法

在调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合,  在调用Person的时候,他需要的不是一个数组,但是为什么他给一个数组仍然可以将数组解析为一个一个的参数,

这个就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3),这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:

  • Math.max:可以实现得到数组中最大的一项 。因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组,但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决

     var max=Math.max.apply(,array),

    这样轻易的可以得到一个数组中最大的一项 (apply会将一个数组装换为一个参数接一个参数的传递给方法),这块在调用的时候第一个参数给了一个,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个过去

  • Math.min  可以实现得到数组中最小的一项,同样和 max是一个思想
     var min=Math.min.apply(,array);  
  • Array.prototype.push 可以实现两个数组合并,同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:  
    var arr1=new Array("1","2","3");
    var arr2=new Array("4","5","6"); Array.prototype.push.apply(arr1,arr2);

    也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.

通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),可以通过apply的方式巧妙地解决这个问题!

bind()

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

注意:bind方法的返回值是函数

var bar=function(){
console.log(this.x);
}
var foo={
x:3
}
bar(); //undefined
var func=bar.bind(foo);
func(); //

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

var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
var sed = {
x:4
}
var func = bar.bind(foo).bind(sed);
func(); //? var fiv = {
x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

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

apply()、call()、bind()的更多相关文章

  1. js中bind、call、apply函数的用法

    最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...

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

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

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

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

  4. 原生JS:Function对象(apply、call、bind)详解

    Function对象(apply.call.bind) 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5850180.html 本文参考MDN做的 ...

  5. Javascript中bind、call、apply函数用法

    js 里函数调用有 4 种模式:方法调用.正常函数调用.构造器函数调用.apply/call 调用. 同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形参,分别是 this 和ar ...

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

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

  7. Javascript中apply、call、bind

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

  8. 妙用Javascript中apply、call、bind

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

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

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

  10. 博文推荐】Javascript中bind、call、apply函数用法

    [博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...

随机推荐

  1. window下进程退出后自动重启

    设计思想:编写批处理脚本监控进程的运行状态,如果发现进程停止,则自动重启该进程.批处理脚本(jk.bat)和进程脚本(hello.bat)如下: 1.jk.bat @echo off rem 定义需监 ...

  2. Java进阶学习(1)之类与对象(下)

    类与对象 函数与调用 函数是通过对象来调用的 this 是成员函数的特殊的固有的本地变量 它表达了调用这个函数的那个对象 调用函数 通过 . 运算符,调用某个对象的函数 在成员函数内部直接调用自己(t ...

  3. 【PAT甲级】1092 To Buy or Not to Buy (20 分)

    题意: 输入两行字符串,如果第二行字符串包含于第一行字符串,输出"Yes"以及第一行字符串减去第二行字符串剩余的字符个数,否则输出"No"以及第二行字符串中不在 ...

  4. PLSQL用户登录时报错: no listener

    报错原因是因为服务没有开启,找到oracle的相应服务开启即可.

  5. 无刷新的批量图片上传插件.NET版

    啥都不说,先上效果图: 这是一个网上的第三方组件,原版是php的,我用.NET重写了图片上传的处理,下面贴上代码 using System; using System.Collections.Gene ...

  6. Plastic Bottle Manufacturer Tips - Attention To Plastic Bottle Processing Technology

    In fact, the processing technology of plastic bottles is actually quite strict. In fact, regular man ...

  7. DataFrame loc和iloc的区别

    loc loc是select by label(name) loc函数是选择dataframe中那一行的index == k的 iloc loc是select by position loc函数是选择 ...

  8. 【渗透测试】Msf提权步骤

    1.生成反弹木马(脚本,执行程序) msfvenom -p windows/meterpreter/reverse_tcp LHOST=<Your IP Address> LPORT=&l ...

  9. JS bind()方法、JS原生实现bind()

    一.arguments的含义 // arguments 是一个对应于传递给函数的参数的类数组对象 function a(){ console.log(arguments); } a(); // Arg ...

  10. 吴裕雄 python 神经网络——TensorFlow训练神经网络:卷积层、池化层样例

    import numpy as np import tensorflow as tf M = np.array([ [[1],[-1],[0]], [[-1],[2],[1]], [[0],[2],[ ...