网站首页 > 技术文章 正文
javascript方法--bind()
bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解。
语法
fun.bind(this,arg1,arg2,...)
bind()方法会创建一个新的函数,称为绑定函数,fun方法在this环境下调用
该方法可传入两个参数,第一个参数作为this,第二个及以后的参数则作为函数的参数调用
实例
1.创建绑定函数
this.a = 1;
var module = {
a : 2,
getA:function() {
return this.a;
}
};
module.getA();//2
var getA1 = module.getA; // getA在外部调用,此时的this指向了全局对象
getA1();//1
// 再把getA1方法绑定到module环境上
var getA2 = getA1.bind(module);
getA2();
从上面的例子可以看出,为什么要创建绑定函数,就是当我们调用某些函数的时候是要在特定环境下才能调用到,所以我们就要把函数放在特定环境下,就是使用bind把函数绑定到特定的所需的环境下。
2.让函数拥有预设的参数
使用bind()方法使函数拥有预设的初始参数,这些参数会排在最前面,传给绑定函数的参数会跟在它们后面
function list(){
// 让类数组arguments拥有数组的方法slice,这个函数实现了简单把类数组转换成数组
return
Array.prototype.slice.call(arguments);
}
list(1,2,3);//[1,2,3]
//给list绑定一个预设参数4
var list1 = list.bind(undefined,4);
list1();//[4]
list1(1,2,3);//[4,1,2,3]
3.setTimeout的使用
正常情况下,调用setTimeout的时候this会指向全局对象,但是使用类的方法时我们需要指向类的实例,所以要把this,绑定要回调函数方便继续使用实例
function Fun1() {
this.name = 1;
}
Fun1.prototype.fun2 = function() {
window.setTimeout(this.fun3.bind(this), 1000);
}
Fun1.prototype.fun3 = function(){
console.log('name:'+this.name);//name:1
}
var fun = new Fun1();
fun.fun2();
4.快捷方法--把类数组转换成数组
第一种方法是使用apply方法
function fun1() {
var slice = Array.prototype.slice;
return slice.apply(arguments);
}
fun1(1,2,3);//[1,2,3]
第二种方法是使用call方法和bind方法一起使用
function fun2() {
var unboundSlice = Array.prototype.slice;
// 把函数的call方法绑定在数组slice方法上,之后再给call方法传递参数
var slice =
Function.prototype.call.bind(unboundSlice);
return slice(arguments);
}
fun2(1,2,3);//[1,2,3]
文/丁向明
做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833
http://dingxiangming.com
猜你喜欢
- 2025-07-07 HarmonyOS Sample 之 DistributedMusicPlayer分布式音乐播放器
- 2025-07-07 CBN Perspective丨From “996” to forced clock-out, Chinese firms take aim at “neijuan”
- 2025-07-07 抛弃 typeof,这样判断 JavaScript 类型更准确
- 2025-07-07 面试遇到 性能优化 必答的 9 个点,加分!
- 2025-07-07 9102年版当代人Emoji十二时辰(十二时辰对照图)
- 2025-07-07 bind、call、apply 区别?如何实现一个bind?
- 2025-07-07 call和apply的实现方式(apply和call的使用场景)
- 2025-07-07 Ejs模板引擎注入实现RCE(js实现一个简单的模板引擎)
- 2025-07-07 javascript函数的call、apply和bind的原理及作用详解
- 2025-07-07 你不知道的js技巧(js入门基础教程)
- 1509℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 530℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 494℃MySQL service启动脚本浅析(r12笔记第59天)
- 473℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 470℃启用MySQL查询缓存(mysql8.0查询缓存)
- 451℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 430℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 427℃MySQL server PID file could not be found!失败
- 最近发表
- 标签列表
-
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)