浅谈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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
js获取php变量的实现代码
Aug 10 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
使用jquery如何获取时间
Oct 13 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
vuex存储token示例
2019/11/11 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
Python实现k-means算法
2018/02/23 Python
python实现zabbix发送短信脚本
2018/09/17 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python程序封装为win32服务的方法
2021/03/07 Python
用python写测试数据文件过程解析
2019/09/25 Python
Pycharm调试程序技巧小结
2020/08/08 Python
HTML5标签小集
2011/08/02 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
九州传奇上机题
2014/07/10 面试题
实习求职信
2013/12/01 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js