箭头函数没有自己的 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);
}