浅谈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 相关文章推荐
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
php指定函数参数默认值示例代码
2013/12/04 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
python rsa 加密解密
2017/03/20 Python
python中metaclass原理与用法详解
2019/06/25 Python
python多进程并行代码实例
2019/09/30 Python
基于python实现学生信息管理系统
2019/11/22 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python实现爬取并分析电商评论
2020/06/19 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
关于期中考试的反思
2014/02/02 职场文书
承诺书样本
2014/08/30 职场文书
学术会议通知范文
2015/04/15 职场文书
办公经费申请报告
2015/05/15 职场文书
教师节领导致辞
2015/07/29 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python