Javascript *는 함수 (프로토 타입 함수)가 아닙니다.

Question

C++ 배경에서 나오므로 명확한 타이핑이없는 OO 언어로 작업하려고하면 두통이됩니다.

웹 페이지의 동적 요소는 객체별로 관리되므로 각 요소를 관리해야하기 때문에 객체별로 제어됩니다. 이 요소는 객체 자체의 내부에있는 데이터의 시각적 출력 일뿐입니다. 필요한 모든 것입니다.

을 제외하고 내가 클릭 할 때 내부 기능을 수행 할 객체가 필요합니다. 지금까지 내 두통의 가장 큰 원천 인 것 같습니다.

자바 스크립트 :

function onClick(file) //The external onClick function I use to try to get it to call from. 
{ 
    file.state = INUSE; 
    file.checkState(); 
} 

function fileObject() { //The file object itself 
    this.element; 
    this.newElement();   
    //initialize stuff for the object 
} 

fileObject.prototype.newElement = function() { //creates a new element and sets its event listener 
    this.element.click(function() {onClick(this)}); 
} 

fileObject.prototype.checkState = function() {/*does stuff*/} //apparently this is "not a function" 

내가 정확히 얻을 오류는 파이어 폭스의 콘솔 패널에서 "file.checkState는 함수가 아닙니다."

저는 아직 자바 스크립트에 익숙하지 않지만 일부 디버깅을 한 후에는 모든 오류를 일으키는 기능이 명시 적으로 onClick(this)임을 알게되었습니다. 다른 항목과 함께 사용하면 onClick 함수는 완벽하게 작동하지만 this 키워드는 실제로는 onClick 범위 내부에 undefined이라는 모든 검사가 file 인 것으로 표시되므로 fileObject에 대한 참조를 실제로 보내지 않는 것으로 보입니다.

내가 수행하려고하는 방식에 근본적으로 잘못된 것이 있습니까? 아니면이 스 니펫이 작동하는 데 도움이되는 단계가 없습니다.

Answer 1

그래서 당신이 알고를, 귀하의 초기 문제는 실제로 행동을 다루는 것이 아니라 듣는 것입니다. click은 하나의 liste가 아닌 synthetic click 이벤트를 트리거합니다.

... .element.addEventListener("click", callback); 당신은 2 번째 문제가 직면했다고 말했 으면합니다. 당신이 문제를 혼동하지 작성한으로 나는 ...

을 내 예제 코드를 떠날 것입니다하지만 당신은 click()을 볼 때 element 정말 브라우저 DOM 요소를 의미 않는 경우, 내가 addEventListener에 가입 의미 것을 알고있다. 표준 브라우저 요소가 아니며 API 자체가 아니라면 이전 부분을 무시하고 계속 수행하십시오.

this은 정의 시간이 아닌 함수의 호출 시간에 동적으로 바인드됩니다.

위에서 범위가 가장 가까운 함수는 .click(...)에 전달하는 콜백 함수입니다.

this과 완전히 다른 것은 외부의 콜백입니다. 점의 왼쪽에있는 것은 해당 특정 호출이 지속되는 동안 this 컨텍스트입니다.

말할 필요도없이 click()은 콜백의 왼쪽에 this을 바인딩하는 데 충분하지 않습니다.

해결책 (또는 많은 옵션 중 하나)은 어휘 스코핑 및/또는 클로저를 사용하여 의미하는 객체의 값을 유지하는 것입니다.

// easy but messier 
var fileObject = this; 
... .click(function() { onClick(fileObject); }); 


// Cleaner with thunks: 
function clickHandler (onClick, obj) { 
    return function() { onClick(obj); }; 
} 

... .click(clickHandler(this)); 

의

Answer 2

자바 스크립트가 약간 미친 것처럼 보일 this를 처리하는 방식 C++에서 오는

, 당신이 무엇 this 당신이 정의한 기능을 알려줄 필요가 여기 것 같습니다 - 그래서 같은 :

this.element.click(function() {onClick(this)}.bind(this));