普通函式中的this:

    1. this總是代表它的直接呼叫者, 例如 obj.func ,那麼func中的this就是obj
    2.在預設情況(非嚴格模式下,未使用 'use strict'),沒找到直接呼叫者,則this指的是 window
    3.在嚴格模式下,沒有直接呼叫者的函式中的this是 undefined

    4.使用call,apply,bind(ES5新增)繫結的,this指的是 繫結的物件

箭頭函式中的this:

預設指向在定義它時,它所處的物件,而不是執行時的物件, 定義它的時候,可能環境是window(即繼承父級的this);

示例1

1
2
3
4
5
6
7
8
9
10
<script>
var obj = {
say: function () {
setTimeout(function () {
console.log(this)
});
}
}
obj.say();
</script>

結果是:window

匿名函式,定時器中的函式,由於沒有預設的宿主物件,所以預設this指向window

問題: 如果想要在setTimeout中使用這個物件的引用呢?

用一個 變數提前把正確的 this引用儲存 起來, 我們通常使用that = this, 或者 _this = this來儲存我們需要的this指標!

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
var obj = {
func: function() {},
say: function () {
var that = this;   //此時的this就是obj物件
setTimeout(function () {
console.log(this)
that.func()
});
}
}
obj.say();
</script>

示例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.val = 1;
var obj = {
val: 2,
dbl: function () {
this.val *= 2;
val *= 2;
console.log(val);
console.log(this.val);
}
};
// 說出下面的輸出結果
obj.dbl();
var func = obj.dbl;
func();

結果是:2  4  8  8

<1> 12行程式碼呼叫

val變數在沒有指定物件字首,預設從函式中找,找不到則從window中找全域性變數

即 val *=2 就是 window.val *= 2

this.val預設指的是 obj.val ;因為 dbl()第一次被obj直接呼叫

<2>14行程式碼呼叫

func() 沒有任何字首,類似於全域性函式,即  window.func呼叫,所以

第二次呼叫的時候, this指的是window, val指的是window.val

第二次的結果受第一次的影響

示例3.在嚴格模式下的this

1
2
3
4
5
6
7
<script>
function test() {
'use strict';
console.log(this);
}
test();
</script>

結果是:undefined

示例4.箭頭函式中的this