JavaScript中this值很让人头疼, 今天总结下几个方法快速判断this的指定.
先说结论(传统语法):
-
函数在new(new绑定)中调用: this绑定的是新创建的对象:
var bar = new foo; //this 指向bar.
-
函数通过call / apply(显式绑定) 或者硬绑定调用, this指向括号内的对象:
var bar = foo.call(obj2); // this 指向 obj2
-
函数在某个上下文对象中调用(隐式绑定), this绑定该上下文对象:
var bar = obj1.foo; //this 绑定 obj1
-
如果上述三种都不是, 使用默认绑定. 在严格模式下 绑定到undefined, 否则绑定到全局对象:
var bar = foo; //非严格模式下,this指向全局对象;
重点: ES6中 this词法
-
ES6中引入了箭头函数, 解决了this的复杂性.
-
箭头函数不是使用function关键字定义的, 而是使用"=>"操作符定义的.
-
箭头函数不使用上文的四种标准规则, 而是根据外层(函数或全局)的作用域来决定this.
function foo{
//返回一个箭头函数
return (a) => {
//this继承自 foo
console.log(this.a);
};
}
var obj1 = {
a:2
};
var obj2 = {
a:3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); //2, 不是3
foo内部创建的箭头函数会捕获调用foo时的this.
由于foo的this被绑定到obj1, bar(引用箭头函数) 的this也会绑定到 obj1;
箭头函数的绑定无法被修改(new也不行).
箭头函数最常用于回调函数中, 例如事件处理器或定时器:
function foo{
setTimeout => {
//这里的this 在词法上继承自foo
console.log( this.a );
}, 100 );
};
foo.call( obj ); //2
function foo{ //等价于上述代码
var self = this; //ES6之前的模式 , self绑定外层函数.
setTimeout( function{
console.log( self.a ); //此时self的指向已经固定.
}, 100 );
}
var obj = {
a = 2;
};
foo.call(obj); //2
具体来说,箭头函数会继承外层函数调用的this绑定(无论this绑定到什么).
最近才开始学ES6和MVVM框架,的确晚了一步.之前一直认为打好基础最重要,死磕ES5, 得不偿失. 面对旧技术的漏洞就像泥潭, 最好的方法是绕开, 而不是自不量力想要克服它.
(The End)
本文为头条号作者发布,不代表今日头条立场。