JavaScript this 用法

JavaScript 是個 prototype based 的語言,有些觀念與物件導向不太相同,this 的用法就是其中一例,在 JavaScript 中, this 代表指向呼叫該函式的物件, 也就是函數的擁有者,而且在程式執行過程中 this 不可被重新指派

1. global context 中的 this
global context 中的 this 指向 global object, 若在瀏覽器中執行 this 指向 window 物件


console.log(this === window);//true

2. 一般函式中的 this
當我們使用 function func1(){} 的方式宣告函數時, 函數的擁有者是 global object, 所以 this 指向 global object


function func1() { return this; }
var obj = { func1 : func1 };//建立物件與函式的連結
obj.func1 === this.func1;//true
obj.func1() === obj;//函式內的 this 指向呼叫該函式的物件
func1() === this;//指向 global object
func1() === window;//true

3. 巢狀函式(nested function) 中的 this

function func2() {
    function func3() {
        return this;
    }
    return func3();
}
var obj = { func2 : func2 };
func2() === this;//true
obj.func2() === obj;//false
obj.func2() === this;//true

使用巢狀函式被呼叫時,this 是指向 global object, 這是要特別留意的地方,如果 func3 想取得 func2 的 this,可利用參數傳遞或 closure 的方式解決

• 參數傳遞

var obj = {
    func2: function() {
        function func3(that) {
            return that;
        }
        return func3(this);
    }
}
obj.func2() === obj;//true

• closure

var obj = {
    func2: function() {
        var that = this;
        function func3() {
            return that;
        }
        return func3();
    }
}
obj.func2() === obj;//true

4. call & apply 中的 this
在JavaScript中，函式是Function的實例，Function 中有 call & apply function，可以讓使用者決定this的參考對象


var o1 = {};
var o2 = {};
function func4() { return this; }
func4.call(o1) === o1; //true
func4.apply(o2) == o2;//true

複習一下 call 和 apply 的差別,兩者的差別在於傳遞參數的方法不同
call是一個一個指定參數, examlple :


func.call(obj,"1","2","3")

apply的第二個參數是陣列, examlple :


func.apply(obj,["1", "2", "3"])

5. constructor 中的 this
若將函式當作建構式來用,內部的 this 則指向 new 所產生的新物件


function Employee(name, department) {
    this.name = name;
    this.department = department;
}
var e1 = new Employee('Albert', 'accounting');
console.log(e1.name);

利用 new 運算子建立物件,類似於下面的寫法


var e1 = (function(){
    var _new = { constructor: Employee, __proto__: Employee.prototype };
    _new.constructor();
    return _new;
})();

如果對 prototype 的用法不熟悉可參考 Javascript Prototype Chain

參考 : The “this” Keyword