箭头函数中的this指向问题
箭头函数没有自己的 this,它内部的 this 是外层代码块的 this,也就是定义箭头函数时所在的对象。
ES6 标准入门里面对箭头函数 this 的指向有如下说法:
函数体内的 this 对象就是定义时所在的对象,而不是调用时所在的对象。
一般this 对象的指向是可变的,但是在箭头函数中,this 的指向是固定的。
普通函数
- 普通函数的
this
在声明时指向window
,在调用时指向调用它的对象,如果直接调用,也指向window
function b() { function a(){ console.log(this) } let c = function() {a()} let obj2 = {a,c} obj2.a()//打印出obj2,打印出调用时的对象obj2 obj2.c()//打印出window,打印出直接调用时的对象window } let obj = {b} obj.b()//使函数b内上下文this为obj
箭头函数
- 箭头函数的this在声明时指向
window
,在调用时指向声明时所在的上下文this
function b() { let a = () => console.log(this) let c = function() {a()} let obj2 = {a,c} obj2.a()//打印出obj,打印出声明时的上下文,而不是调用它的对象 obj2.c()//打印出obj,打印出声明时的上下文,而不是调用时的上下文 } let obj = {b} obj.b()//使函数b内上下文this为obj
ES6的箭头函数可以改写成ES5,如下:
// ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); }
故不积跬步,无以至千里;不积小流,无以成江海。