箭头函数中this

箭头函数中this

建议先阅读本人对于es5中this的详解 es5中的this详解

箭头函数本身是没有this，导致内部的this就是外层代码块的this

ES6的箭头函数的出现，让很多刚刚入门的前端很少用到bind()，call()，apply(),但是还是有必要弄懂this

关键词

1. 上下文作用域
2. 绑定上下文

1. 普通函数和箭头函数比较

• 不使用call

// 1. 不使用call
var str = 'hcc'
let foo = function() {
  let str = 'yx'
  console.log(this.str) 
}
const foo2 = () => {
  let str = 'hcc2'
  console.log(this.str)
}
foo() //'hcc'
foo2() //'hcc'
// 由于箭头函数的绑定上下文，所有foo2中的this指向为上级作用域即` window `

• 变形： 使用call改变this

var str = 'hcc'
let foo = function() {
  let str = 'yx'
  console.log(this.str) 
}
const foo2 = () => {
  let str = 'hcc2'
  console.log(this.str)
}
foo.call({a:1}) //undefined
foo2.call({a:1}) //'hcc'
// 由于箭头函数本身没有this,我们通过call改变箭头函数的this是没有效果的，foo2中的this还是指向` window `

2.高级函数的比较

• 箭头函数和普通函数

const foo = function() {
  return () => {
    console.log(this === window)
  }
}
foo.call({a:1})()  //false
// foo函数中返回一个箭头函数，对于箭头函数而言，foo函数就是它的执行上下文，通过call绑定foo的this,所以对于箭头函数而言，this就是对象{a:1}
const foo2 = () => {
  return () => {
    console.log(this === window)
  }
}
foo2.call({a:1})() //true
// 对于foo2函数而言，自己本身也是一个箭头函数,返回一个箭头函数，2个都没有this，通过call绑定不会生效，所以找到最外层的` window `

• setTimeout中的this (在箭头函数之前，setTimeout中的this指向的是全局的window，setTimeout中的箭头函数没有this,所以寻找上下文中的this)

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
var id = 21;
foo()  // 21 
// 由于通过foo.call(null)调用foo,foo函数的内部this指向window,setTimeout中的箭头函数没有this,所以返回21

foo.call({id: 42}) // 42
// 通过call指定了foo函数执行上下文的this为{id: 42},对于箭头函数而言，foo就是执行上下文，所以返回42

3. 对象中的使用

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

handler.init()  //  转换 handler.init.call(handler)

解析：当我们执行handler中的init方法的时候，init中的this指向的是handler,所以我们在init方法内部使用的所有箭头函数中的this都会指向handler

拓展

请问下面的代码之中有几个this？

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

上面代码之中，只有一个this，就是函数foo的this，所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。