내부 함수에서 외부 범위로 변수를 조정하십시오.

Question

이 코드를 작동 시키려고하지만, 함수 범위가있는 바위에 있습니다.

var Canoe = function() { 
    this.mesh = new THREE.Object3D(); 
    var loader = new THREE.JSONLoader(); 
    loader.load('models/canoe.json', function (geometry, materials) { 
     var canoeMesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
     canoeMesh.castShadow = true; 
     canoeMesh.receiveShadow = true; 
     this.mesh.add(canoeMesh); 
    }); 

}

그리고 이것은 내가지고있어 오류입니다 :

이 내 코드는 지금까지입니다 나는 내가에서 만든 mesh을 할당하는 방법을

Cannot read property 'add' of undefined 

외부 함수에 내부 함수?

Answer 1

하나의 솔루션은 함수에 정의 된 변수에 메쉬를 배치하는 것입니다 :

var Canoe = function() { 
var mesh = new THREE.Object3D(); 
this.mesh = mesh; 
var loader = new THREE.JSONLoader(); 
loader.load('models/canoe.json', function (geometry, materials) { 
    var canoeMesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
    canoeMesh.castShadow = true; 
    canoeMesh.receiveShadow = true; 
    mesh.add(canoeMesh); 
}); 

누군가가 자바 스크립트에서 어떻게 this 작품에 대한 책을 쓸 수 있습니다. 그것은 종종 당신이 기대하는 것이 아닙니다.

Answer 2

가 loader.load 전에() 부하의 함수에서

var that = this; 

을 추가

that.mesh.add(canoeMesh); 

문제가 넣어 그 이외의 것보다 다른 곳을 "이"가 loader.load() 안의 점 함수.

Answer 3

몇 가지 옵션이 있다고 생각합니다.

var self = this; 
var Canoe = function() { 
    self.mesh = new THREE.Object3D(); 
    var loader = new THREE.JSONLoader(); 
    loader.load('models/canoe.json', function (geometry, materials) { 
     var canoeMesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
     canoeMesh.castShadow = true; 
     canoeMesh.receiveShadow = true; 
     self.mesh.add(canoeMesh); 
    }); 
} 

또 다른 옵션을, 당신은 transpiler이있는 경우, 어휘 this 유지 화살표 기능을 사용하는 것입니다 :

var Canoe =() => { 
    this.mesh = new THREE.Object3D(); 
    var loader = new THREE.JSONLoader(); 
    loader.load('models/canoe.json', function (geometry, materials) { 
     var canoeMesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)); 
     canoeMesh.castShadow = true; 
     canoeMesh.receiveShadow = true; 
     this.mesh.add(canoeMesh); 
    }); 
}