JavaScript中的this

JS JavaScript中的this

this是JavaScript語言中的一個關鍵字
它是函式執行時，在函式體內部自動生成的一個物件，只能在函式體內部使用。

function test() {
 this.x = 1;
}
複製程式碼

那麼，this的值是什麼呢？
函式在不同使用場合，this有不同的值。總之，this就是函式執行時所在的環境物件。

情況一：純粹的函式呼叫

這是函式的最常通用法，屬於全域性性呼叫，因此this就代表全域性物件。

var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1
複製程式碼

情況二：作為物件的方法呼叫

函式還可以作為某個物件的方法呼叫，這時this就指這個上級物件

function test() {
  console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1
複製程式碼

情況三：作為建構函式呼叫

建構函式就是通過這個函式可以生成一個新物件。這時，this就指這個新物件

function test() {
 this.x = 1;
}

var obj = new test();
obj.x // 1
複製程式碼

為了表明這時this不是全域性物件，下面程式碼：

var x = 2;
function test() {
  this.x = 1;
}

var obj = new test();
x  // 2
複製程式碼

執行結果為2，表明全域性變數x的值沒有變化

情況四：apply呼叫

apply()是函式的一個方法，作用是改變函式的呼叫物件。它的第一個引數就表示改變後的呼叫這個函式的物件。因此，這時this指的就是這個引數。

var x = 0;
function test() {
 console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0
複製程式碼

apply()的引數為空時，預設呼叫全域性變數。因此，這時執行結果為0，證明this指的是全域性物件。
如果把最後一行程式碼修改成

obj.m.apply(obj); //1
複製程式碼

執行結果就變成1，證明這時this代表的物件是obj

改變this的指向有以下幾種方法

• 使用ES6的箭頭函式
• 在函式內部_this=this
• 使用apply、call、bind
• new例項化一個物件

---

其實this的指向，始終堅持一個原理：this永遠指向最後呼叫它的那個物件。

例1：

var name = "windowsName";
function a() {
   var name = "Cherry";

   console.log(this.name);          // windowsName

   console.log("inner:" + this);    // inner: Window
}
 a();
 console.log("outer:" + this)         // outer: Window
複製程式碼

這裡我們使用嚴格模式，如果使用嚴格模式的話，全域性物件就是 undefined，那麼就會報錯 Uncaught TypeError: Cannot read property `name` of undefined。

例2：

    var name = "windowsName";
    var a = {
        name: "Cherry",
        fn : function () {
            console.log(this.name);      // Cherry
        }
    }
    a.fn();
複製程式碼

例3：

var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name);      // Cherry
     }
  }
window.a.fn();
複製程式碼

例4:

    var name = "windowsName";
    var a = {
        // name: "Cherry",
        fn : function () {
            console.log(this.name);      // undefined
        }
    }
    window.a.fn();
複製程式碼

例5：

    var name = "windowsName";
    var a = {
        name : null,
        // name: "Cherry",
        fn : function () {
            console.log(this.name);      // windowsName
        }
    }

    var f = a.fn;
    f();
複製程式碼

為什麼不是 Cherry，這是因為雖然將a 物件的 fn方法賦值給變數 f 了，“this永遠指向最後呼叫它的那個物件”，由於剛剛的f 並沒有呼叫，所以 fn() 最後仍然是被 window 呼叫的。所以 this 指向的也就是 window。

例6：

    var name = "windowsName";

    function fn() {
        var name = `Cherry`;
        innerFunction();
        function innerFunction() {
            console.log(this.name);      // windowsName
        }
    }

    fn()
複製程式碼