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

call,apply,bind这三个方法其实都是继承自Function.prototype中的,属于实例方法。bind方法和call、apply方法有些不同,但是不管怎么说它们都可以用来改变this的指向。

  1. 情景:
  2. var a = {
  3. user:"xxx",
  4. fn:function(){
  5. console.log(this.user);
  6. }
  7. }
  8. var b = a.fn;
  9. b(); //undefined;
  10. a.fn(); //xxx;
  11. console.log(Function.prototype.hasOwnProperty('call')) //true;
  12. console.log(Function.prototype.hasOwnProperty('apply')) //true;
  13. console.log(Function.prototype.hasOwnProperty('bind')) //true;

call & apply

调用一个对象的一个方法,以另一个对象替换当前对象。apply、call 的区别:作用完全一样,只是接受参数的方式不太一样,这两个方法通常被用来类的继承和回调函数

  1. 情景1
  2. var a = {
  3. user:"xxx",
  4. fn:function(){
  5. console.log(this.user); //xxx
  6. }
  7. }
  8. var b = a.fn;
  9. b.call(a);
  10. //b.apply(a);
  11. 通过在call方法,给第一个参数添加要把b添加到哪个环境中,简单来说,this就会指向那个对象。
  12. 同样apply也可以有多个参数,但是不同call方法的是,第二个参数必须是一个数组;
  13. var a = {
  14. user:"xxx",
  15. fn:function(e,ee){
  16. console.log(this.user); //xxx
  17. console.log(e+ee); //3
  18. }
  19. }
  20. var b = a.fn;
  21. b.call(a,1,2);
  22. //b.apply(a,[1,2]);
  23. 或者:
  24. var arr = [1,2];
  25. b.apply(a,arr);
  26. 特殊:
  27. 注意如果callapply的第一个参数写的是null,那么this指向的是window对象
  28. var a = {
  29. user:"xxx",
  30. fn:function(){
  31. console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
  32. }
  33. }
  34. var b = a.fn;
  35. b.apply(null);

bind

bind()是es5中的方法,实现上下文绑定.bind是新创建一个函数,然后把它的上下文绑定到bind()括号中的参数上,然后将它返回。bind后函数不会执行,而只是返回一个改变了上下文的函数副本,而call和apply是直接执行函数。


  1. var button = document.getElementById("button"),text = document.getElementById("text");
  2. button.onclick = function() {
  3. alert(this.id); // 弹出text
  4. }.bind(text);
  5. 情景1
  6. var a = {
  7. user:"追梦子",
  8. fn:function(){
  9. console.log(this.user);
  10. }
  11. }
  12. var b = a.fn;
  13. b.bind(a);
  14. 代码没有被打印,对,这就是bindcallapply方法的不同,实际上bind方法返回的是一个修改过后的函数:
  15. var c = b.bind(a);
  16. console.log(c); //function() { [native code] }
  17. 同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的:
  18. var a = {
  19. user:"追梦子",
  20. fn:function(e,d,f){
  21. console.log(this.user); //追梦子
  22. console.log(e,d,f); //10 1 2
  23. }
  24. }
  25. var b = a.fn;
  26. var c = b.bind(a,10);
  27. c(1,2);
  28. var a = {
  29. user:"追梦子",
  30. fn:function(){
  31. console.log(this.user); //追梦子
  32. }
  33. }
  34. var b = a.fn;
  35. var c = b.bind(a);
  36. c();

  函数实例的call方法,可以指定该函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。并且会立即执行该函数。

总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。


继承:call、apply、bind方法的更多相关文章

  1. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  2. JavaScript中call,apply,bind方法的区别

    call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...

  3. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏

    new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...

  4. JavaScript中call,apply,bind方法的总结。

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  5. call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  6. JavaScript中call,apply,bind方法的总结

    原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...

  7. call, apply,bind 方法解析

    call(), apply(),bind() 三者皆为Function的方法 call(),apply()的作用是调用方法,并改变函数运行时的context(作用上下文) bind() 的作用是引用方 ...

  8. JS中call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  9. javascript中的call(),apply(),bind()方法的区别

    之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...

  10. JavaScript中call,apply,bind方法

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

随机推荐

  1. StartUML用法

    转载地址  http://blog.csdn.NET/tianhai110 (下面参考了原博主的内容,也加入自己的内容,为了自己脑补,也方便其他看到的人脑补) 使用StartUML绘制用例图:     ...

  2. 阵列卡raid H730写策略write-through和write-back配置说明

    问题描述: 最近公司新进了测试服务器,但是在做阵列的时候忘记写策略里面的配置意思了 就网上查了一下,然后顺便做个笔记记录一下 write-through 数据在写入存储的同时,要写入缓存,这种方式安全 ...

  3. 在CDS(Core Data Services)中使用DCL(Data Control Language)

    最近,我在玩ABAP CDS视图,并且遇到了一些权限方面的挑战.我在网上没看到有多少有关CDS开发的文档,因为它是个相当新的东西.因此,我决定写下这篇博客,也许我的想法可以帮助到一些人. 和你已经意识 ...

  4. 【转】BAT批处理中的字符串处理详解(字符串截取)

    下面对这些功能一一进行讲解. 1.截取字符串 截取字符串可以说是字符串处理功能中最常用的一个子功能了,能够实现截取字符串中的特定位置的一个或多个字符.举例说明其基本功能: @echo off set ...

  5. M100 (0)开发

    [SDCC 2015现场]大疆Paul Yang:多旋翼飞行器的未来就是机器人的未来 http://www.csdn.net/article/2015-11-19/2826268 开发官网 https ...

  6. QT 14 线程使用

    1 线程基础 QThread 是对本地平台线程的一个非常好的跨平台抽象.启动一个线程非常简单.让我们看一段代码,它产生另一个线程,该线程打印hello,然后退出. // hellothread/hel ...

  7. go标准库的学习-crypto/des

    参考:https://studygolang.com/pkgdoc 导入方式: import "crypto/des" des包实现了DES标准和TDEA算法,参见U.S. Fed ...

  8. solidity ecrecover

    https://solidity.readthedocs.io/en/latest/units-and-global-variables.html#mathematical-and-cryptogra ...

  9. 监控nginx

    vi nginx_status.sh #!/bin/bash HOST="127.0.0.1" PORT="9222" # 检测nginx进程是否存在 func ...

  10. 纯html页面中js如何获得项目路径

    js,全称javascript,不过虽然是以java开头,不过与java一点关系都没有. js和java有如下区别: (1)js是浏览器端的语言,而java是服务器端的语言. (2)js是动态语言,j ...