浅谈js中的bind


Posted in Javascript onMarch 18, 2019

提到bind方法,估计大家还会想到call方法、apply方法;它们都是Function对象内建的方法,它们的第一个参数都是用来更改调用方法中this的指向。需要注意的是bind 是返回新的函数,以便稍后调用;apply 、call 则是立即调用原函数 。而今天我们主要讲解bind方法的理解与使用。

bind方法是EcmaScript5新增的方法,该方法在mdn上是这么介绍的:

bind()方法创建一个新的函数(称为绑定函数), 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

语法:

fun.bind(thisArg[, arg1[, arg2[, …]]])

参数thisArg表示:当绑定函数被调用时,该参数会作为this的指向。当使用new 操作符调用绑定函数时,该参数无效。
参数arg1, arg2, …表示:当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。
先来看个例子:

this.name="jack";
var demo={
name:"rose",
getName:function(){return this.name;}
}

console.log(demo.getName());//输出rose 这里的this指向demo

var another=demo.getName;
console.log(another())//输出jack 这里的this指向全局对象
 
//运用bind方法更改this指向
var another2=another.bind(demo);
console.log(another2());//输出rose 这里this指向了demo对象了

bind的应用

可以对一个函数预设初始参数:

function a(){
return Array.prototype.slice.call(arguments);//将类数组转换成真正的数组
}
var b=a.bind(this,15,20)
alert(b());//弹出 15,20
var s=b(25,30);
alert(s);//弹出 15,20,25,30

js bind的多次绑定只有第一次是有效的

var getname = function(){console.log(this.name)};
var m = getname.bind({name:'q1'}).bind({name:'q2'});
m();

输出的是q1

以上所述是小编给大家介绍的js中的bind详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持! 

Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 #Javascript
JavaScript中this用法学习笔记
Mar 17 #Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 #Javascript
微信小程序登录session的使用
Mar 17 #Javascript
Javascript读写cookie的实例源码
Mar 16 #Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 #Javascript
vue自定义指令用法经典实例小结
Mar 16 #Javascript
You might like
基于mysql的bbs设计(三)
2006/10/09 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
newxtree.js代码
2007/03/13 Javascript
JS高级笔记
2011/07/13 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Python中操作MySQL入门实例
2015/02/08 Python
Python运算符重载用法实例
2015/05/28 Python
python实现简易数码时钟
2021/02/19 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
如何通过python计算圆周率PI
2020/11/11 Python
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
个人四风对照检查材料
2014/09/26 职场文书
财会专业大学生求职信
2014/09/26 职场文书
学期个人工作总结
2015/02/13 职场文书
小学班主任工作随笔
2015/08/15 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python