javascript - JavaScript 中匿名函数的作用域问题

Question

我正在使用 javascript 和 Three.js 库学习一些 WebGL 概念，但在尝试弄清楚如何使用 OBJLoader 时遇到了一些障碍。使用类加载 .obj 文件。代码如下:

Model.prototype.loadModel = function () {
    var self = this;
    loader = new THREE.OBJLoader();

    loader.load( this.modelPath, function ( object ) {
        object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
                child.material.map = self.modelTexture;
            }
        });
        self.modelObj = object;
        console.log(self.modelObj); // Returns [Object object]
    });
        console.log(self.modelObj); // Returns undefined

    this.modelObj = self.modelObj;
    this.modelObj.position.x = this.x;
    this.modelObj.position.y = this.y;
    this.modelObj.position.z = this.z;
}

我无法从匿名函数中获取用作 this.modelObj 的对象，我认为这是一个范围问题。尝试将 this.modelObj 添加到函数参数会导致“缺少形式参数”，并且在函数内部使用 this. 认为它在函数(或 loader )的范围内

Answer 1

要在加载完成时调用回调，请将回调作为参数添加到您的函数中:

Model.prototype.loadModel = function (callback) {
    var self = this;
    var loader = new THREE.OBJLoader();

    loader.load(this.modelPath, function (object) { // inner function will be called on success
        object.traverse(function (child) {
            if (child instanceof THREE.Mesh)
            {
                child.material.map = self.modelTexture;
            }
        });

        self.modelObj = object;
        callback(object); // pass loaded object to callback function
    });
}

当您这样做时，您将加载逻辑与回调分开，您将在回调中实际消耗/使用已加载的数据。 想象一下，您有多个这样的情况，您不必一遍又一遍地编写加载逻辑(内部成功函数)。

XHR(在 AJAX 中使用)还接受错误函数，并要求您的函数检查 readystate 变量。我不知道这是否也适用于这个加载程序。但如果可以的话，您也应该实现错误情况。