ES5中this指向问题？

• ES5中的this指向的是函数在运行过程中生成的内部对象
• 他指向的是运行时调用它的环境

(以下对于this的探讨基于非严格模式下，严格模式下的在无调用的情况下，this指向为undefined)

var name = "Jhon"
var obj = {
  name: 'lyy',
  fn: function(){
    console.log(this.name)
  }
}
var fn = obj.fn
fn() // Jhon
obj.fn() // lyy
 

fn()在执行的时候，没有对象调用它，那么他的运行环境对象就是全局对象window；

obj.fn() 在运行的时候，fn的调用对象为obj，所以this指向为obj对象，结果为上；

var name = "Jhon"
var obj = {
  name: 'lyy',
  fn: function(){
    return function(){
      console.log(this.name)
    }
  }
}
obj.fn()() // Jhon
 

obj.fn() 返回的是匿名函数，匿名函数的this指向全局对象Window

ES6中的this指向

• 箭头函数没有自己的this
• 箭头函数内部的this指向的是其上级也就是外层函数在定义时的this
• 箭头函数没有arguments参数
• 不可以使用new,否则会报错
• 不可以使用yield,也不可以使用Generator函数

Es6中的箭头函数，他的this指向的是函数在定义时候的外层对象；

var name = "Jhon"
var obj = {
  name: 'lyy',
  fn:()=>{
    console.log(this.name)
  }
}
obj.fn() // 'Jhon
 

es6 中箭头函数的this在定义时候就确定好了， fn属于obj的方法，他的外层属于指向的是window，所以输出为Jhon

var name = "Jhon"
var obj = {
  name: 'lyy',
  fn:function(){
    console.log(this.name) // lyy 这里调用的对象为obj，为Es5函数，所以指向的是运行时
    return ()=>{
      console.log(this.name) //lyy  箭头函数指向的是定义时，他的外层对象为obj，所以为lyy
    }
  }
}
obj.fn()() 
 

总结

Es5中this指向的是运行时的对象， 谁调用它，它就指向谁；

Es6箭头函数中this指向的是定义时外层函数的对象；