前言:开发中经常使用call、apply、bind方法,但是偶尔还是会忘了它们之间的差别,这里做个总结方便自己回顾。

JavaScript中所有函数都继承了函数原型(Function.prototype)中的 call 与 apply 两个方法,call和apply用于改变函数调用时函数内部this的指向。

第一部分:apply、call方法

  语法:func.apply(thisarg, argsArray),调用一个函数, 指定的this值,和一个数组作为函数调用的参数。

  参数:

    thisarg: 调用func函数时,函数内部真正的this指向,非严格模式下该值为null或undifined时,this默认指向window对象。

    argsArray:调用func函数时传递的参数列表(以数组形式),该值为null或undifined时,表示不传入任何参数。

  返回值:返回指定this和参数的函数的执行结果。

  举例1:改变this的指向

        var name = 'jack'function SayHello() {console.log(this.name + ' say hello!')}//直接执行方法,内部this指向windowSayHello()  //jack say hello!var stu = {name:'john'}//使用apply方法指定SayHello的调用对象为stu,方法中的this就指向stuSayHello.apply(stu) //john say hello!    

  举例2:调用别的对象的方法

        var person = {name: 'jack',introduce: function(){console.log('my name is ' + this.name)}}var manager = {name: 'jone'}//此时的manager对象没有introduce,但是我们又想调用此方法。person.introduce.apply(manager)

  此例中,manager对象中没有introduce方法,但同时又想调用此方法,我们通过apply改变introduce方法中this的指向,从而实现方法的调用。

  举例3:参数为数组的妙用

    1.数组的拼接

        /* 1.数组push方法的参数是数组一个个的元素并非完整的数组 2.如果直接array1.push(array2)程序会报错3.apply要求参数是数组,这里我们就可以借用apply简化数组的追加运算。*/var array1 = [12 , "foo" , -2458]var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); 

    2.最大最小数求值

        /* 1.Math对象的max方法的参数是数组。2.数组本身没有max方法,借助Math对象的max方法,apply调用传入数组完美解决。*/var  numbers = [5, 458 , 120 , -215 ] var maxInNumbers = Math.max.apply(Math, numbers),   //458

  apply和call的区别:对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不一样,apply接收的是数组,call接收的是参数列表。

    举例:数组最大值

        /*  apply接收参数为数组call接收参数为参数列表 */var  numbers = [5, 458 , 120 , -215 ]; var maxInNumbers = Math.max.apply(Math, numbers),   //458maxInNumbers = Math.max.call(Math, 5, 458, 120, -215); //458

