通过学习call(),apply(),bind()的用法和区别,我们能更好的理解this及作用域的含义,为后面的编程打下基础。

call()的用法:

调用一个函数,使其具有一个指定的this值和分别地提供的参数(参数的列表)

参数解释:function.call(thisArg, arg1, arg2, ...)

thisArg:在fun函数运行时指定的this值*。*需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于non-strict mode,则指定为nullundefinedthis值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, ...:指定的参数列表。

举例说明:

function Animal(type, value) {this.type = type;this.value = value;}
function Dog(type, value) {Animal.call(this, type, value);this.name = "二狗子";this.age = 18}
var hehe = new Dog("室友", "1");
console.log(hehe.name); //二狗子
console.log(hehe.type); //室友
复制代码

在上述例子中,通过call改变了Animalthis指向Dog,并且将参数typevalue传入Animal中。

apply()的用法

调用一个具有给定this值的函数,以及作为一个数组(或类似数组对象)提供的参数。

参数解释:func.apply(thisArg, [argsArray])

thisArg: 可选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 nullundefined 时会自动替换为指向全局对象,原始值会被包装。

argsArray:可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 nullundefined,则表示不需要传入任何参数。

举例说明:

//求数组中的最大值
var arr = [2, 7, 10, 1]function getMax2(arr) {return Math.max.apply(null, arr);//return Math.max.call(null, ...arr);  }console.log(getMax2(arr));  //10alert(Math.max(1,4,9,6));   //9
复制代码

在上述例子中,我们可以看出applycall的不同:**接收的参数一个是数组一个是参数列表。**而在Math.max.apply(null, arr)apply会自动将数组转变成参数列表,其等价于Math.max(2,7,10,1)

apply还多用于构造函数绑定:链接

bind()的用法

创建一个新的函数,在调用时设置this关键字为提供的值。并在调用新函数时,将给定参数列表作为原函数的参数序列的前若干项。

参数解释: function.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg:调用绑定函数时作为this参数传递给目标函数的值。 如果使用new运算符构造绑定函数,则忽略该值。当使用bindsetTimeout中创建一个函数(作为回调提供)时,作为thisArg传递的任何原始值都将转换为object。如果bind函数的参数列表为空,执行作用域的this将被视为新函数的thisArg

arg1, arg2, ...:当目标函数被调用时,预先添加到绑定函数的参数列表中的参数。

举例说明:

 window.value = 3;var foo = {value:1};function bar() {console.log(this.value);}bar();   // 3bar.call(foo);    //1
//指定函数this绑定为foo, 产生一个新函数,之后再运行的时候,内部的this就是被绑定的对象var bindFoo = bar.bind(foo);setTimeout( function() {bindFoo();},2000)
// 2秒后打印 1
复制代码

这个例子可以通过对比,很好的理解bind的运用:

  • bar()直接调用函数,其中的value指的是全部变量value = 3

  • bar.call(foo)这里使用call立刻改变了bar中的this指向为foo

var bindFoo = bar.bind(foo);
setTimeout( function() {bindFoo();
},2000)
复制代码
  • bind 常用于异步,在setTimeout中,设置的时间内,barthis保留着指向foo,所以两秒后打印1,不是3。

通过这个例子,我们了解到call(),apply()bind()不同之处是bind()可以为目标函数保留this的指向,当执行目标函数时,this会指向设置的作用域。

说明:参数解释来源于MDN

转载于:https://juejin.im/post/5cb316dcf265da03904c08f1

call(),apply(),bind()的用法及举例相关推荐

  1. call() , apply() ,bind()的用法

    call() , apply() ,bind()的用法 - 作用:改变this指向,可以传递参数 - 语法: A.call(B, 参数1, 参数2)A.apply(B, [ 参数1, 参数2])A.b ...

  2. 复习javascript中call,apply,bind的用法

    一直很难理解js中的call apply bind,在w3schools,mdn阅读了,也看了很多相关的文章,今天我来写下我理解的call apply bind 首先创建一个函数 function m ...

  3. call,apply,bind的用法与区别

    1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...

  4. call,apply,bind,new实现原理

    在实际开发过程中,对于函数封装时,不确定外部是谁调用的,调用函数内部方法时,有可能是window调用这时就会报错,常使用call,apply,bind来绑定this指向. Function.proto ...

  5. python里apply用法_Python apply函数的用法

    Python apply函数的用法 发布于 2014-08-07 21:02:24 | 674 次阅读 | 评论: 0 | 来源: 网友投递 Python编程语言Python 是一种面向对象.解释型计 ...

  6. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏

    new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...

  7. call / apply / bind

    对于 call / apply / bind 来说,他们的首要目的是用于改变执行上下文的 this 指针. call / apply 对 call / apply 的使用,一般都如下,用于改变执行环境 ...

  8. python enumerate函数_关于python中enumerate和zip函数的用法及举例

    关于python中enumerate和zip函数的用法及举例 关于enumerate函数: enumerate函数可以同时返回列表或元组等可迭代对象的下标和内容,但实际上,enumerate函数实际返 ...

  9. JavaScript中的call,apply,bind学习总结

    JavaScript 中的 call, apply, bind 这三个函数的作用和区别在各大论坛都被讨论了很多次了,但是我一直都还没来得及好好总结,这次正好看到了一个很不错的关于JavaScript ...

最新文章

  1. 1049. 数列的片段和
  2. JavaScript实现euclideanDistance欧氏距离算法(附完整源码)
  3. openHEVC 编译 for VS2017+Win10 x64
  4. IntelliJ IDEA for Mac自定义动态代码模板快捷键(Live Templates Shortcut)
  5. nyist 17 -----记忆式搜索------Accept
  6. 02、Windows Phone 套接字(Socket)实战之服务器端设计
  7. 零氪科技与诺华达成战略合作 共同打造数字化医疗创新模式
  8. 神州数码否认买下华为荣耀,股价连续第二日涨停,创历史新高!
  9. [译]GLUT教程 - 整合代码3
  10. 51单片机原理知识点,复位时钟和时序(二)
  11. 磁盘设置压缩导致无法将数据库还原到该硬盘的问题
  12. 关闭打印机 文件共享的服务器,文件和打印机共享服务可以禁止?
  13. 程序员技能与成长:程序员的必备工具箱(值得收藏)
  14. theano安装教程 linux,Ubuntu安装Theano+CUDA
  15. 常见容错机制:failover、failfast、failback、failsafe
  16. vue实现5秒后自动跳转到首页
  17. 实验三+161+张丽霞
  18. chmod 777 什么意思:鸟哥的linux私房菜第六章学习笔记
  19. 用PV操作写出一个不会出现死锁的哲学家进餐问题
  20. c语言中f5的作用,3G的AKA协议中F1至F5的UE端的实现(附代码C语言)

热门文章

  1. Android中measure过程、WRAP_CONTENT详解以及 xml布局文件解析流程浅析
  2. 《Lua游戏开发实践指南》学习笔记3
  3. TCP三次握手与四次断开
  4. Ubuntu下GTK的安装
  5. 增大减小LV大小和文件系统
  6. Beaker:一个基于Electron的点对点Web浏览器
  7. Linux网络设置2——虚拟机中的Linux和Windows网络互通设置
  8. 参加51CTO学院软考培训,通过后感想
  9. 【java项目实战】代理模式(Proxy Pattern),静态代理 VS 动态代理
  10. MySQL force Index 强制索引概述