参考

  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. 8.10-Day1T1-数字（number）

    数字number 题目大意 给定n,k,s,从1到n中取出k个数,使其之和等于s 求可行的方案数(模1e9+7) 题解 一眼dp,于是我去写了dfs,带着少的可怜的剪枝,快乐的tle着... 设 f[ ...

  2. vue移动端项目在手机上调试

    1.电脑和手机要连同一个wifi  一定是复制无线网的IP,而不是以太网的IP 2.在你的电脑上查找无线网络的ipv4地址: 查找方法:windows+r   然后再输入框里输入cmd 回车 会出现这 ...

  3. HGsoft-downloader

    [NEW]HGsoft-downloader上线了! 给你提供一个简洁无广告的电脑软件下载平台,换个角度下载电脑软件. 网站地址:Go

  4. 生成SSH密钥过程

    1.查看是否已经有了ssh密钥:cd ~/.ssh 如果没有密钥则不会有此文件夹,有则备份删除 2.生存密钥: $ ssh-keygen -t rsa -C "name@doumi.com& ...

  5. ORACLE_BASE、ORACLE_HOME有什么区别

    ORACLE_BASE.ORACLE_HOME有什么区别   ORACLE_BASE下是admin和productORACLE_HOME下则是ORACLE的命令.连接库.安装助手.listener等等 ...

  6. Innovus 对multibit 的支持

    如果在综合阶段没有做multibit merge, 或综合阶段由于缺失物理信息multibit cell merge 不合理,那就需要PR 工具做multibit merge 或split. Inno ...

  7. JS中constructor属性

    constructor属性用于对当前对象的构造函数的引用.可以用来判断对象的类型: <script> var newStr = new String("One world One ...

  8. 简单桶排序（Bucket Sort）

    1.基本思想 桶排序是将待排序集合中处于同一个值域的元素存放在同一个桶中1. 2.算法设计2 假设有一个班级有5个人,这次期末他们分别考了5分,2分,4分,5分,8分(满分为10分).需要将这些分数从 ...

  9. 原生java与js结合

    链接:https://www.jb51.cc/html5/15606.html

  10. 启动ubuntu就直接进入GRUB2.02的命令行界面的问题

    问题:启动ubuntu就直接进入GRUB2.02的命令行界面原因:grub2引导出现问题. 解决方法:图形方法,引导修复 (1)电脑上插入Ubuntu系统启动引导U盘(如果没有引导U盘,就到官网下载一 ...