码迷,mamicode.com
首页 > 编程语言 > 详细

(转)javascript方法--bind()

时间:2017-12-10 14:45:34      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:cti   log   settime   参数调用   str   需要   java   asc   nts   

地址:https://www.cnblogs.com/xxxxBW/p/4914567.html

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方法一起使用

1 function fun2() {
2     var unboundSlice = Array.prototype.slice;
3     // 把函数的call方法绑定在数组slice方法上,之后再给call方法传递参数
4     var slice = Function.prototype.call.bind(unboundSlice);
5     return slice(arguments);
6 }
7 
8 fun2(1,2,3);//[1,2,3]

 

(转)javascript方法--bind()

标签:cti   log   settime   参数调用   str   需要   java   asc   nts   

原文地址:http://www.cnblogs.com/zhaobao1830/p/8016638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!