javascript中的this意義非常豐富，它可以是全域對象，目前物件或是任意對象，這都取決於函數的呼叫方式。函數有以下幾種呼叫方式：作為物件方法呼叫、作為函數呼叫、作為建構函式呼叫、apply或call呼叫。
物件方法呼叫
作為物件方法呼叫的時候，this會被綁定到該物件。
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
};
point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象登入後複製
這裡我想強調一點內容，就是this是在函數執行的時候去取得對應的值，而不是函數定義時。即使是物件方法調用，如果該方法的函數屬性以函數名稱的形式傳入別的作用域，也會改變this的指向。我舉一個例子：
var a = {
aa : 0,
bb : 0,
fun : function(x,y){
this.aa = this.aa + x;
this.bb = this.bb + y;
}
};
var aa = 1;
var b = {
aa:0,
bb:0,
fun : function(){return this.aa;}
}
a.fun(3,2);
document.write(a.aa);//3，this指向对象本身
document.write(b.fun());//0,this指向对象本身
(function(aa){//注意传入的是函数，而不是函数执行的结果
var c = aa();
document.write(c);//1 , 由于fun在该处执行，导致this不再指向对象本身，而是这里的window
})(b.fun);登入後複製
這樣就明白了吧。這是一個容易混淆的地方。
函數調用
函數也可以直接被調用，這時候this被綁定到了全域物件。
var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0登入後複製
但這樣就會出現一些問題，就是在函數內部定義的函數，其this也會指向全局，而和我們希望的恰恰相反。程式碼如下：
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
// 内部函数
var moveX = function(x) {
this.x = x;//this 绑定到了全局
};
// 内部函数
var moveY = function(y) {
this.y = y;//this 绑定到了全局
};
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1登入後複製
我們會發現不但我們希望的移動呢效果沒有完成，反而會多出兩個全域變數。那麼如何解決呢？只要要進入函數中的函數時將this儲存到一個變數中，再運用該變數即可。程式碼如下：
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this;
// 内部函数
var moveX = function(x) {
that.x = x;
};
// 内部函数
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1登入後複製
建構子呼叫
在javascript中自己建立建構函式時可以利用this來指向新建立的物件上。這樣就可以避免函數中的this指向全域了。
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2登入後複製
apply或call呼叫
這兩個方法可以切換函數執行的上下文環境，也就是改變this綁定的物件。 apply和call比較類似，差別在於傳入參數時一個要求是數組，一個要求是分開傳入。所以我們以apply為例：
<pre name="code" class="html">var name = "window";
var someone = {
name: "Bob",
showName: function(){
alert(this.name);
}
};
var other = {
name: "Tom"
};
someone.showName(); //Bob
someone.showName.apply(); //window
someone.showName.apply(other); //Tom登入後複製
可以看到，正常存取物件中方法時，this指向物件。使用了apply後，apply無參數時，this的目前物件是全域，apply有參數時，this的目前物件就是該參數。
箭頭函數呼叫
這裡需要補充一點內容，就是在下一代javascript標準ES6中的箭頭函數的 this總是指向函數定義時的 this總是指向函數定義時的
this
我們透過一個例子來理解:
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
this.func();
}, 100);
}
};
o.test(); // TypeError : this.func is not a function登入後複製
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
var _this = this;
setTimeout(function() {
_this.func();
}, 100);
}
};
o.test();登入後複製
箭頭函數的
this
總是指向函數定義時的
this
，而非執行時
。所以我們將上面的程式碼修改如下：
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.func() }, 100);
}
};
o.test();登入後複製
這回this就指向o了，我們還需要注意一點的就是這個this是不會改變指向對象的，我們知道call和apply可以改變this的指向，但是在箭頭函數中是無效的。
var x = 1,
o = {
x : 10,
test : () => this.x
};
o.test(); // 1
o.test.call(o); // 依然是1登入後複製
這樣就可以明白各種情況下this綁定物件的差別了。
🎜🎜🎜🎜
🎜
以上是JavaScript之this指針範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
