本节书摘来华章计算机出版社《JavaScript应用程序设计》一书中的第2章,第2.5节,作者:Eric Elliott 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
2.5 方法上下文
在JavaScript中,执行函数的方式是在其引用的结尾处追加花括号,下面我们对highPass()函数做略微修改。
function highPass(number, cutoff) {
cutoff = cutoff || this.cutoff;
return (number >= cutoff);
}
var filter1 = {
highPass: highPass,
cutoff: 5
},
filter2 = {
// No highPass here!
cutoff: 3
};
highPass()的入参包含一个必选参数Number与一个可选参数cutoff。如果未传入cutoff,函数会认为自己是作为方法在对象上(filter)调用,会使用对象(filter)中的属性cutoff而非入参cutoff。
普通函数的调用:
test('Invoking a function.', function () {
var result = highPass(6, 5);
equal(result, true,
'6 > 5 should be true.');
});
警告: 一般来说,函数中的this始终是指向全局对象,除非你将函数作为对象的方法执行(使用点语法或者方括号)。所以在做函数调用时,最好先确认其this指向是否正确,以防像属性赋值这样的操作污染全局对象。
方法调用将函数与对象关联起来,像object.methodName()(点语法)、object['method Name']()(方括号语法)都属于方法调用。
test('Invoking a method.', function () {
var result1 = filter1.highPass(3),
result2 = highPass.call(filter2, 3),
result3 = filter1.highPass(6);
equal(result1, false,
'3 >= filter1.cutoff should be false.');
equal(result2, true,
'3 >= filter2.cutoff should be true.');
equal(result3, true,
'6 >= filter1.cutoff should be true.');
});
当你通过点语法调用方法时,在方法中使用this,可以访问到对象的属性。在上例中,将入参与filter对象上的cutoff属性作比较,随后返回false,因为3明显是小于this.cutoff值。请牢记,this值的指向取决于方法在哪一个对象上执行。
在第二个例子中,call()方法(继承自Function.prototype)将highPass()方法代理到了filter2对象上,由于filter2对象中cutoff值是3而不是5,测试依然通过。
确切来说,call()方法存在于每一个函数中,理论上可以使用call()方法让函数在任意对象上进行方法调用,换句话说,它将函数中的this指向了你所指定的对象。方法签名如下:
someMethod.call(context, argument1, argument2, ...);
其中context是你希望this所指向的对象,如果想传入一组数组作为入参,可以使用apply():
someMethod.apply(context, someArray);
Function.prototype.bind()
诚然,call()与apply()方法非常实用,不过使用它们时,你需要格外小心,因为它们所绑定的this上下文指向是临时的,每次调用都需要准确无误地传入,而且时刻得确保this能够在当前函数作用域中访问到。不过每次调用都这么做略显麻烦,特别是在事件监听器中。
bind()方法可以解决这个问题,它用来将函数的this指向与目标对象绑定。bind()方法是JavaScript语言规范中的一门新特性,最开始在Prototype等JavaScript类库中出现,随后在ECMAScript5规范中被标准化,但是老版本的浏览器对它的兼容度不高,你可以考虑自己实现或者采用第三方类库。
bind()方法的使用场景之一,将事件监听器与对象绑定:
var lightbulb = {
toggle: function toggle() {
this.isOn = !this.isOn;
return this.isOn;
},
isOn: false
},
toggle = lightbulb.toggle,
lightswitch = document.getElementById('lightswitch');
lightswitch = document.getElementById('lightswitch');
lightswitch.addEventListener('click',
lightbulb.toggle, false);
上述代码示例很好理解,事件监听器通过addEventListener方法绑定至lightswitch的DOM元素上。那么问题来了,事件监听器中的this指向并不是lightbulb对象,而是点击触发时的DOM元素,所以lightbulb的开关逻辑不会被执行。
打开界面上的开关按钮,lightbulb.isOn的值仍为false。下面来用bind()方法修复这个问题,仅需对toggle的赋值方式做略微修改。
toggle = lightbulb.toggle.bind(lightbulb);
OK,现在lightbulb的开关可以响应来自用户的操作了。