第二部分:bind方法

  与apply、call区别:

    bind()也可以改变调用函数体内this的指向,区别apply、call调用方法立即执行,bind()执行结果是返回一个函数并非立即执行。

  语法:func.bind(thisarg, arg...), bind()创建一个新的函数, 函数中this为绑定时指定的值,参数列表为绑定时指定的参数序列。

  参数:

    thisarg: 被绑定函数执行时,函数体内真正的this指向。

    arg...:被绑定函数执行时,传递给函数的参数列表。

  返回值:返回一个指定this和参数列表的函数。

  定时器,dom事件中都存在回到函数,我们通常会使用_this,that,self等暂存this引用,当上下文改变后,我们依然可以调用。

  举例1:绑定到回到函数上

        /* 这里给class为name的dom元素绑定了单击事件click事件只有在真正点击dom元素时候才会触发,此时回到函数中的this代表当前dom元素。*/var foo = {count: 1,clickEvent: function () {$('.name').on('click', function (event) {console.log(this.count)     //undefined
                });}}/* 通过_this = this保留this指向,回掉函数中的this依旧指向foo对象*/var foo = {count: 1,clickEvent: function () {var _this = this$('.name').on('click', function (event) {console.log(_this.count)     //1
                });}}/* 通过bind()函数绑定函数执行时this的指向。*/var foo = {count: 1,clickEvent: function () {$('.name').on('click', function (event) {console.log(this.count)     //1}).bind(this)}}

  总结:

    作用:apply 、 call 、bind 都可以改变调用函数中this的指向。

    参数:apply 、 call 、bind 第一个参数都是函数调用时所指向的this值,后续参数为函数执行时传入的参数列表。

    区别:bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

    

      

  

转载于:https://www.cnblogs.com/diweikang/p/9539787.html

JavaScript中的call、apply、bind如何使用相关推荐

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

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

  2. javascript中call和apply的区别

    我理解javascript中call和apply的区别仅在于语法不同. 下例中分别调用call和apply对myObj进行修改,语法不同,但使用效果是一样的: var myObj = { " ...

  3. JavaScript中call、apply个人理解

    JavaScript中call.apply个人理解 一句话即通俗的说:call.apply 是为了改变this的状态而存在的 var lisi = {name:'李四',age:23};var zs ...

  4. javascript中call和apply的区别和用法

    javascript中call和apply的区别和用法 1.call和apply是什么 更改对象的内部指针指向,即改变对象的this指向的内容 function Fn(){this.name='小明' ...

  5. JavaScript中call和apply方法

    1 /* 2 在js中 call和apply常用于绑定作用域 3 */ 4 //1 简单的绑定 5 function sum(a,b){ 6 return a+b; 7 } 8 //将sum的功能绑定 ...

  6. JavaScript 中 call、apply和bind的用法区别

    ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 其实是一个很简单的东西,认真看十分钟就从一脸懵 ...

  7. JavaScript 中 call()、apply()、bind() 的用法

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例 1 obj.objAge; // 17 obj.myFun() // 小张年龄 undefined 例 2 sho ...

  8. JavaScript中call()和apply()的用法及区别

    call(), apply()都属于Function.prototype的一个方法.它们有相同点也有不同点. 相同点: 1.产生的效果和作用是完全相同的: 2.至少有一个参数,第一个参数必须是一个对象 ...

  9. 详解javascript中的call, apply

    一些学js的同学一看到call, apply, 就蒙了, 感觉不好懂, 看的头大. 今天我们就一起来研究一下这2个东东. 彻底弄清楚它们的用法. 定义: call, apply是函数的方法, 只有函数 ...

  10. [转] 深入浅出 妙用Javascript中apply、call、bind

    [From] http://www.admin10000.com/document/6711.html 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.ca ...

最新文章

  1. event类型 php,深入解析PHP的Laravel框架中的event事件操作
  2. git使用之搭建git仓库
  3. 腾讯云发布“小程序·云开发十大优秀实践”,猫眼、唯品会、香格里拉等入选
  4. 【poj3468】A Simple Problem with Integers
  5. 2.kafka 安装
  6. 电子游戏发展史话——《doom启示录》读后感(三)
  7. lena.raw图片文件下载及打开方式
  8. Hash算法及数字签名【六】
  9. vscode配置html页面自动刷新,Vscode关闭自动更新设置
  10. 华为HCNE—网络工程师培训教材
  11. Confusing conditions about MySQL script
  12. 一些常见的处理器如arm,arduino,stm32,51,树莓派的联系和区别,还有各自的长短板?
  13. 综合架构(备份部分)
  14. 什么是cve什么是cwe_什么是CVE 2020 0601又名Curveball,为何如此危险
  15. HTML:使用单选框、复选框,让用户选择
  16. cPanel 开启 FastCGI
  17. webrtc 的回声抵消(aec、aecm)算法简介(转)
  18. Dagger2的使用总结
  19. Web前端html5+css3前端开发入门学习笔记
  20. Python 爬取煎蛋妹子图

热门文章

  1. LINQ学习——JOIN
  2. div.2/C. They Are Everywheretwo pointer
  3. sleep()和wait()的区别-转
  4. 截取屏幕并保存为BMP文件
  5. 人脸识别中Softmax-based Loss的演化史
  6. mysql磁盘io高是什么造成_FAQ | 是什么导致MySQL数据库服务器磁盘I/O高(本文章来自知数堂)...
  7. python中单下划线(_)和双下划线(__)的特殊用法 还等什么
  8. Facebook AI何恺明等最新研究MoCo(动量对比学习)第二版,超越Hinton的SimCLR,刷新SOTA准确率...
  9. php如何利用soap查看函数,使用PHP soap函数的自定义标题
  10. 表格数据画图神器-pandas画图操作