YuShu Hsiao

在 Javascript - this and prototype 裡面已經有提到this的基本觀念

使用 Object literal 來宣告的物件內的function ，裡面的this 是指到物件本身

也就是 function 執行時期的所屬物件，

看一下以下這段Code，在log這個function裡面使用 function express(function literal)

再宣告了一個method : setNameWithFunction，

宣告完之後馬上呼叫，

const objectWithThis = {
  name: 'I am the object',
  log: function () {
    console.log(this.name);
    this.name = 'Update current object name'
    console.log(this.name);

    const setNameWithFunction = function(newName) {
      this.name = newName;
    };    
    setNameWithFunction('Update object name to "NEW NAME"');
    console.log(this.name);
  }
};

objectWithThis.log();

原先預期的結果，setNameWithFunction 應該要更改name的值，

但是執行結果卻是

修改一下上面的Code，看一下this指到的是什麼東西

const objectWithThis = {
  name: 'I am the object',
  log: function () {
    
    this.name = 'Update current object name'
    console.log(this);

    const setNameWithFunction = function(newName) {
      this.name = newName;
      console.log(this);
    };
    
    setNameWithFunction('Update object name to "NEW NAME"');
    console.log(this);
  }
};

objectWithThis.log();

執行結果=>

在setNameWithFunction這個method裡面的this指到的是window，

這是Javascript長久以來的問題，

解決方法如下

const objectWithThis = {
  name: 'I am the object',
  log: function () {
    // 宣告一個變數me來儲存this(by reference)，
    // 確保裡面指到的都是物件objectWithThis本身
    let me = this;
    me.name = 'Update current object name'
    console.log(me.name);

    const setNameWithFunction = function(newName) {
      me.name = newName;      
    };    
    setNameWithFunction('Update object name to "NEW NAME"');
    console.log(me.name);
  }
};
objectWithThis.log();

這樣執行結果就如我們所預期

碰到物件方法中可能會有不知道 this 指稱到什麼的情況時，為了避免不必要的錯誤，

我們可以在該方法中的最上面建立一個變數，先去把原本的 this 保留下來（let me = this;）。