ES6带来了箭头函数。本以为它是匿名函数的语法糖,于是就掉进了js的大坑里~
进入正题
简单来说js的this优先指向windows,除非挂到对象上才指向对象(隐式绑定和显式用call/apply/bind)。
那么正常(es6以前)来说,我们写类:
function A {
this.init();
}
A.prototype.init = function() {
console.dir(this);
}
var a = new A(); //this指向a
A(); //this指向window
当我们new之后,this就会指向实例a。 然而当我们用箭头函数时:
function A {
this.init();
}
A.prototype.init = () => {
console.dir(this);
}
var a = new A(); //this指向window
new的时候,箭头函数并没有改变this指向(???一脸懵逼)。查阅相关资料之后,发现引入箭头函数是解决这个痛点:当使用匿名函数返回的时候,匿名函数的this是指向this的。
function A {
this.f = function() {
return function() {
console.dir(this);};
}
this.f()();
}
A(); //this指向window
var a = new A(); //this指向window
于是,当我们使用箭头函数时:它竟然“惊喜地”把this指向了实例a!
function A {
this.f = function() {
return () => {
console.dir(this);};
}
this.f()();
}
A(); //this指向window
var a = new A(); //this指向a
真是无心插柳柳成荫,没想到箭头函数还有这样的this指向机制(明明写在外部一点用都没有)。为了深入了解箭头函数的this指向,我整理如下情况:
-
定义在类内:匿名函数和箭头函数的this指向都是实例。
function A { this.f = function() { console.dir(this); }; this.g = () => { console.dir(this); }; this.f<