ES6 this
:this
的最终指向的是那个调用它的对象
重要:
this
的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁,一定要搞清楚这个。
箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定
this
var Person = {
age = 0;
function growUp() {
return this.age++; // this指向Person对象
};
}
//调用
var man = new Person();
man.growUp(); //通过Person对象来调用growUp(), 所以this指向的是Person对象
this
的默认的指向是window
function Person() {
age = 0;
function growUp() {
return this.age++; // this指向window/undefined/grobal
};
}
//上面的这种情况并不能找到age这个变量,所以会报undefined错误
可以通过新增一个变量来指向期望的 this
对象,然后将该变量放到闭包(函数A
内部声明了个函数B
,函数B
引用了函数B
之外的变量,并且函数A
的返回值为函数B
的引用。那么函数B
就是闭包函数)中来解决。
function Person() {
var that = this;
that.age = 0; //that 指向的就是对象自己
function growUp() {
that.age++; //that指向的是Person对象
};
}
箭头函数完全修复了this
的指向,this
总是指向词法作用域(自动寻找作用域), 箭头函数与正常函数最大的区别是使得this从正常情况下的动态作用域(调用时的上下文)变成了静态作用域(根据定义位置确定值,也就是词法作用域).
function Person() {
age = 0;
growUp = ()=> this.age++ ; // this指向Person对象
}
// 箭头函数中的`this`寻找到当前对象的`age`变量,所以显示结果正常
var growUp = ()=>{
console.log(this)
}
//等同于
var growUp = function(){
console.log(this)
}.bind(this);
箭头函数在定义时就已经确定了
this
的作用域
网友评论