Class中的实例方法用箭头函数写, 内部的this指向对象本身问题

最近在学习React框架的时候，发现在组件中直接写箭头函数, 作为组件实例的方法, 其内部的this是直接指向组件的，由此知识点为导火索，点燃了我知识盲区的炸药桶，因为以前并没有注意到这个知识点，例如:

• es6中的类定义

  class A {
  	constructor(name, age) {
  		this.name = name
  		this.age = age
  	}
  	
  	logThis= () => {
  		console.log(this)	// 指向实例
  	}
  }
  
  new A('张三', 21).logThis()
  

• 运行截图
  
  但是类似的箭头函数定义在ES5中就行不通

• ES5中的定义

  function Son(name, age) {
    this.name = name
    this.age = age
  }
  
  Son.prototype = {
    constructor: Son,
  
    consoleLog: () => {
      console.log(this)
    }
  }
  
  new Son('xyb', 20).consoleLog()
  

• 运行结果
  
  这运行结果是window是情理之中的，箭头函数中的this是其上下文的this， 而Son.prototype并没有自己形成私有栈内存，其上下文还是在全局作用域下， 也就是window

突发奇想(别当真)

想发设发把ES5中定义箭头函数, 其内部的this指向变为实例

 function Son(name, age) {
   this.name = name
   this.age = age

	// 把这个箭头函数的上下文定义再构造函数内!!
   Son.prototype.consoleLog = () => {
     console.log(this)
   }
 }

 Son.prototype = {
   constructor: Son
 }

 new Son('xyb', 20).consoleLog()

运行：