浅谈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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
taro 实现购物车逻辑的实例代码
Jun 05 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
Smarty模板快速入门
2007/01/04 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
javascript multibox 全选
2009/03/22 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
jQuery实现简单评论区功能
2020/10/26 jQuery
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
Linux操作面试题
2012/05/16 面试题
财务总监岗位职责
2014/03/07 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
初中英语演讲稿
2014/04/29 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
学习委员竞选稿
2015/11/20 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers