JavaScript this 指針概括(apply、call、bind)

概述

一個函數中this的指向是由調用這個函數的環境來決定的。

1. 全局

   var a = 1;
   function b(){
       var a = 2;
       console.log(this.a);
   };
   b(); //1

   <input type="text" value="4" onclick="b()" />
   
   var value = 3;
   function b(){
       console.log(this.value);
   };
   b();//3
   此時的b函數的環境是全局的

2. 局部

   var a = 1;
      var c = {a:3};
      c.b = function(){
      var a = 2;
      console.log(this.a);
      };
      c.b();//3
      
     //當即執行函數 因爲是賦值，因此只執行了右邊的函數
     var a = 1;
     var c = {a:3};
     (c.b = function(){
     var a = 2;
     console.log(this.a);
     })();//1

apply、call 和 bind 改變this指向

1. apply

   • 參數

     只能傳兩個參數，第一個參數a是 改變this指向的結果對象(在非嚴格模式下，第一個參數爲null或者undefined時會自動替換爲指向全局對象)，第二個參數是傳給a的 參數集合（arguments[數組或類數組]）；

   • 實例

     var a = 1;
     var c = {a : 3};
     function b(d,e){
         var a = 2;
         console.log(this.a);
         console.log(d,e);
     };
     b.apply(c);//3  undefined undefined
     b.apply();//1  undefined undefined
     b.apply(c,[5,6]);// 3  5 6

2. call

   • 參數

     第一個參數和apply()的第一個參數同樣，不一樣的是apply()後面是接收一個數組或類數組，call()後面是是接收的參數列表。

   • 實例

     var a = 1;
     var c = {a : 3};
     function b(d,e){
         var a = 2;
         console.log(this.a);
         console.log(d,e);
     };
     b.call(c);//3  undefined undefined
     b.call();//1  undefined undefined
     b.call(c,5,6);// 3  5 6

3. bind

   • 參數

     參數和call同樣，不一樣的是 call()和apply()在調用函數以後會當即執行，而bind()方法調用並改變函數運行時上下文後，返回一個新的函數，供咱們須要時再調用。

   • 實例

     var a = 1;
     var c = {a : 3};
     function b(d,e){
        var a = 2;
        console.log(this.a);
        console.log(d,e);
     };
     var b1 = b.bind(c);
     var b2 =b.bind();
     var b3 =b.bind(c,5,6);
     b1();//3  undefined undefined
     b2();//1  undefined undefined
     b3()// 3  5 6