다른 개체 메서드 내에서 개체 속성 액세스

Question

여러 가지 메서드를 저장하고 일부 변수를 저장하는 Javascript 개체가 있습니다. 일반적인 경우에는 메소드가 서로 또는 변수에 액세스하려고 시도하지만 잘 작동하지만, 메소드가 범위를 벗어난 호출 (다른 콜백을 통해)되면 더 이상 변수에 액세스 할 수 없습니다. 여기

예 JSFiddle :

var obj = { 
 
     x: null, 
 
     func1: function() { 
 
\t  console.log('func1, x is ' + this.x); 
 
     }, 
 

 
     func2: function() { 
 
\t  console.log("func2"); 
 
     this.func1(); 
 

 
\t  var func1 = this.func1; 
 
     func3(function() { 
 
    \t  func1(); 
 
     }); 
 
     } 
 
    }; 
 

 
    function func3(callback) { 
 
\t console.log("func3"); 
 
\t return callback(); 
 
    } 
 

 
    obj.func2();

상기 코드로부터의 출력은 :

func2 
func1, x is null 
func3 
func1, x is undefined 

이하 http://jsfiddle.net/3Lkuz2Lk/2/

문제를 설명하는 샘플 코드

무엇이 아니오 나에게 명확한 이유는 두 번째 func1이 x라고 불리는 이유가 정의되지 않았기 때문입니까?

이 작업을 수행해야하는 경우 (즉, 호출 된 컨텍스트에 상관없이 개체 내의 메서드와 변수에 액세스 할 수 있어야합니다.) 어떻게 수행 할 수 있습니까? 나는 위의 접근법이 func3에 대한 호출에 사용 가능하게하기 위해 func1 참조를 저장해야하므로 부정확하다고 생각합니다. 그리고 나는 더 깨끗하고 간단한 접근법이 필요합니다. 당신은 bind(this)를 사용할 필요가

Answer 1

var obj = { 
 
     x: null, 
 
     func1: function() { 
 
    console.log('func1, x is ' + this); 
 
     }, 
 

 
     func2: function() { 
 
    console.log("func2"); 
 
     this.func1(); 
 

 
    var func1 = this.func1; 
 
     func3(func1); 
 
     } 
 
    }; 
 

 
    function func3(callback) { 
 
    console.log("func3"); 
 
    return callback(); 
 
    } 
 

 
obj.func2();

이 첫 번째 경우에서, 이 점 다음 개체에있는 동안 이은 전역 개체/창을 참조합니다. 내가 코드를 단순화했습니다

var obj = { 
 
     x: null, 
 
     func1: function() { 
 
    console.log('func1, x is ' + this.x); 
 
     }, 
 

 
     func2: function() { 
 
    console.log("func2"); 
 
     this.func1(); 
 

 
    var func1 = this.func1.bind(this); 
 
     func3(func1); 
 
     } 
 
    }; 
 

 
    function func3(callback) { 
 
    console.log("func3"); 
 
    return callback(); 
 
    } 
 

 
obj.func2();

Answer 2

는 here 그것에 대해 더 읽기 :이 두 경우 모두 다르기 때문에

var func1 = this.func1.bind(this); 

Answer 3

해야 할 것입니다. 문제는 참조입니다. 자신의 범위에 있고 obj의 범위 체인의 일부가 아닌 func3을 호출합니다. 따라서 이것은 func3의 범위를 나타냅니다. bindthis에서 obj까지 콜백하면 작동합니다.

var obj = { 
 
    x: null, 
 
    func1: function() { 
 
    console.log('func1, x is ' + this.x); 
 
    }, 
 

 
    func2: function() { 
 
    console.log("func2"); 
 
    this.func1(); 
 

 
    func3(this.func1.bind(this)); 
 
    } 
 
}; 
 

 
function func3(callback) { 
 
    console.log("func3"); 
 
    return callback(); 
 
} 
 

 
obj.func2();

call을 사용하는 다른 용액이 바이올린 인 http://jsfiddle.net/3Lkuz2Lk/3/