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. BZOJ4943 NOI2017蚯蚓排队(哈希+链表)

    能看懂题就能想到正解.维护所有长度不超过k的数字串的哈希值即可,用链表维护一下蚯蚓间连接情况.由于这样的数字串至多只有nk个,计算哈希值的总复杂度为O(nk),而分裂的复杂度为O(ck^2),询问复杂 ...

  2. 【Linux】Centos6.8下一键安装Lamp环境

    [下载地址] 以下三种都是快捷安装环境的工具,都提供相应的脚本,原理都相同,一个会了其他的也就都会了,我用的比较多的会是lnmp和oneinstack,最近在用的都是oneinstack,挺好用的. ...

  3. Java中的split函数拆分后变成null的问题

    对于一些特殊的情况,split拆分后并没有保留全的元素 如下例子: String x ="a,,,,,,"; String []y = x.split(",") ...

  4. Java 入门进阶

    Java 入门进阶 發表於 2015-04-16 http://xielong.me/2015/04/16/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%B7%A5%E7%A8%8B% ...

  5. BZOJ 5308 [ZJOI2018] Day2T2 胖 | 二分 ST表

    题目链接 LOJ 2529 BZOJ 5308 题解 这么简单的题 为什么考场上我完全想不清楚 = = 对于k个关键点中的每一个关键点\(a\),二分它能一度成为哪些点的最短路起点(显然这些点在一段包 ...

  6. [转载]C++的顺序点(sequence point)和副作用(side effect)

    有关i=(++i)+(i++)这种东西的深入解释,不仅仅是简单粗暴undefined behavior. ==== 一.副作用(side effect) 表达式有两种功能:每个表达式都产生一个值( v ...

  7. HDU 1176 免费馅饼 (动态规划)

    HDU 1176 免费馅饼 (动态规划) Description 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人品实在是太好了,这馅饼 ...

  8. 对信号量Semaphore的理解与运用

    转: java笔记--对信号量Semaphore的理解与运用 java Semaphore 信号量的使用: 在java中,提供了信号量Semaphore的支持. Semaphore类是一个计数信号量, ...

  9. Solr各个版本重大变化之安装方式【请别违背规律】

    这里主要讲安装方式的变化 4.x~5.x的变化 这是4.x的安装方式,大家都熟知,在我看来未免繁琐了一点. 或许官方也感觉繁琐了,于是5.x有个最大的改变.↓ 现在Solr是一个独立的服务器 什么叫S ...

  10. 2018.10.2浪在ACM 集训队第二次测试赛

    2018.10.26 浪在ACM 集训队第二次测试赛 题目一览表 来源 考察知识点 A 1273 海港 NOIP 普及组 2016 差分数组+二分 B 1274 魔法阵     C 1267 金币   ...