处理JavaScript函数上下文时可能遇到一些问题。在回调函数中(例如事件处理器),函数上下文与预期不符,但可以使用call或apply方法绕过。在本节中,我们看看另外两个选择:箭头函数和bind方法,在一些情况下可以更优雅地实现相同的效果。
使用箭头函数绕过函数上下文
箭头函数相比于传统的函数声明和函数表达式,可以更加优雅地创建函数。箭头函数作为回调函数还有一个更优秀的特性:箭头函数没有单独的this值。箭头函数的this与声明所在的上下文相同。
<!--随后会为该按钮附加事件处理器-->
<!--事件处理的按钮元素-->
<button id="testClick">Click Me!</button>
<script>
/*Button构造函数用于创建保存按钮的状态对象*/
function Button() {
this.clicked = false;
//声明用于处理点击的箭头函数。因为click是对象的方法,我们在函数内部使用this获得对象的引用。
this.click = () =>{
this.clicked= true;
//在函数内,验证点击之后按钮的状态发生变化。
if (button.clicked) {
console.log('The button has been clicked!');
}
}
}
var button = new Button();
var elem = document.getElementById('testClick');
//在按钮上监听点击事件
elem.addEventListener('click', button.click);
</script>
箭头函数自身不含上下文,从定义时所在函数继承上下文。箭头函数回调函数内的this指向按钮对象。
可以看出一切正常。按钮对象保持单击状态,在button构造函数内部使用箭头函数创建单击事件:
/*Button构造函数用于创建保存按钮的状态对象*/
function Button() {
this.clicked = false;
//声明用于处理点击的箭头函数。因为click是对象的方法,我们在函数内部使用this获得对象的引用。
this.click = () =>{
this.clicked= true;
//在函数内,验证点击之后按钮的状态发生变化。
if (button.clicked) {
console.log('The button has been clicked!');
}
}
}
调用箭头函数时,不会隐式传入this参数,而是从定义时的函数继承上下文。在本例中,箭头函数在构造函数内部,this指向新创建的对象本身,因此无论何时调用click函数,this都将指向新创建的button对象。
参考《JavaScript忍者秘籍》