js中this指向問題

js中this指向問題老生常談的問題了，在這里說一下我所理解的層面的this。

this 指的是當前對象，如果在全局范圍內使用this，則指代當前頁面window；如果在函數中使用this，則this指代什么是根據當前函數是在什么對象上調用。我們可以使用call和apply改變函數中this的具體指向。

console.log(this === window)  // true
console.log(window.alert === this.alert)  // true
console.log(this.parseInt("021",10))  // 21

parseInt(string,radix); 
// 當只使用一個參數時，我們都知道是將其轉為整數；
// radix 取值為 2~36，表示當前數是幾進制，並將這個數轉成十進制，當不在這個范圍時，會輸出NaN；                   

函數中的this是在運行時候決定的，而不是函數定義時。

    function foo(){
            console.log(this.fruit);
    }
    // 定義一個全局變量，等同於window.fruit = "banana";
    var fruit = "banana";
    // 此時函數中的this指向window;
    foo();  //   "banana"
    
    var  o = {
          fruit : "apple",
          foo : foo    
    };
    // 此時函數中的this指向o
    o.foo();  // "apple"

全局函數apply和call可以用來改變this的指向，如下：

    function foo(){
            console.log(this.fruit);
    }
    // 定義一個全局變量，等同於window.fruit = "banana";
    var fruit = "banana";

    var  o = {
          fruit : "apple"
    };
    
    foo.apply(window);  // "banana";
    foo.call(o);  // "apple";

apply和call的唯一區別，就是在傳參的時候，apply的參數需要放在一個數組里面，而call不需要；

因為在JavaScript中，函數也是對象，我們看下面這個例子：

    function foo(){
         if(this === window){
             console.log("this is window");
        }   
    };
    // 函數foo也是對象，可以為對象定義屬性，然后屬性為函數
    foo.boo = function(){
        if(this === foo){
             console.log("this is foo");       
        }else if(this === window){
                console.log("this is window");
            }
    };
    
    // 等價於 window.foo();
    foo();  // "this is window";
    // 可以看到函數中this的指向調用函數的對象
    foo.boo();  // "this is foo";
    // 可以使用call改變函數中this指向
    foo.boo.call(window); // "this is window";

對象中的嵌套函數的this指向不是當前對象，而是window，看如下例子：

　　　 var name = "window.name";
      var obj = {
          name : "obj.name",
          getName:function(){
              console.log(this.name);
              return function(){
                  console.log(this.name);
              } 
          }
      }
      obj.getName()();  // "obj.name"  "window.name"

同樣是obj調用的getName和getName里面的方法，結果卻是不同的值，這就說明嵌套函數中的this已經不指向當前對象了，而指向window。

那么，我們要怎樣解決上述問題呢？主要有三種解決辦法，如下：

1.使用函數的bind方法，綁定當前this；

　　　 var name = "window.name";
      var obj = {
          name : "obj.name",
          getName:function(){
              console.log(this.name);
              return function(){
                  console.log(this.name);
              }.bind(this);
          }
      };
      obj.getName()();  //  "obj.name"  "obj.name"

2.使用變量將上面的this接收一下，然后下面不使用this，使用那個變量；

      var name = "window.name";
      var that = null;
      var obj = {
          name : "obj.name",
          getName:function(){
              that = this;
              console.log(this.name);
              return function(){
                  console.log(that.name);
              }
          }
      }
      obj.getName()();  //  "obj.name"    "obj.name"

3.使用ES6的箭頭函數，可以完美避免此問題；

      var name = "window.name";
      var obj = {
          name : "obj.name",
          getName:function(){
              console.log(this.name);
              return () => {
                  console.log(this.name);
              }
          }
      }
      obj.getName()();    //  "obj.name"    "obj.name"

 

好了，關於js中this的指向問題就介紹到這里啦。如果你學到了記得點贊喲！