Question

所以我正在刷我的vanilla Javascript，专门用于动画，我遇到了一个教程，其中包含以下代码：

function sprite(options){

        var spr = {},
            frameIndex = 0,
            tickCount = 0,
            ticksPerFrame = options.ticksPerFrame || 0,
            numberOfFrames = options.numberOfFrames || 1;

        spr.context = options.context;
        spr.width = options.width;
        spr.height = options.height;
        spr.image = options.image;
        spr.loop = options.loop;

        spr.render = function(){
            console.log("render");
            //console.log("height: ", spr.height);
            //console.log("width: ", spr.width);
            //console.log("context: ", spr.context);
            //console.log("image: ", spr.image);

            // Clear Canvas
            spr.context.clearRect(0, 0, spr.width, spr.height);

            // Draw animation
            spr.context.drawImage(
                spr.image,
                frameIndex * spr.width / numberOfFrames,
                0,
                spr.width / numberOfFrames,
                spr.height,
                0,
                0,
                spr.width / numberOfFrames,
                spr.height
            );
        };

        spr.update = function(){
            tickCount += 1;

            if (tickCount > ticksPerFrame){
                tickCount = 0;

                if (frameIndex < numberOfFrames - 1){
                    frameIndex += 1;
                } else if (spr.loop) {
                    frameIndex = 0;
                }
            }
        };

        return spr;
    }

我理解所有的逻辑和一切，但是

frameIndex
tickCount
ticksPerFrame
numberOfFrames

在render()返回后，可以从update()和spr方法访问？据我所知，它们是sprite函数的本地函数，在实例化后不应该可以访问。

Answer 1

他们 sprite函数的本地。

您提到的其他函数是在sprite函数内定义的，因此可以访问其范围内的任何变量。

在sprite函数完成后它们仍然可用，因为它们已被返回。这称为 a closure 。

实例化后可从方法访问Javascript局部变量？

1 个答案: