楔子

JS 的 this 通常有所謂的 scope 問題，最近蠻常遇到小夥伴在問，就順便做一下整理，而且通常this會和class一起出現使用。

this 單獨使用

大概有幾種情況

默認綁定(default binding)

• 在 function 內的 this 為 function 上一層，strict模式為 undefined

function main(){
  console.log(this) // this = global
}
main()

隱式綁定(implicit binding)

var person = {
  name: 'ac',
  getName: function() {
  console.log(this) // this = person
  }
}

person.getName() // 'ac'

function click(cb){
  cb()
}
var name = 'aac'
click(person.getName) 
// 把 person.getName 丟到 click 的參數時
// 這時的 this = global，這時 global.name = 'ac'

所以有時看到this時，就把它丟到執行環境，有 object 就把 object = this，如果是 function 內就看 function 的那一層 this

this & class

當 this 這時候指的就是 class 生出來的 instance，如果沒有 this 就會變成 {}，主要是 class 其實是語法糖，就是把 javascript 包裝成有 class 使用的習慣而以。

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Polygon(10, 10);

console.log(square.area); //100

class PolygonEmpty {
  constructor(height, width) {
    height = height;
    width = width;
  }
}

const polygonEmpty = new PolygonEmpty(10,100)
console.log(polygonEmpty) // {}