参考

  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. vue使用axios访问后台接口

    链接1:https://segmentfault.com/a/1190000012635783#item-2    // axios 使用post方式传递参数,后端接受不到,怎么解决 链接2:http ...

  2. [单片机] ESP8266 开机自动透传

    AT+CWMODE=1//设置WiFi工作在透传模式 AT+CWJAP_DEF="XX","YYY"//设置要链接的wifi名称.密码,并进行连接 //设置TC ...

  3. Servlet获取配置信息（ServletConfig）

    ServletConfig ServletConfig:当Servlet容器初始化Servlet时,Servlet容器会给Servlet的init方法传入一个ServletConfig.Servlet ...

  4. OO博客作业-《JML之卷》

    OO第三单元小结 一.JML语言理论基础以及应用工具链情况梳理 一句话来说,JML就是用于对JAVA程序设计逻辑的预先约定的一种语言,以便正确严格高效地完成程序以及展开测试,这在不能容忍细微错误的工程 ...

  5. gcc 简单使用笔记

    编译生成可执行文件(bin文件): gcc test.c //默认生成可执行文件名为a.out 指定可执行文件名: gcc -o test test.c 编译生成目标文件(.o文件): gcc -c ...

  6. 每天进步一点点------SOPC的Avalon-MM IP核(一) avalon总线的信号时序

    在SOPC中自定义外设时.可以设置avalon总线的信号时序,以满足外设的要求.一般情况下,可以设为: 其中setup为read和write信号之前,address和writedata信号提前建立的时 ...

  7. 京东秒杀抢购的小脚本和chorme的一个开发者插件

    chorme开发者插件 下载源码包:https://github.com/gongjunhao/seckill/archive/master.zip 解压:seckill-master.zip 打开c ...

  8. maven设置指定jdk版本

    今天心血来潮准备折腾一下jeecg,去下载了一个maven版本的项目,既然下载了maven版的,当然就要配置好maven环境了. 因为之前简单学习过maven,当时使用的版本是3.3.9的,但是今天在 ...

  9. Unity 鼠标旋转物体360展示

    PC端 using UnityEngine; using System.Collections; public class DragRound : MonoBehaviour { public Tra ...

  10. 归并非递归、快排递归及非递归的C++实现及时间效率对比。。

    今天看剑指offer突然发现下学期都要去面试了,还没自己实现过快排非递归和归并非递归,这怎么能行呢,于是就写了一下. (虽然有点卡壳,又回去翻了下算导,还是顺利写出来了) 先放图: 一亿数据量: #p ...