参考

  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. mysql存储表情报错

    数据库版本:mysql  Ver 8.0.16 数据库字符集:utf8 原因:mysql的utf8编码的一个字符最多3个字节,但是一个emoji表情为4个字节,所以utf8不支持存储emoji表情.但 ...

  2. Python socket day5

    下载文件 程序04,05 服务端在接收到文件名时应该用try来打开文件,不应该用with open来打开否则,如果文件名不存在,用with open 会出错误 客户端要判断服务端发送的数据是否为空,不 ...

  3. 数星星 Stars

    问题 A: 数星星 Stars 时间限制: 1 Sec  内存限制: 128 MB[命题人:admin] 题目描述 输入 第一行一个整数 N,表示星星的数目: 接下来 N 行给出每颗星星的坐标,坐标用 ...

  4. 前端——语言——Core JS——《The good part》读书笔记——第四章节(Function)

    本章介绍Function对象,它是JS语言最复杂的内容. Java语言中没有Function对象,而是普通的方法,它的概念也比较简单,包含方法的重载,重写,方法签名,形参,实参等. JS语言中的Fun ...

  5. nginx autoindex 配置目录浏览功能

    Nginx打开目录浏览功能 yum install httpd-tools -y cd /usr/local/openrestry/nginx/conf/ htpasswd -c passwd adm ...

  6. Spring-postConstruct参考-转载

    Spring@PostConstruct注解和构造方法的调用顺序 先看下@PostConstruct的注解 * The PostConstruct annotation is used on a me ...

  7. 树莓派安装ubuntu_meta并配置开发环境

    1.烧录系统 首先准备好我们要烧录的ubuntu_meta系统,可以在树莓派官网中下载https://www.raspberrypi.org/downloads/ 这里我们选择 Raspberry P ...

  8. [1/100]Python安装

    Python官方版本下载地址: https://www.python.org/downloads/release (上图为3.8.2网络安装版) 默认安装: pip Python安装模块 tkinte ...

  9. socketserver tcp黏包

    socket (套接字) tcp(黏包现象原因) 传输中由于内核区缓冲机制(等待时间,文件大小),会在 发送端 缓冲区合并连续send的数据,也会出现在 接收端 缓冲区合并recv的数据给指定port ...

  10. HDFS的常用命令

    一.常用命令 二.其他命令