普通函数和箭头函数中this的指向

一、总结：

1、在普通函数中：this被谁调用，就指向谁

2、在箭头函数中：箭头函数没有this，this在哪声明，this就指向上一层作用域

二、普通函数中：

例子1：

普通函数单独使用时，this指向global

name = 'zhangsan'
let sayName = function () {
  console.log(this); // global
  console.log(this.name); // zhangsan
  //this被谁调用，就指向谁
}
sayName()

例2：obj1.sayName()()等价于在全局中执行函数，因此this指向global

name = 'zhangsan'
var obj1 = {
  name: 'tom',
  sayName: function () {
    return function () {
      console.log(this.name);
    }
  }
}
obj1.sayName()() //zhangsan
// obj1.sayName()的返回只是一个function函数表达式，再执行一次()才是结果，此时返回值() 等价于 函数名() 

例3：

this在sayName中 ，this被obj1调用，所以指向obj1

name = 'zhangsan'
var obj1 = {
  name: 'tom',
  sayName: function () {
    console.log(this.name);
  }
}
obj1.sayName() //tom

三、在箭头函数中：

例1：

单独使用箭头函数时，this指向module.exports

let sayName = () => {
  console.log(this); // {}
  console.log(this.name); // undefined

  // 箭头函数没有this
  // 内部this指向声明箭头函数时外部作用域中得this
}
sayName()

例1中module.exports没有name值所以是undefined

向module.exports加入name属性

module.exports.name = 'zhangsan'; //module.exports 指当前模块 

结论：通过例1可知，箭头单独使用this指向的是module.exports

例2：

箭头函数在sayName()中声明，sayName()的上一级是obj ，所以指向obj

var obj1 = {
  name: 'tom',
  sayName: function () {
    return () => {
      console.log(this.name);
    }
  }
}
obj1.sayName()() //tom

例3：

箭头函数在sayName在obj中声明，而obj的上一级是module.exports,所以指向module.exports，而module.exports没有定义name属性所以为undefined

var obj1 = {
  name: 'tom',
  sayName: () => {
    return () => {
      console.log(this.name);
    }
  }
}
obj1.sayName()() //undefined