网站首页 > 技术文章 正文
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入门基础教程)
- 最近发表
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)