2 回答
TA贡献5条经验 获得超4个赞
this使用注意点
1) 避免多层this
var o = {
f1: function() {
console.log(this);
var f2 = function() {
console.log(this);
}();
}
}
o.f1()
上面代码包含两层this,结果运行后,第一层指向该对象,第二层指向全局对象。一个解决方法是在第二层改用一个指向外层this的变量。
var o = {
f1: function() {
console.log(this);
var that = this;
var f2 = function() {
console.log(that);
}();
}
}
o.f1()
上面代码定义了变量that,固定指向外层的this,然后在内层使用that,就不会发生this指向的改变。
2) 避免数组处理方法中的this
数组的map和foreach方法,允许提供一个函数作为参数。这个函数内部不应该使用this。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v+' '+item);
});
}}
o.f()
上面代码中,foreach方法的参数函数中的this,其实是指向window对象,因此取不到o.v的值。
解决这个问题的一种方法,是使用中间变量。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
var that = this;
this.p.forEach(function (item) {
console.log(that.v+' '+item);
});
}}
o.f()
另一种方法是将this当作foreach方法的第二个参数,固定它的运行环境。
var o = {
v: 'hello',
p: [ 'a1', 'a2' ],
f: function f() {
this.p.forEach(function (item) {
console.log(this.v+' '+item);
}, this);
}}
o.f()
2) 避免回调中的this
var o = new Object();o.f = function (){
console.log(this === o);}o.f()
上面代码表示,如果调用o对象的f方法,其中的this就是指向o对象。
但是,如果将f方法指定给某个按钮的click事件,this的指向就变了。
$('#button').on('click', o.f);
添加回答
举报