[JavaScript知识库]ES6入门：箭头函数、非箭头函数的this指向

ES6入门：箭头函数、非箭头函数中的this指向

一、非箭头函数中的this指向
1、在全局环境下，this 始终指向全局对象（window）, 无论是否严格模式；

console.log(this); // window

2、函数上下文调用
函数直接调用：this 指向和函数在哪儿调用没关系，只和谁在调用有关
没有具体调用对象的话，this 指向 undefined，在非严格模式下，转向 window
1）非严格模式下，this 默认指向全局对象window

function f1(){
  return this;
}

f1() === window; // true

2）而严格模式下， this为undefined

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

3、事件处理中的this指向：谁绑定的指向谁

document.onclick = function () {
  console.log(this);
};
//当点击浏览器时，指向document，相当于document.onclick()

4、构造函数中的this指向:指的是构造函数实例化后生成的对象

function Person(username) {
  this.username = username;
  console.log(this);
}

const p = new Person('Alex'); 
//Person{username:Alex}

二、箭头函数中的this指向
箭头函数没有自己的 this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值，即作用域链（参考文章底部：作用域链）

const calc = {
  add: function () {
    const adder = () => {
      console.log(this);
    };
    adder();
  }
};
calc.add(); // this指向为calc

上文中，通过calc.add()对象调用add，执行add里面代码，就会有adder（）这个函数，调用adder这个函数，adder是箭头函数，箭头函数没有自己的this，往外层走，即this相当于add方法中的this，那么根据之前的（上下文规则）（自行查看）文章，谁调用，this指向谁
那么：

const calc = {
  add: function () {
    const adder = () => {
      console.log(this);
    };
    adder();
  }
};

const addFn = calc.add;
addFn(); // undefined->window

上面，add方法并没有被调用，只是赋值给一个函数，addFn（）函数，没有任何具体的调用对象，那么在非严格模式下，指向了window

只是一点拙见，想要了解更多可以参考别的大佬的文章this指向详解