参考

  1. https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp
  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
  3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
  4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

区别

  1. Objects in JavaScript, these 3 methods are used to control the invocation of the function. call() and apply() were introduced in ECMAScript 3 while bind() was added as part of ECMAScript 5.（改变this指向）
  2. call/apply方法的区别只是第二个参数的不同。
  3. You can use call()/apply() to invoke the function immediately.（call()和apply()立即执行，没有返回东西）
  4. bind()返回一个新的函数（相对于复制了同样的函数，this指向指定的对象，返回绑定后的函数。）注意，f1.bind(obj,...)后，obj.f1并不存在，所以只是改变了函数this的指向，并返回新的函数。

例子1

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script>

    function foo(x,y) {

      console.log((x+y)+this);

    }

    var obj = {

      age:10,

      sayHi:function () {

        console.log("年龄是:"+this.age);

      }

    };

    var f1 = foo.bind(obj, 100, 200);

    f1();  // bind复制函数后，绑定到对象，然后返回新的绑定后的函数

    obj.f1(); // Uncaught TypeError: obj.f1 is not a function , bind只是返回一个函数，改变了函数里的this指向，并没有在obj中添加函数f1

    // bind什么都可，因为改变的是this的指向，看下面的两个bind

    // f1.bind('1',100,200)

    // f1.bind(1,100,200)

    var f2 = foo.call(obj, 100, 200);

    f2();  // Uncaught TypeError, 因为call没有返回值

    var f3 = foo.apply(obj, [100, 200]);

    f3();  // Uncaught TypeError, 因为apply没有返回值

  </script>

</head>

<body>

</body>

</html>

例子2

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script>

    //构造函数

    function F1() {

      // 一个随机数

      this.number=Math.ceil(Math.random()*10)+1;

    }

    //原型中添加了一个方法

    F1.prototype.show1=function () {

      //this---->实例对象

      window.setTimeout(this.show2.bind(this),1000);

      // 因为 var f = this.show2只是一个function，f.bind(this)就将this指向了F1的实例对象。不然没有bind的话，f传进去window.setTimeout，this指向window。

    };

    //原型中添加了一个方法

    F1.prototype.show2=function () {

      //this---->实例对象

      //输出了自己产生的随机数

      console.log(this.number+"产生了一个数字");

    };

    var f1=new F1();

    f1.show1();

  </script>

</head>

<body>

</body>

</html>

JavaScript - call() , apply() and bind()的更多相关文章

  1. Javascript 中apply call bind

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

  2. javascript中apply,call,bind区别，bind兼容等问题总结

    1 三者的相似之处: (1).都是用来改变函数的this对象的指向的 (2).都是用第一个参数来做this对象的指向 (3).都可以传参数进去 那么,具体到它们有什么区别呢?请看下面的例子: 两个对象 ...

  3. 理解 JavaScript call()/apply()/bind()

    理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...

  4. javascript & call & apply & bind & new

    javascript & call & apply & bind & new Javascript call() & apply() vs bind()? ht ...

  5. Javascript中call，apply，bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

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

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

  7. Javascript中call、apply、bind函数

    javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数 javascript中函数也是对象,call.apply.bind函数就是函数中的三个函数,这 ...

  8. javascript中apply、call和bind的区别，容量理解，值得转！

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

  9. 解析JavaScript中apply和call以及bind

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间 ...

随机推荐

  1. Tarjan-SCC-NOIP2015message

    This article is made by Jason-Cow.Welcome to reprint.But please post the writer's address. http://ww ...

  2. nginx配置指令auth_basic、auth_basic_user_file及相关知识

    参考链接 https://www.jianshu.com/p/1c0691c9ad3c auth_basic_user_file 所需要的密码,可以通过如下方法生成 1)安装htpasswd (yum ...

  3. Hadoop3.1.1源码Client详解 : Packet入队后消息系统运作之DataStreamer(Packet发送) : 主干

    该系列总览: Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览 在上一章(Hadoop3.1.1源码Client详解 : 写入准备-RPC调用与流的建立) 我们提到, ...

  4. php 基础 字符型转换整形

    示例: 可以得出规律:以有效数字开头的,取有效数字.以非有效数字开头的都转换为0:

  5. 一份比较详细的DOS命令说明

    一份比较详细的DOS命令说明 1 echo 和 @ 回显命令 @                     #关闭单行回显 echo off              #从下一行开始关闭回显 @echo ...

  6. ACM进阶之路

    第一阶段:练经典常用算法,下面的每个算法给我打上十到二十遍,同时自己精简代码, 因为太常用,所以要练到写时不用想,10-15分钟内打完,甚至关掉显示器都可以把程序打 出来. 3.大数(高精度)加减乘除 ...

  7. plutosdr初步

    关于最近新出的pluto sdr ,一款较新的sdr,可以通过破解将ad9363改成ad9361,提升频率范围,但是据说没有办法改变带宽. 可以通过补丁方式使用某款软件来进行收听fm

  8. python中，字符串前的u，b，r字符的含义

    1.字符串前加 u 例:u"我是含有中文字符组成的字符串." 作用: 后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格式问题,导致再次使用时 ...

  9. 批量离线安装jar 包到maven本地仓库

    //installer.bat@echo offset localdir=%~dp0call mvn install:install-file -DgroupId=org.zhixun -Dartif ...

  10. canvas的beginPath和closePath

    https://www.cnblogs.com/xuehaoyue/p/6549682.html https://segmentfault.com/a/1190000010330319 https:/ ...