談談ES6 class中箭頭函數定義的方法

　　ES6 的class，emmm~

　　看軟大大的書知道類的內部全部定義的方法，都是不可枚舉的（non-enumerable）

class Point {
　　constructor(x, y) {
　　　　// ...
　　}

　　toString() {
　　　　// ...
　　}
}
const point = new Point()
Object.keys(point) 

// []

　　這是在chrome控制檯執行的代碼，能夠看到point實例上並無可枚舉的屬性及方法。這一方面是由於類的方法都定義在prototype對象上面，另外一方面是不可枚舉的。哈哈哈哈哈

 　　好吧，並無證實是不可枚舉的　　

 

　　再寫段代碼看看

class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

　　

　　ok,下面來講正事　　

class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }

  say = () =>{
    // ...
  }
}
const point = new Point()
Object.keys(point)

// ["say"]

　　woc，怎麼回事？？不是說類的方法都定義在prototype對象上面嗎？嚶嚶嚶，太難了吧。

　　雖然很難，可是我想試着分析一下。

　　Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組

　　首先從自身開始分析（站在實例的角度上），孔子告訴咱們出了事先從自身找問題。定義在類內部的方法怎麼會跑到我這個實例身上呢（cao）？好難，仍是先看看箭頭函數吧。

　　ok，先來看看箭頭函數。

　　箭頭函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象

　　this指向的固定化，並非由於箭頭函數內部有綁定this的機制，實際緣由是箭頭函數根本沒有本身的this，致使內部的this就是外層代碼塊的this。

　　。。。。

　　看看箭頭函數轉成 ES5 的代碼

　　

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

　　ok，箭頭函數的this其實就是包裹它的第一個非箭頭函數的函數的this值。

 

　　再回頭看看上面舉的例子

class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }

  say = () =>{
    // ...
  }
}

//其實就等同於下面這種寫法
class Point {
  constructor(x, y) {
    // ...
    this.say = () => {
      // ...
    }
  }

  toString() {
    // ...
  }
}

　　

　　最終版

class Point {
  constructor(x, y) {
    // ...
    this.say = () => {
      // ...
    }
  }

  toString() {
    // ...
  }
}

//等同於
class Point {
  constructor(x, y) {
    // ...
    this.say = function() {
      const _this = this
      return function() {}.bind(_this)
    }
  }

  toString() {
    // ...
  }
}

　　邏輯不清寫得亂七八糟，哭了   (ಥ_ʖಥ)

　　

原文出處：https://www.cnblogs.com/tengyijun/p/12105963.html