iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
自我挑戰組

學習JavaScript的基礎概念系列 第 5

Day5 JavaScript的參數this

  • 分享至 

  • xImage
  •  

參數this
執行環境被創造, 每個執行環境有自己的變數環境,也就是被創造在函數裡的變數,它可以參考到外部環境。
也就是如果我取用一個變數,但不在函數裡的變數環境中,他會往外找,尋找這個變數或函數,直到全域環境為止。
每當執行環境被創造,函數被執行,javaScript會給一個變數this,this會指向不同的物件,this會依據函數在何處、如何被呼叫而決定它是什麼。


例1:
this會指向全域物件window

console.log(this);

例2:
函式陳述句
this依然會指向全域物件window

function a(){
    console.log(this);
}

a();

例3:
用函數表示式設立物件,在設定它為一個變數
this依然會指向全域物件window

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

b();

以上的例子都會創造不同執行環境,但this都指向同一個地方。


例4:
假設要取用全域物件的變數,this連結指向全域物件的變數
執行結果是hello
你可能會和全域命名空間衝突,導致很多問題

function a(){
    console.log(this);
this.newvariable = ‘hello’;
}

console.log(newvariable);

例5:
this會指向c物件

var c ={
    name: ‘The c object’,
    log: function(){
        console.log(this);
    }
}
c.log();

例6:
this會指向c物件,改變c的name的屬性內容

var c ={
    name: ‘The c object’,
    log: function(){
        this.name= ‘Update c object’;
        console.log(this);
    }
}
c.log();

例7:
設定新變數為this,讓this指向正確的位置
this會指向c的整個物件,改變c的name的屬性內容
然而使用let可以避免this的指向錯誤。

var c ={ 
    name: ‘The c object’, 
    log: function(){ 
        var self = this; //設定新變數為this

        this.name = ‘Update c object’; 
        console.log(self); 

        //改變c的name的屬性內容
        var seytname = function(newname){
        self.name = newname;
        }
        setname('Update again! The c object');
        console.log(self);
    } 
} 
c.log();

var self = this ; self會指向和this一樣的記憶體位置,這一行的this會指向c的整個物件。

所以即使this是在子函數裡面,也能讓this指向正確的位置,這樣我就不需要考慮是否指向對的物件。

使用let可以避免this的指向錯誤。


上一篇
Day4 呼叫函式執行方式
下一篇
Day6 參數arguments
系列文
學習JavaScript的基礎概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言