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()的更多相关文章

  1. (转)javascript方法--bind()

    地址:https://www.cnblogs.com/xxxxBW/p/4914567.html bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解. ...

  2. javascript中bind函数的作用

    javascript的bind的作用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. 博文推荐】Javascript中bind、call、apply函数用法

    [博文推荐]Javascript中bind.call.apply函数用法 2015-03-02 09:22 菜鸟浮出水 51CTO博客 字号:T | T 最近一直在用 js 写游戏服务器,我也接触 j ...

  4. 面试官:能解释一下javascript中bind、apply和call这三个函数的用法吗

    一.前言    不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数 ...

  5. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  6. Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

    在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用andro ...

  7. 节点插入--对比jQuery和JavaScript方法(一)

    二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 ap ...

  8. 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 ...

  9. Iframe 父子窗体互调javascript方法及相互获取控件

    父窗体中的Iframe标签如下,子窗体为Default.aspx; <iframe id="left" name="left" src="Def ...

随机推荐

  1. POJ3258-River Hopscotch-二分答案

    一条河里有一串石头,给出石头间的间距,让你去掉m个石头,使最短间距最大. 二分答案,对于每一种mid,判断要不要删除这块石头.然后逼近答案. #include <cstdio> #incl ...

  2. jQuery添加和删除元素

    添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在 ...

  3. MT【21】任意基底下的距离公式

    解析: 评:$\theta=90^0$时就是正交基底下(即直角坐标系下)的距离公式.

  4. 树剖模板(洛谷P3384 【模板】树链剖分)(树链剖分,树状数组,树的dfn序)

    洛谷题目传送门 仍然是一个板子. 不过蒟蒻去学了一下BIT维护区间修改区间求和,常数果真十分优秀 设数列为\(a_i\),差分数组\(d_ i=a_ i-a_ {i-1}\),前缀和\(s_i=\su ...

  5. git pull报“unable to update local ref”解决方案

    使用git pull拉取代码的时候,无法拉取最新代码,报"unable to update local ref"错误. 除了重新clone一份代码外,还可以使用如下解决方案: 1. ...

  6. 自学Linux Shell12.3-case命令

    点击返回 自学Linux命令行与Shell脚本之路 12.3-case命令 有了case命令,就不需要写出所有elif语句来不停的检查同一个变量的值了.case命令会采用列表格式来检查单个变量的多个值 ...

  7. 爬虫json数据的处理

    在爬网页的过程中,最喜欢遇到的就是json数据接口,省了不少麻烦,但是json数据也有多种格式. 类型一:标准的json result = json.loads(html.text),将str转成py ...

  8. oi程序提交注意:bool

    比如我一个程序用了bool类型(#include<stdbool.h>) 在poj以c的方式提交不通过显示Compile Error,而用gcc的方式提交通过了, 也许其它的#includ ...

  9. EOJ2018.10 月赛(A 数学+思维题)

    传送门:Problem A https://www.cnblogs.com/violet-acmer/p/9739115.html 题意: 能否通过横着排或竖着排将 1x p 的小姐姐填满 n x m ...

  10. 元组&哈希&字典

    1.元组(1)特性:不可变(不能修改.添加.删除),可以做切片 元组本身不可变,如果元组中还包含其他可变元素,这些可变元素可以改变(元组里套用列表,列表中的值可变)(2)功能: index count ...