JS中的bind()方法

Function.prototype.bind()方法

转自——JS中的bind()方法_kongjunchao159的博客-优快云博客_bind方法

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()，这时，f函数体内的this自然指向的是obj

例子

1. var a = {

2.     b : function(){

3.         var func = function(){

4.             console.log(this.c);

5.         }

6.         func();

7.     },

8.     c : 'Hello!'

9. }

10. a.b();

11. //undefined

12. 注意：这里的this指向的是全局作用域，所以会返回undefined

13. var a = {

14.     b : function(){

15.         var that = this;

16.         var func = function(){

17.             console.log(that.c);

18.         }

19.         func();

20.     },

21.     c : 'Hello!'

22. }

23. a.b();

24. //Hello!

25. 注意：可以通过赋值的方式将this赋值给that

26. var a = {

27.     b : function(){

28.         var func = function(){

29.             console.log(this.c);

30.         }.bind(this);

31.         func();

32.     },

33.     c : 'Hello!'

34. }

35. a.b();

36. //Hello!

37.  

38. var a = {

39.     b : function(){

40.         var func = function(){

41.             console.log(this.c);

42.         }

43.         func.bind(this)();

44.     },

45.     c : 'Hello!'

46. }

47. a.b();

48. //Hello!

注意：当然，也可以通过bind的方式绑定this，上述两种bind绑定的方式都可以
再看另外一种用法

例子

1. function f(y, z){

2.     return this.x + y + z;

3. }

4. var m = f.bind({x : 1}, 2);

5. console.log(m(3));

6. //6

注意：这里bind方法会把它的第一个实参绑定给f函数体内的this，所以这里的this即指向{x : 1}对象，从第二个参数起，会依次传递给原始函数，这里的第二个参数2，即是f函数的y参数，最后调用m(3)的时候，这里的3便是最后一个参数z了，所以执行结果为1 + 2 + 3 = 6
分步处理参数的过程其实是一个典型的函数柯里化的过程（Curry）

我们再来看一道题目

1. var a = document.write;

2. a('hello');

3. //Error

4.  

5. a.bind(document)('hello');

6. //hello

7.  

8. a.call(document, 'hello');

9. //hello

注意：这里直接调用a的话，this指向的是global或window对象，所以会报错，通过bind或者call的方式绑定this至document对象，即可正常调用
可以用bind的方式预定义参数，例子

1. function list(){

2.     return Array.prototype.slice.call(arguments);

3. }

4. var list1 = list(1, 2, 3);

5. //[1, 2, 3]

6.  

7. //预定义参数

8. var a = list.bind(undefined, 10);

9.  

10. var list2 = a();

11. //[10]

12.  

13. var list3 = a(1, 2, 3);

14. //[10, 1, 2, 3]

注意：这里的Array.prototype.slice.call(arguments)是用来将参数由类数组转换为真正的数组，a的第一个参数undefined表示this的指向，第二个参数10即表示list中真正的第一个参数，依次类推

如何自己实现bind方法？

因为bind()函数发布在ES5中，因此并不能很好的在所有浏览器中运行，需要Polyfill，当然现在几乎所有现代浏览器都支持ES5

1. //my_bind方法支持绑定对象

2. Function.prototype.my_bind = function(context){

3.     var self = this;

4.     return function(){

5.         return self.apply(context, arguments);

6.     }

7. }

8.  

9. //测试

10. function a(){

11.     return this.name;

12. }

13. a();    //''

14.  

15. var b = {name : 'kong'};

16. a.bind(b)();    //kong

17.  

18. a.my_bind(b)();        //kong

上述是最简单的一种实现方式，仅可用来绑定，不可传参
更加健壮的方式：

1. //my_bind方法不仅可以绑定对象，还可以传参

2. Function.prototype.my_bind = function(context){

3.     var args = Array.prototype.slice.call(arguments, 1);

4.     //args [7, 8]

5.     var self = this;

6.     return function(){

7.         var innerArgs = Array.prototype.slice.call(arguments);

8.         //innerArgs [9]

9.         var finalArgs = args.concat(innerArgs);

10.         //finalArgs [7, 8, 9]

11.         return self.apply(context, finalArgs);

12.     }

13. }

14.  

15. //测试

16. function a(m, n, o){

17.     return this.name + ' ' + m + ' ' + n + ' ' + o;

18. }

19.  

20. var b = {name : 'kong'};

21.  

22. a.my_bind(b, 7, 8)(9);        //kong 7 8 9

注意：这里my_bind函数中args表示的是在bind时传入的预定义参数，这里即为7和8，分别表示m和n，return中的innerArgs表示的是调用a的时候传入的参数，这里表示9，即o，最后用concat连接两个数组，即为finalArgs，所以最后执行的是a(7, 8, 9)，this指向b，实现了一个完善点的bind方法

处理bind返回的函数如果作为构造函数，搭配new关键字出现的话，我们绑定的this就需要被忽略的兼容性问题

更加完美的方式

1. //bind返回的函数如果作为构造函数，搭配new关键字出现的话，我们绑定的this就需要被忽略

2. //处理构造函数场景下的兼容

3. Function.prototype.bind = Function.prototype.bind || function(context){

4.     //确保调用bind方法的一定要是一个函数

5.     if(typeof this !== "function"){

6.         throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");

7.     }

8.     var args = Array.prototype.slice.call(arguments, 1);

9.     var self = this;

10.     var F = function(){};

11.     F.prototype = this.prototype;

12.     var bound = function(){

13.         var innerArgs = Array.prototype.slice.call(arguments);

14.         var finalArgs = args.concat(innerArgs);

15.         return self.apply(this instanceof F ? this : context || this, finalArgs);

16.     }

17.     bound.prototype = new F();

18.     return bound;

19. }