js中this指向問題

時間 2019-11-08

原文原文鏈接

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

this 指的是當前對象，若是在全局範圍內使用this，則指代當前頁面window；若是在函數中使用this，則this指代什麼是根據當前函數是在什麼對象上調用。咱們能夠使用call和apply改變函數中this的具體指向。app

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的指向，以下：ui

    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不須要；this

由於在JavaScript中，函數也是對象，咱們看下面這個例子：spa

 1     function foo(){
 2          if(this === window){
 3              console.log("this is window");
 4         }   
 5     };
 6     // 函數foo也是對象，能夠爲對象定義屬性，而後屬性爲函數
 7     foo.boo = function(){
 8         if(this === foo){
 9              console.log("this is foo");       
10         }else if(this === window){
11                 console.log("this is window");
12             }
13     };
14     
15     // 等價於 window.foo();
16     foo();  // "this is window";
17     // 能夠看到函數中this的指向調用函數的對象
18     foo.boo();  // "this is foo";
19     // 能夠使用call改變函數中this指向
20     foo.boo.call(window); // "this is window";

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

　　　 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。對象

那麼，咱們要怎樣解決上述問題呢？主要有三種解決辦法，以下：blog

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

 1 　　　 var name = "window.name";
 2       var obj = {
 3           name : "obj.name",
 4           getName:function(){
 5               console.log(this.name);
 6               return function(){
 7                   console.log(this.name);
 8               }.bind(this);
 9           }
10       };
11       obj.getName()();  //  "obj.name"  "obj.name"

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

 1       var name = "window.name";
 2       var that = null;
 3       var obj = {
 4           name : "obj.name",
 5           getName:function(){
 6               that = this;
 7               console.log(this.name);
 8               return function(){
 9                   console.log(that.name);
10               }
11           }
12       }
13       obj.getName()();  //  "obj.name"    "obj.name"

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

 1       var name = "window.name";
 2       var obj = {
 3           name : "obj.name",
 4           getName:function(){
 5               console.log(this.name);
 6               return () => {
 7                   console.log(this.name);
 8               }
 9           }
10       }
11       obj.getName()();    //  "obj.name"    "obj.name"