克服JS奇怪的部分_This

this

本筆記出自：JavaScript 全攻略：克服 JS 的奇怪部分

執行環境被創造，每當函數被執行JS引擎會給我們一個不曾宣告的東西： this 變數。this會指向不同的物件，並依據函數如何被呼叫而改變。

- this 是 JavaScript 的一個關鍵字。

- this 是 function 執行時，自動生成的一個內部物件。

- 隨著 function 執行場合的不同，this 所指向的值，也會有所不同。

- 在大多數的情況下， this 代表的就是呼叫 function 的物件 (Owner Object of the function)。

出自重新認識 JavaScript: Day 20 What’s “THIS” in JavaScript (鐵人精華版)

• 在window中，this會指向全域也就是window

  console.log(this) //window

• 在function中，無論陳述或表達式，this會指向全域也就是window

-陳述式Statement
function a() {
    console.log(this) //window
    this.newvariable = ‘hello’ } //window新增newvariable的屬性
  console.log(newvariable) //hello
  a()
-表達式Expression
  var b = function () {
    console.log(this) } //window
  b()

• 在method中，this會指向其所屬物件

var c = {
  name:’This c object’,
  log: function(){
         console.log(this) // c }
console.log(c.name) // updated c object

• 惱人的特殊情況：在method中的function呢？此時this不是指向所屬物件，而是指向window

var c = {
  name:’This c object’,
  log: function(){
      this.name = ‘updated c object’ //更新name
      
      var setname = function(newname){
        this.name = newname } //指向window，創造一全域屬性name
      setname(‘Updated again! The c object’)
      console.log(this.name) } //c name依然是’updated c object’
console.log(window.name) // Updated again! The c object
上述window的name是由setname製造出來的，雷雷雷！

為了修正上述問題，可以透過定義一個變數that (self, vm...) ，讓 const that = this 來傳參考，此時that會指向和this一樣的物件，也就是保存

var c = {
  name:’This c object’,
  log: function(){
    var that = this //利用that保存this的指向，也就是物件c
    that.name = ‘updated c object’ // 更新c.name
      
    var setname = function(newname){
        that.name = newname } // 指向c，更新c.name
    setname(‘Updated again! The c object’)
    console.log(that.name) } // Updated again! The c object 

一開始This的部分卡了很久，以下是一些覺得不錯的整理：

推薦這篇整理的很好的文章

W3school也有清楚的表格