箭头函数中的this和普通函数中的this对比

ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性。下面来总结一下他们之间的区别：

普通函数下的this:

• 在普通函数中的this总是代表它的直接调用者，在默认情况下，this指的是window，
• 在严格模式下,没有直接调用者的函数中的this是 undefined使用
• call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象

箭头函数中的this:

• 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),
• 而不是执行时的对象, 定义它的时候,可能环境是window,也有可能是其他的。

看下面这段代码:

function a() {
   console.log(this);  //window
 }
 a(); 

因为a是一个全局函数，也就是挂载在window对象下的，所以a(),等价于window.a();

var obj = {
   say: function () {
     setTimeout(function () {
       console.log(this);   //window
     });
   }
 }
 obj.say(); 

定时器中的函数，由于没有默认的宿主对象，所以this指向window

var obj = {
   func: function() {},
   say: function () {
     console.log(this);//obj,此时的this是obj对象
     setTimeout(function () {
       console.log(this);  //window
       that.func();
     });
   }
 }
 obj.say();  

此时say的宿主环境是obj,所以say里面的this是obj,定时器中的函数, 由于没有默认的宿主对象,所以默认this指向window

严格模式下的this:

function test() {
   'use strict';
   console.log(this); //undefined
 }
 test();  

在严格模式下,没有直接调用者的函数中的this是 undefined

"use strict";
    var obj={
      say:function(){
        console.log(this); //obj
      }
    };
obj.say();   

有直接调用者的this是它的调用者

箭头函数中的this:

var obj = {
   say: function () {
     setTimeout(() => {
       console.log(this);// obj
     });
   }
 }
 obj.say(); 

此时的 this继承自obj, 指的是定义它的对象obj, 而不是 window!

var obj = {
say: function () {
  var f1 = () => {
    console.log(this); // obj
    setTimeout(() => {
      console.log(this); // obj
    })
  }
  f1();
  }
}
obj.say()  

因为f1定义时所处的函数 中的 this是指的 obj, setTimeout中的箭头函数this继承自f1,所以不管有多层嵌套,都是 obj

var obj = {
say: function () {
  var f1 = function () {
    console.log(this); // window, f1调用时,没有宿主对象,默认是window
    setTimeout(() => {
      console.log(this); // window
    })
  };
  f1();
  }
}
obj.say() 

  结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window

引用地址:https://www.cnblogs.com/fanzhanxiang/p/8888963.html