参考

  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. rest framework 序列化之depth遇到用户表外键的尴尬情况

    rest framework 序列化之depth遇到用户表外键的尴尬情况 问题:ModelSerializer序列化使用depth=1直接扩表把用户表所有信息查询出来的情况 class xxxSeri ...

  2. XSS 4

    第四题 进去后是这个样子的 然后我们随便输入第三题中的数据发现 不可以运行 看一下右边 发现()被替换成空内容 然后我们改一下  括号可以用倒引号替换 然后我们改一下 然后就通过了 原因:这个题是有关 ...

  3. AcWing 872. 最大公约数

    #include <iostream> #include <algorithm> using namespace std; //辗转相除法 //a和b的最大公约数 = b和(a ...

  4. Docker - 创建第一个 docker 实例

    1. 概述 安装完准备开始使用 2. 环境 os centos 7 docker docker - ce 19.03 3. 步骤 启动docker > systemctl start docke ...

  5. Centos6.10-FastDFS-存储器Http配置

    Centos610系列配置 1.准备配置 cd /opt/download/fastdfs-master/confcp http.conf /etc/fdfs/http.confcp mime.typ ...

  6. Django框架之ORM的相关操作之分页（六）

    分页是每个项目必不可少要写的一个功能,该篇文章就将记录一下使用ORM写分页的过程. 假设我们的数据库里面需要显示一些数据,而这个表中的数据大约有几千条数据,那么我们不可能将所有的数据都显示出来,那么就 ...

  7. 多进程pipe

    pipe模块可以实现进程之间数据传递 栗子1:3个进程,一个主进程,2个子进程,三个管道,三个进程通过3个管道连接,主进程发一个信息,通过2个子进程转发,最后回到主进程输出 import multip ...

  8. [踩坑记录] windows10 应用商店打不开 代码: 0x80131500

    在某博客看到的方法,供参考,可以尝试一下,我的也是这么解决的1.打开“运行”输入 inetcpl.cpl (“WINDOWS”+“R”键,输入 inetcpl.cpl亦可)2.点开高级往下拉,勾上&q ...

  9. Java web 会话技术 cookie与session

    一.会话 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话过程中要解决的一些问题 每个用户在使用浏览器与服务器进行会话的过程 ...

  10. 【Struts 编码】

    EncodingFilter package k.filter; import javax.servlet.*; import javax.servlet.http.HttpServlet; impo ...