克服JS - this

this 在 Javascript 裡面是一個容易令人誤會，也十分令人困惑的字。
它在不同的位置上所代表的東西不一定是這麼直觀的，直白的翻譯 this 是這個的意思。
我一開始使用的時候，一直覺得它就是指當下把它包起的東西，物件也好，函式也好，但看來並不是這樣(笑)...

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

a();
// Window{...}

function b() {
  this.test = 'hello';
}
console.log(this.test);
// 'hello'

this指的是Global Object，而另一個函式內的this也指向的是同一個Global Object。

var c = {
  name: 'The c obj',
  log: function() {
    console.log(this);
  }
}

c.log();
// {name:'The c obj', log:function}

這裡的this則指的是c這個物件。

var c = {
  name: 'The c obj',
  log: function() {
    this.name = 'Updated c object';
    console.log(this);
  }
}

c.log();
// {name:'Updated c object', log:function}

因此可以變動物件c內的name。

var c = {
  name: 'The c obj',
  log: function() {
    this.name = 'Updated c object';

  var setname = function(newname) {
    this.name = newname;
  }
  setname('new name yes!');
  console.log(this);
  }
}

c.log();
//{name:'Updated c object', log:function}
console.log(this.name);
// 'new name yes!'

setname函式的this卻指向global object...
而這種狀況呢，就會再log函式內加入一個變數指向c物件來代替this。

var c = {
  name: 'The c obj',
  log: function() {
    var self = this;
    self.name = 'Updated c object';

    var setname = function(newname) {
        self.name = newname;
    }
    setname('new name yes!');
    console.log(self);
  }
}

c.log();
//{name:'new name yes!', log:function}

如此一來，setname函式變更的即是c物件內的name，這樣的作法也是常見的pattern唷。

reference: Udemy 克服JS的奇怪部分