为什么我无法访问对象的属性？

Question

I'm trying to manipulate Vec2 object's properties (x and y) in onDocumentKeyDown() function which is in event.js. Why I couldn't access vec2's property in onDocumentKeyDown() function?

file: event.js

function onDocumentKeyDown(event, vec2){
    var x_p = vec2.x;    // Uncaught TypeError: Cannot read property 'x' of undefined
    var y_p = vec2.y;
    ...

file: app.js

function init(){
    ...
    var vec2 = new Vec2(0,0);

    function animate (time) {
        ...

        document.addEventListener("keydown", onDocumentKeyDown, false);
        vec2 = onDocumentKeyDown(event, vec2);
        obj.move(vec2);
        ...
        startTime = time;

        window.requestAnimationFrame(animate);
    }
    animate(0);
}

Vec2 class (Vec2.js):

class Vec2{
    x;
    y;
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
    ...
}

index.html:

    .....
    <script src="vec2.js"></script>
    <script src="lib.js"></script>
    <script src="event.js"></script>
    <script src="app.js"></script>
</body>

Answer 1

When you addEventListener as onDocumentKeyDown it is just passed an event value and not the vec2 as argument.

You can use .bind method to pass on the custom arguments. However you would need to change the order in which you receive arguments like

   function onDocumentKeyDown(vec2, event){
    var x_p = vec2.x;    
    var y_p = vec2.y;
    ...
    }
    function init(){
        ...
        var vec2 = new Vec2(0,0);

        function animate (time) {
            ...
            const fn = onDocumentKeyDown.bind(this, vec2);
            document.addEventListener("keydown", fn , false);
            vec2 = onDocumentKeyDown(vec2, event);
            obj.move(vec2);
            ...
            startTime = time;

            window.requestAnimationFrame(animate);
        }
        animate(0);
    }

Since you wouldn't want to change the argument order to onDocumentKeyDown, you can make use of arrow function

function onDocumentKeyDown(event, vec2){
    var x_p = vec2.x;
    var y_p = vec2.y;
    ...

}

function init(){
    ...
    var vec2 = new Vec2(0,0);

    function animate (time) {
        ...
        const fn = (event) => onDocumentKeyDown(event, vec2);
        document.addEventListener("keydown", fn , false);
        vec2 = onDocumentKeyDown(vec2, event);
        obj.move(vec2);
        ...
        startTime = time;

        window.requestAnimationFrame(animate);
    }
    animate(0);
}

PS Since you need to pass the same instance of function to removeEventListener that you passed to addEventListener, we can store the binded function to a seperate variable