JavaScript中的call、apply、bind如何使用
前言:开发中经常使用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如何使用相关推荐
- JavaScript中的call,apply,bind学习总结
JavaScript 中的 call, apply, bind 这三个函数的作用和区别在各大论坛都被讨论了很多次了,但是我一直都还没来得及好好总结,这次正好看到了一个很不错的关于JavaScript ...
- javascript中call和apply的区别
我理解javascript中call和apply的区别仅在于语法不同. 下例中分别调用call和apply对myObj进行修改,语法不同,但使用效果是一样的: var myObj = { " ...
- JavaScript中call、apply个人理解
JavaScript中call.apply个人理解 一句话即通俗的说:call.apply 是为了改变this的状态而存在的 var lisi = {name:'李四',age:23};var zs ...
- javascript中call和apply的区别和用法
javascript中call和apply的区别和用法 1.call和apply是什么 更改对象的内部指针指向,即改变对象的this指向的内容 function Fn(){this.name='小明' ...
- JavaScript中call和apply方法
1 /* 2 在js中 call和apply常用于绑定作用域 3 */ 4 //1 简单的绑定 5 function sum(a,b){ 6 return a+b; 7 } 8 //将sum的功能绑定 ...
- JavaScript 中 call、apply和bind的用法区别
ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 其实是一个很简单的东西,认真看十分钟就从一脸懵 ...
- JavaScript 中 call()、apply()、bind() 的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例 1 obj.objAge; // 17 obj.myFun() // 小张年龄 undefined 例 2 sho ...
- JavaScript中call()和apply()的用法及区别
call(), apply()都属于Function.prototype的一个方法.它们有相同点也有不同点. 相同点: 1.产生的效果和作用是完全相同的: 2.至少有一个参数,第一个参数必须是一个对象 ...
- 详解javascript中的call, apply
一些学js的同学一看到call, apply, 就蒙了, 感觉不好懂, 看的头大. 今天我们就一起来研究一下这2个东东. 彻底弄清楚它们的用法. 定义: call, apply是函数的方法, 只有函数 ...
- [转] 深入浅出 妙用Javascript中apply、call、bind
[From] http://www.admin10000.com/document/6711.html 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.ca ...
最新文章
- event类型 php,深入解析PHP的Laravel框架中的event事件操作
- git使用之搭建git仓库
- 腾讯云发布“小程序·云开发十大优秀实践”,猫眼、唯品会、香格里拉等入选
- 【poj3468】A Simple Problem with Integers
- 2.kafka 安装
- 电子游戏发展史话——《doom启示录》读后感(三)
- lena.raw图片文件下载及打开方式
- Hash算法及数字签名【六】
- vscode配置html页面自动刷新,Vscode关闭自动更新设置
- 华为HCNE—网络工程师培训教材
- Confusing conditions about MySQL script
- 一些常见的处理器如arm,arduino,stm32,51,树莓派的联系和区别,还有各自的长短板?
- 综合架构(备份部分)
- 什么是cve什么是cwe_什么是CVE 2020 0601又名Curveball,为何如此危险
- HTML:使用单选框、复选框,让用户选择
- cPanel 开启 FastCGI
- webrtc 的回声抵消(aec、aecm)算法简介(转)
- Dagger2的使用总结
- Web前端html5+css3前端开发入门学习笔记
- Python 爬取煎蛋妹子图
热门文章
- LINQ学习——JOIN
- div.2/C. They Are Everywheretwo pointer
- sleep()和wait()的区别-转
- 截取屏幕并保存为BMP文件
- 人脸识别中Softmax-based Loss的演化史
- mysql磁盘io高是什么造成_FAQ | 是什么导致MySQL数据库服务器磁盘I/O高(本文章来自知数堂)...
- python中单下划线(_)和双下划线(__)的特殊用法 还等什么
- Facebook AI何恺明等最新研究MoCo(动量对比学习)第二版,超越Hinton的SimCLR,刷新SOTA准确率...
- php如何利用soap查看函数,使用PHP soap函数的自定义标题
- 表格数据画图神器-pandas画图操作