this —— javascript

目錄

• 為什么要討論this

• this是什么

• 如何改變this的指向

• 箭頭函數中的this

 

為什么要討論this

 代碼一：

function fun1(){
    var aa = 'I am aa';
    console.log(this.aa)
}
fun1();

會打印出什么呢？是 ' I am aa ' 嗎，

結果是：

undefined

原因：

此時 this 指向 window 對象，

this.aa 等同於 window.aa ，

aa 是局部變量，該值只在函數內部有效，

window.aa 訪問的是全局屬性，訪問不到函數內部的值，因此會打印 undefined。

 

 

 代碼二：

var fun2 = function(){
    console.log(this.name);
}

var name = 'I am x - global';

var obj2 = {
    name: 'I am x - local',
    ff: fun2
}

fun2();
obj2.ff();

 

結果是：

I am x - global
I am x - local

fun2() 等同於 window.fun2() ，直接調用函數，此時所處 this 指向 window，

obj2.ff() 通過 obj2 對象訪問其方法，這時 this 指向 obj2。

 

 

代碼三：

var fun2 = function(){
　　console.log(this.name);
}

var name = 'I am x - global';

var obj2 = {
　　name: 'I am x - local',
　　ff: fun2,
　　ff2: function(){
　　　　function fun3(){
　　　　　　console.log(this.name)
　　　　}
　　　　fun3();
　　}
}

fun2();           // global
obj2.ff();        // local
obj2.ff2();       // 

 

結果：

I am x - global
I am x - local
I am x - global

就如下面定義所說的，

this 指向包含它的函數作為方法被調用時所屬的對象。

此時 fun3 為函數，並非為綁定到對象上的方法。

 

 

this是什么

定義：this是指包含它的函數作為方法被調用時所屬的對象。

個人理解：被調用時所處的上下文。

 

如何改變this的指向

• call()
• apply()

 

代碼四：

var name = "global name";
var obj1 = {
    name: 'obj1'
}
var obj2 = {
    name: 'obj2'
}
function myName(){
    console.log(this.name);
}

myName()
myName.call(obj1)
myName.call(obj2)

結果：

global name
obj1
obj2

call 改變了 this 的指向

 

call 和 apply 的區別

接受參數方式不同

Object.call(obj, arg1, arg2, arg3)

Object.apply(obj, [arg1, arg2, arg3])

 

箭頭函數中的this

 箭頭函數中，修復了 this 的指向，

當箭頭函數的函數聲明存在於對象方法時，

此時 this 的指向不再是 window 或 undefined ，

而是這個對象本身。

看一段代碼就明白了： 

代碼五：

var name = 'I am x - global';

var obj2 = {
    name: 'I am x - local',
    ff2: function(){
        var fun3 = function(){
            console.log(this.name)
        }
        var fun4 = () => {
            console.log(this.name)
        }
        fun3();
        fun4();
    }
}

obj2.ff2();

 

結果：

I am x - global
I am x - local

 

 

箭頭函數中的 call()

直接來看一段代碼吧

代碼六：

var name = 'I am x - global';

var obj2 = {
    name: 'I am x - local',
    ff2: function(){
        var fun3 = function(){
            console.log(this.name)
        }
        var fun4 = () => {
            console.log(this.name)
        }
        fun3();        // global
        fun4();        // local
        fun3.call({name:'new name1'})    // 看這里
        fun4.call({name:'new name2'})    // 看這里
    }
}

obj2.ff2();

 

結果：

I am x - global
I am x - local
new name1
I am x - local

 

用 call() 或 apply() 調用箭頭函數時，

將無法對 this 進行綁定，

傳入的第一個參數將會被忽略。