javascript方法--bind()
bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解。
语法
fun.bind(this,arg1,arg2,...)
bind()方法会创建一个新的函数,称为绑定函数,fun方法在this环境下调用
该方法可传入两个参数,第一个参数作为this,第二个及以后的参数则作为函数的参数调用
实例
1.创建绑定函数
1 this.a = 1;
2 var module = {
3 a : 2,
4 getA:function() {
5 return this.a;
6 }
7 };
8 module.getA();//2
9
10 var getA1 = module.getA;
11 // getA在外部调用,此时的this指向了全局对象
12 getA1();//1
13
14 // 再把getA1方法绑定到module环境上
15 var getA2 = getA1.bind(module);
16 getA2();
从上面的例子可以看出,为什么要创建绑定函数,就是当我们调用某些函数的时候是要在特定环境下才能调用到,所以我们就要把函数放在特定环境下,就是使用bind把函数绑定到特定的所需的环境下。
2.让函数拥有预设的参数
使用bind()方法使函数拥有预设的初始参数,这些参数会排在最前面,传给绑定函数的参数会跟在它们后面
1 function list(){
2 // 让类数组arguments拥有数组的方法slice,这个函数实现了简单把类数组转换成数组
3 return Array.prototype.slice.call(arguments);
4 }
5
6 list(1,2,3);//[1,2,3]
7
8 //给list绑定一个预设参数4
9 var list1 = list.bind(undefined,4);
10
11 list1();//[4]
12
13 list1(1,2,3);//[4,1,2,3]
3.setTimeout的使用
正常情况下,调用setTimeout的时候this会指向全局对象,但是使用类的方法时我们需要指向类的实例,所以要把this,绑定要回调函数方便继续使用实例
1 function Fun1() {
2 this.name = 1;
3 }
4 Fun1.prototype.fun2 = function() {
5 window.setTimeout(this.fun3.bind(this), 1000);
6 }
7 Fun1.prototype.fun3 = function(){
8 console.log('name:'+this.name);//name:1
9 }
10 var fun = new Fun1();
11 fun.fun2();
4.快捷方法--把类数组转换成数组
第一种方法是使用apply方法
1 function fun1() {
2 var slice = Array.prototype.slice;
3 return slice.apply(arguments);
4 }
5
6 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]
javascript方法--bind()的更多相关文章
- (转)javascript方法--bind()
地址:https://www.cnblogs.com/xxxxBW/p/4914567.html bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解. ...
- javascript中bind函数的作用
javascript的bind的作用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- 博文推荐】Javascript中bind、call、apply函数用法
[博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...
- 面试官:能解释一下javascript中bind、apply和call这三个函数的用法吗
一.前言 不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数 ...
- jQuery基础学习5——JavaScript方法获取页面中的元素
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- Android中通过WebView控件实现与JavaScript方法相互调用的地图应用
在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...
- 节点插入--对比jQuery和JavaScript方法(一)
二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 ap ...
- Nginx 错误处理方法: bind() to 0.0.0.0:80 failed
Nginx 错误处理方法: bind() to 0.0.0.0:80 failed 今天启动window上的nginx总是报错 错误信息是bind() to 0.0.0.0:80 failed (10 ...
- Iframe 父子窗体互调javascript方法及相互获取控件
父窗体中的Iframe标签如下,子窗体为Default.aspx; <iframe id="left" name="left" src="Def ...
随机推荐
- BZOJ3505 CQOI2014数三角形(组合数学)
显然可以用总方案数减掉三点共线的情况.对于三点共线,一个暴力的做法是枚举起点终点,其间整点数量即为横纵坐标差的gcd-1.这样显然会T,注意到起点终点所形成的线段在哪个位置是没有区别的,于是枚举线段算 ...
- BZOJ1042 HAOI2008硬币购物(任意模数NTT+多项式求逆+生成函数/容斥原理+动态规划)
第一眼生成函数.四个等比数列形式的多项式相乘,可以化成四个分式.其中分母部分是固定的,可以多项式求逆预处理出来.而分子部分由于项数很少,询问时2^4算一下贡献就好了.这个思路比较直观.只是常数巨大,以 ...
- Redis无法保存ef复杂对象
最近项目需要使用redis. 然后我就满怀激情开始处理数据层了.在原来查询数据的基础上,有封装了一个redis缓存层. 结果在redis保存ef对象的时候,发现了一个非常尴尬的问题. model: p ...
- Java8 使用
Java8 使用 链接:https://www.jianshu.com/p/936d97ba0362 链接:https://www.jianshu.com/p/41de7b5ac7b9 本文主要总结了 ...
- MT【52】空间法向量理解直线条数
[从最简单的做起.]--波利亚 评:线面角转化成线与线的角,这道题还有类似的这类题是学生的难点.
- Centos7安装Zabbix4.0步骤
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 Centos7安装Zabbix4.0步骤 官方搭建zabbix4.0的环境要求: 1. 环境搭建L ...
- HTML 浏览器对象 讲解
Window对象 Ø 属性 • Document:文档对象 • Event:事件对象 • History:历史记录对象 • Location:位置对象 • Name:w ...
- 【BZOJ4555】求和(多种解法混合版本)
[BZOJ4555]求和(多种解法混合版本) 题面 BZOJ 给定\(n\),求 \[f(n)=\sum_{i=0}^{n}\sum_{j=0}^{i}S(i,j)\times 2^j \times ...
- 【HDU1693】Eat the Trees(插头dp)
[HDU1693]Eat the Trees(插头dp) 题面 HDU Vjudge 大概就是网格图上有些点不能走,现在要找到若干条不相交的哈密顿回路使得所有格子都恰好被走过一遍. 题解 这题的弱化版 ...
- harmakik
Solution 对于原树一个节点\(x\): \(f_x(h)\)表示,\(x\)作为一个深度为\(h\)的点时,\(x\)及其子树的安排方案有多少(不考虑\(x\)具体在深度为\(h\)的哪个点) ...