浅谈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 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
详解jQuery事件
Jan 13 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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
再说下636单管机
2021/03/02 无线电
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
js get和post请求实现代码解析
2020/02/06 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Python 文件重命名工具代码
2009/07/26 Python
Python中import机制详解
2017/11/14 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
浅谈python 类方法/静态方法
2020/09/18 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
医学类个人求职信范文
2014/02/05 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Python办公自动化之Excel(中)
2021/05/24 Python