- 相关文章
一、 this辨析
1.1 es5 - this
- 先看
es5语法下函数内的this。- 点击打开demo
var obj = {};
obj.getThis = function () {
console.log(this);
};
obj.getThis(); // obj
// 等价以下写法
var obj = {
getThis: function () {
console.log(this);
}
};
obj.getThis();
- 结果如图所示
1.2 es6 - this
- 看
es6语法下函数内的this。- 点击打开demo
- 箭头函数相当于直接在全局作用域中定义，所以
this指向window。
var obj = {};
obj.getThis = () => {
console.log(this);
};
obj.getThis(); // window
// 等价于以下写法
var obj = {
getThis: () => {
console.log(this);
}
};
obj.getThis(); // window
- 例2
- 点击打开demo
var obj = {};
obj.getThis = () => {
return () => {
console.log(this);
}
}
obj.getThis()(); //window
- 结果如图所示
1.3 来个混合写法
- 例1：
- 点击打开demo
- 箭头函数是在
obj.getThis函数中定义的，因此，this指向obj
var obj = {};
obj.getThis = function () {
return () => {
console.log(this);
};
}
obj.getThis()(); // obj
// 等价于
var obj = {
getThis: function () {
return () => {
console.log(this);
}
}
};
obj.getThis()(); // obj
- 结果如图所示
- 例2：
- 点击打开demo
- 箭头函数是在
obj.getThis函数的内部函数inner中定义，但是，this指向window
var obj = {};
obj.getThis = function () {
var inner = function () {
console.log(this);
}
inner();
}
obj.getThis(); // window
- 结果如图所示
- 例3
- 点击打开demo
function outer () {
return () => {
console.log(this);
}
}
outer()(); // window
- 结果如图所示
1.4 总结
- 普通函数中的
this的指向取决于调用表达式的形式。- 箭头函数中的
this的指向取决于箭头函数定义时所处的环境。- 混杂函数（不同函数和箭头函数的组合）中的
this不一定是当前对象，也有可能是window对象。