이 객체를 자체 메서드에 바인딩해야하는 이유는 무엇입니까?

Question

나는 실행하는 경우 :

var dog = { 
    sound: "woof", 
    talk: function(){ 
     console.log(this.sound) 
    } 
} 
document.addEventListener("click",dog.talk) 

정의되지 않은 기록이다; 개를 그 기능에 묶는 경우에만 - document.addEventListener("click",dog.talk.bind(dog)) - 작동합니까.

개를 메소드에 바인딩해야하는 이유는 무엇입니까?

매개 변수로 이벤트 데이터를 전달할 때만 함수가 dog에서 호출되지 않습니다 (일반 함수처럼)?

Answer 1

다음은 this에 대한 읽기를 제안합니다. http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

분명히 this은 개체가 키워드 this을 사용하는 함수를 호출 할 때 정의됩니다. 그리고이 시점에서 this은 함수를 호출 한 객체로 정의됩니다. 따라서 귀하의 경우에 this은 문서 객체에 바인딩되었을 것입니다. 함수에서 this은 정의되지 않은 document.sound를 참조합니다.

다른 말로하면, 개 개체 내에서 this.sound이 로컬 사운드 변수를 참조해야하는 것처럼 보일지라도 함수가 호출 된 시점에는 아닙니다.

Answer 2

console.log(this.sound)의 this은 document 요소를 나타내며, dog 개체는 아닙니다.

var dog = { 
 
    sound: "woof", 
 
    talk: function(){ 
 
    \t console.log(this) 
 
     console.log(this.sound) 
 
    } 
 
}; 
 

 
document.addEventListener("click",dog.talk)

스냅 샷 : 당신이 dog 객체의 내부 this를 사용하려면

. 당신은 이벤트를 편집 할 수 있습니다 :이 호출 객체가 아니라 개 객체를 참조 할 수 있도록

var dog = { 
 
    sound: "woof", 
 
    talk: function(){ 
 
     console.log(this) 
 
     \t console.log(this.sound) 
 
    } 
 
}; 
 

 
document.onclick = function() { 
 
\t dog.talk(); 
 
};