点击两个按钮,console 输出的数字是1,2,3,4,5,6...
为什么感觉像两个点击事件共用了一个函数?
<button class="b1">点我</button>
<button class="b2">点我</button>
var hehe = {
a : 0,
getX : function() {
this.a++;
console.log(this.a);
}
}
$(".b1").on("click",function(){
hehe.getX();
});
$(".b2").on("click",function(){
hehe.getX.call(hehe);
你2个事件处理函数里,最终不都是调用的hehe.getX方法吗?
确切的说是,2个回调函数调用了同一个函数,但是输出结果按调用的顺序的不同而不同
如果修改成如下,结果就不同了,虽然调用的还是同一个函数对象;
点击b2的结果始终是11
点击b1次数越多值就越大
<button class="b1">点我</button>
<button class="b2">点我</button>
var hehe = {
a : 0,
getX : function() {
this.a++;
console.log(this.a);
}
}
$(".b1").on("click",function(){
hehe.getX();
});
$(".b2").on("click",function(){
hehe.getX.call({
a:10
});
}
b1按钮事件触发时,getX()方法的作用域是hehe
b2按钮事件触发时,getX()方法通过call获得的作用域依然是hehe
调用的方法,肯定是一个方法。即便你传给call的是另一个作用域,但是调用的getX()方法仍然是同一个方法。
你感觉到是用一个函数,其实是运行getX()方法的作用域是同一个作用域,两个按钮在同一个作用域下操作同一个变量。你call里传一个其他的对象,你再试试,肯定就不一样了。
确实是用的一个函数啊