标签:需要 fun 引用 ons 函数对象 win 并且 回避 次数
随着你的使用模式越来越复杂,显式传递上下文对象会让代码变得越来越混乱,使用this
则不会这样。当我们介绍对象和原型时,你就会明白函数可以自动引用合适的上下文对象有多重要。
首先需要消除一些关于this的错误认识。
先来看个例子:
function foo(num) {
console.log("foo: " + num);
// 记录foo被调用的次数,这里this指向window
this.count++;
}
foo.count = 0;
var i;
for (i = 0; i < 10; i++) {
if (i > 5) {
foo(i);
}
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9
// foo被调用了多少次?
console.log(foo.count); // 0 -- WTF?
执行foo.count = 0
时,的确向函数对象foo添加了一个属性count。但是函数内部代码this.count
中的this并不是指向那个函数对象(指向全局变量 window),所以虽然属性名相同,根对象却并不相同,困惑随之产生。
如果要从函数对象内部引用它自身,那只使用this是不够的。一般来说你需要通过一个指向函数对象的词法标识符(变量)来引用它。
解决方法一:
一种解决方法是用词法作用域:
function foo(num) {
console.log( "foo: " + num );
// 记录foo被调用的次数
data.count++;
}
var data = {
count: 0
};
解决方法二:
另一种解决方法是使用foo标识符替代this来引用函数对象:
function foo(num) {
console.log( "foo: " + num );
// 记录foo被调用的次数
foo.count++;
}
foo.count=0;
然而,这种方法同样回避了this的问题,并且完全依赖于变量foo的词法作用域。
重点:解决方法三:
另一种方法是强制this
指向foo
函数对象:
function foo(num) {
console.log( "foo: " + num );
// 记录foo被调用的次数
// 注意,在当前的调用方式下(参见下方代码),this确实指向foo
this.count++;
}
foo.count = 0;
var i;
for (i=0; i<10; i++) {
if (i > 5) {
// 使用call(..)可以确保this指向函数对象foo本身
foo.call( foo, i );
}
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9
// foo被调用了多少次?
console.log( foo.count ); // 4
《你必须知道的javascript(上)》- 2.this与对象原型
标签:需要 fun 引用 ons 函数对象 win 并且 回避 次数
原文地址:https://www.cnblogs.com/tangge/p/11380139.html