功能范围问题，并转换为箭头功能

Question

I'm learning how to work with arrow functions and I've tried to convert my code below. There are a scope problem with funcCall and enterKey. I belive that an arrow function should solve this.

function pressKey(funcCall, enterKey = 13) {
    document.addEventListener("keydown", _onKeyDown);
}
function _onKeyDown(e) {
    if(e.keyCode === enterKey) {
        e.preventDefault();
        funcCall();
    }
}

Answer 1

You need to create _onKeyDown inside the scope of pressKey so that it has access to funcCall and enterKey via closure:

function pressKey(funcCall, enterKey = 13) {
    function _onKeyDown(e) {
        if(e.keyCode === enterKey) {
            e.preventDefault();
            funcCall();
        }
    }
    document.addEventListener("keydown", _onKeyDown);
}

Using arrow functions or not shouldn't matter for that.

Answer 2

What you want is a closure from partial application, and yes, arrow functions are good for accomplishing this concisely:

const _onKeyDown = (funcCall, enterKey) => e => {
    if (e.keyCode === enterKey) {
        e.preventDefault();
        funcCall();
    }
};

function pressKey(funcCall, enterKey = 13) {
    document.addEventListener("keydown", _onKeyDown(funcCall, enterKey));
}

However, as is pointed out by others, this feature is not exclusive to arrow functions, so if you enjoy typing or are stuck without ECMAScript 2015 syntax:

function _onKeyDown(funcCall, enterKey) {
    return function (e) {
        if (e.keyCode === enterKey) {
            e.preventDefault();
            funcCall();
        }
    };
}

function pressKey(funcCall, enterKey = 13) {
    document.addEventListener("keydown", _onKeyDown(funcCall, enterKey));
}