最近开发的过程中遇到了this指向问题,首先想到的是call()、apply()、bind()三个方法,有些时候这三个方法确实是十分重要,现在我们就把他们的使用方法及异同点讲解一下。

  1、每个函数都包含三个非继承而来的方法,call()方法、apply()方法和bind()方法

      2、相同点:三者的作用都是一样的,都是在特定作用中调用函数,等于设置函数体内this的值,以扩充函数赖以运行的作用域。

  一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。

  3、不同点:

    1)、bind()方法会返回一个函数,将接受多个参数的函数变换成接受一个单一参数。

      注意:bind(thisArg[, arg1[, arg2[, …]]]), 将接受多个参数的函数变换成接受一个单一参数。bind()方法所返回的函数的length(形参数量)等于原函数的形参数量减去传入bind()方法中的实参数量(第一个参数以后的所有参数),因为传入bind中的实参都

      会绑定到原函数的形参。

    2)、apply()方法 接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。

      注意:apply([thisObj [,argArray] ]);,调用一个对象的一个方法,2另一个对象替换当前对象。如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象

      将用作thisObj。

    3)、call()方法 第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。

      注意:call([thisObject[,arg1 [,arg2 [,…,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有

      提供thisObj参数,那么Global对象被用于thisObj。

   话不多说,上代码:

  

  1. 1 //例1
  2. 2 <script>
  3. 3 window.color = 'red';
  4. 4 document.color = 'yellow';
  5. 5
  6. 6 var s1 = {color: 'blue' };
  7. 7 function changeColor(){
  8. 8 console.log(this.color);
  9. 9 }
  10. 10
  11. 11 changeColor.call(); //red (默认传递参数)
  12. 12 changeColor.call(window); //red
  13. 13 changeColor.call(document); //yellow
  14. 14 changeColor.call(this); //red
  15. 15 changeColor.call(s1); //blue
  16. 16
  17. 17 </script>
  18. 18
  19. 19 //例2
  20. 20 var Pet = {
  21. 21 words : '...',
  22. 22 speak : function (say) {
  23. 23 console.log(say + ''+ this.words)
  24. 24 }
  25. 25 }
  26. 26 Pet.speak('Speak'); // 结果:Speak...
  27. 27
  28. 28 var Dog = {
  29. 29 words:'Wang'
  30. 30 }
  31. 31
  32. 32 //将this的指向改变成了Dog
  33. 33 Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang

call的用例代码

  1. 1 //例1
  2. 2 <script>
  3. 3 window.number = 'one';
  4. 4 document.number = 'two';
  5. 5
  6. 6 var s1 = {number: 'three' };
  7. 7 function changeColor(){
  8. 8 console.log(this.number);
  9. 9 }
  10. 10
  11. 11 changeColor.apply(); //one (默认传参)
  12. 12 changeColor.apply(window); //one
  13. 13 changeColor.apply(document); //two
  14. 14 changeColor.apply(this); //one
  15. 15 changeColor.apply(s1); //three
  16. 16
  17. 17 </script>
  18. 18
  19. 19 //例2
  20. 20 function Pet(words){
  21. 21 this.words = words;
  22. 22 this.speak = function () {
  23. 23 console.log( this.words)
  24. 24 }
  25. 25 }
  26. 26 function Dog(words){
  27. 27 //Pet.call(this, words); //结果: Wang
  28. 28 Pet.apply(this, arguments); //结果: Wang
  29. 29 }
  30. 30 var dog = new Dog('Wang');
  31. 31 dog.speak();

apply的用例代码

  1. 1 var test = {
  2. 2 a : 5,
  3. 3 b : 6,
  4. 4 sum : function (a,b) {
  5. 5 var self = this;
  6. 6 function getA() {
  7. 7 return self.a;
  8. 8 }
  9. 9 function getB(){
  10. 10 return self.b;
  11. 11 }
  12. 12 alert(a);
  13. 13 alert(b);
  14. 14 return getA() + getB();
  15. 15 }
  16. 16 }
  17. 17 var obj = {a:2,b:3};
  18. 18 alert(test.sum.call(obj,4,5)); // 调用时self = this = obj,alert顺序4,5,5
  19. 19 alert(test.sum.apply(obj,[6,7])); // 调用时self = this = obj,alert顺序6,7,5
  20. 20 var sum = test.sum.bind(obj,8); // 此处返回一个只有一个参数的函数sum(b)
  21. 21 alert(sum(9)); // 调用时self = this = obj,alert顺序8,9,5

bind的用例代码

 

   

  总结:

 

    1、call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象

 

    2、call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔

 

    3、apply的所有参数都必须放在一个数组里面传进去

 

    4、bind除了返回是函数以外,它的参数传递方式和call 一样。    

 

    当然,三者的参数不限定是string类型,允许是各种类型,包括函数 、 object 等等!

 

版权声明:本文为hexiaobao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/hexiaobao/p/11578388.html