javascript - 对象具有无法访问的属性

Question

我有一个名为 THREEx 的对象。它似乎有一个名为 DragPanControls 的属性，这显然是一个函数。我知道 THREEx 存在，因为

console.log("THREEx? ", THREEx);

返回此输出(见第 3 行):

我知道 DragPanControls 存在，因为单击上面第 3 行中的绿色文本会显示:

但是，无法访问 DragPanControls。我知道这是因为

console.log("THREEx.DragPanControls? ", THREEx.DragPanControls);

返回 undefined(见第一张图片中的第 4 行)并且因为尝试将其用作构造函数也失败(见第一张图片中的第 5 行)

我如何找出问题所在？运行代码可以在这里看到: https://dl.dropbox.com/u/2070405/stackoverflow1/index.html

更新:感谢亚历山大的回答，问题现已解决。为了将来引用，这是生成 THREEx 对象的代码:

/** @namespace */
define(["../libs/three.js/build/three"],
function () {

// Setup work:
var THREEx  = THREEx        || {};

THREEx.DragPanControls  = function(object, domElement)
{
    this._object    = object;
    this._domElement= domElement || document;

    // parameters that you can change after initialisation
    this.target = new THREE.Vector3(0, 0, 0);
    this.speedX = 0.03;
    this.speedY = 0.03;
    this.rangeX = -40;
    this.rangeY = +40;

    // private variables
    this._mouseX    = 0;
    this._mouseY    = 0;

    var _this   = this;
    this._$onMouseMove  = function(){ _this._onMouseMove.apply(_this, arguments); };
    this._$onTouchStart = function(){ _this._onTouchStart.apply(_this, arguments); };
    this._$onTouchMove  = function(){ _this._onTouchMove.apply(_this, arguments); };

    this._domElement.addEventListener( 'mousemove', this._$onMouseMove, false );
    this._domElement.addEventListener( 'touchstart', this._$onTouchStart,false );
    this._domElement.addEventListener( 'touchmove', this._$onTouchMove, false );
}

THREEx.DragPanControls.prototype.destroy    = function()
{
    this._domElement.removeEventListener( 'mousemove', this._$onMouseMove, false );
    this._domElement.removeEventListener( 'touchstart', this._$onTouchStart,false );
    this._domElement.removeEventListener( 'touchmove', this._$onTouchMove, false );
}

THREEx.DragPanControls.prototype.update = function(event)
{
    this._object.position.x += ( this._mouseX * this.rangeX - this._object.position.x ) * this.speedX;
    this._object.position.y += ( this._mouseY * this.rangeY - this._object.position.y ) * this.speedY;
    this._object.lookAt( this.target );
}

THREEx.DragPanControls.prototype._onMouseMove   = function(event)
{
    this._mouseX    = ( event.clientX / window.innerWidth ) - 0.5;
    this._mouseY    = ( event.clientY / window.innerHeight) - 0.5;
}

THREEx.DragPanControls.prototype._onTouchStart  = function(event)
{
    if( event.touches.length != 1 ) return;

    // no preventDefault to get click event on ios

    this._mouseX    = ( event.touches[ 0 ].pageX / window.innerWidth ) - 0.5;
    this._mouseY    = ( event.touches[ 0 ].pageY / window.innerHeight) - 0.5;
}

THREEx.DragPanControls.prototype._onTouchMove   = function(event)
{
    if( event.touches.length != 1 ) return;

    event.preventDefault();

    this._mouseX    = ( event.touches[ 0 ].pageX / window.innerWidth ) - 0.5;
    this._mouseY    = ( event.touches[ 0 ].pageY / window.innerHeight) - 0.5;
}

// Return module:
return {
    THREEx: THREEx
    //dragpancontrols: THREEx.DragPanControls
}

});

这是 main.js，require.js 导入上面的代码(上面的代码在文件 myLibs/dragPanControls.js 中):

// CONFIGURE require.js BEFORE YOU START LOADING MODULES:

requirejs.config({
shim: {
    'libs/three.js/build/three': {
        deps: [],
        exports: 'three' //'three' will not be accessible, but any values that three.js writes to the global object will become available to me if I import 'three'.
        /*init: function () {
            // if I want 'three' to actually refer to something, I can do so by returning whatever I want it to refer to, in this init function
            console.log("init three. Is THREE available? ", THREE);
            return this;
        }*/
    }
}
});


// NOW START LOADING MODULES:

require(["myLibs/dragPanControls", "libs/three.js/build/three"], function(THREEx, three) {
console.log("Function call called after all modules are loaded and accessible");


// HELLO WORLD EXAMPLE:

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    scene = new THREE.Scene();

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    console.log("THREEx? ", THREEx);
    //console.log("DragPanControls? ", DragPanControls);
    console.log("THREEx.DragPanControls? ", THREEx.DragPanControls);
    cameraControls  = new DragPanControls(camera);

};

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

};

});

Answer 1

从您的第一个屏幕截图来看，THREEx 对象实际上是一个包含另一个 THREEx 对象的对象。

您可以使用以下方法访问函数 DragPanControls:

THREEx.THREEx.DragPanControls