Javascript에서 익명 함수로 함수를 호출 할 때 "this"키워드를 사용하는 방법은 무엇입니까?

원래 익명의 함수였던 함수를 호출하려고합니다. 그러나이 함수는 내 코드에서 3 번 필요합니다.Javascript에서 익명 함수로 함수를 호출 할 때 "this"키워드를 사용하는 방법은 무엇입니까?

function saveButton() { 
 
    this.parentElement.parentElement.querySelector('h3').innerHTML = this.parentElement.querySelector('input[name="task-title"]').value; 
 
    this.parentElement.parentElement.querySelector('p').innerHTML = this.parentElement.querySelector('textarea').value; 
 
    this.parentElement.parentElement.querySelector('.popup').className = 'popup hidden'; 
 
    this.parentElement.parentElement.querySelector('.overlay').className = 'overlay hidden'; 
 
    saveWork(); 
 
};

내가 같이 익명 함수에서이 함수를 호출 할 :

confirmButton.onclick = function() 
 
    saveButton(); 
 
};

그러나 이후 그래서 나는이 같은 함수를 정의 나는 내가 사용할 수 없다는 것을 깨달았다. this은 익명으로 처리됩니다. 익명 기능으로 confirmButton()으로 전화하려면 어떻게해야합니까?

출처

2017-12-12 Neil Richter

을 오염하지 않습니다를 onclick을 사용하지 말고 콜백 내부에서 작동하는 요소를 노출하는 addEventListener를 사용하십시오. – charlietfl

[이 "키워드는 어떻게 작동합니까?] (https://stackoverflow.com/questions/3127429/how-does-the -this-keyword-work) – Michael

confirmButton.onclick = saveButton;

또는

confirmButton.onclick = function(){ 
    saveButton.call(this); 
};

는 DOM 노드에 대한 동일한 이름과 전화 할 기능을 가지고 좋은 방법이 아닙니다 비록

. 몇 가지를 당신이 게시 코드 조각을보고하고, 추측으로 buttonClick

출처

2017-12-12 23:49:03 fila90

두 사람 모두 '이'가 정의되지 않았다고합니다. 두 번째 발췌 문장에서 confirmButton()을 썼습니다. call (this);'나는 이것이 당신이 의미했던 것 같아요. 그리고 네, 제 기능을 바꾸는 것에 대해 생각할 것입니다. (나는 다른 곳에서도 똑같은 것을 가지고있다.) –

당신은 당신의 기능을 뭔가 다른 것으로 바꿨습니까 ?? 지금 바로 confirmButton DOM 노드가 confirmButton 함수에 의해 덮어 쓰이거나 그 반대로 – fila90

내 함수의 이름이 –

같은 더 의미가 무엇인가에 함수 이름을 변경, 나는 다음과 같은 리팩토링 제안 : 어쩌면

function saveButton(parentElem) { 
    var myParent = parentElem || this.parentElement; 
    myParent.parentElement.querySelector('h3').innerHTML = myParent.querySelector('input[name="task-title"]').value; 
    myParent.parentElement.querySelector('p').innerHTML = myParent.querySelector('textarea').value; 
    myParent.parentElement.querySelector('.popup').className = 'popup hidden'; 
    myParent.parentElement.querySelector('.overlay').className = 'overlay hidden'; 
    saveWork(); 
} 

confirmButton.onclick = function() { 
    // I suppose when this function is called somewhere else, 
    // you actually know who is the parent element, so: 
    saveButton(document.querySelector('.theParentElement')); 
}; 

// If you calling it somewhere where "this" is available, 
// then simply call the function with no arguments: 
saveButton();

의 약간의 변화를 위의 예가 도움이 될 수 있습니다. 그 외에는 코드의 상당 부분을 보지 않고 더 나은 대답을 생각할 수 없습니다.

출처

2017-12-13 00:36:14 Rodrigo

글쎄, 실제로 하지 않습니다. 나는 평범한 자바 스크립트로 HTML 엘리먼트를 생성하고 있는데, 어디서나 부모 엘리먼트에 querySelector를 사용할 수 없다. 정말 새로 만든 개체의 부모를 선택해야하며 이것은 일반 Javascript로 찾은 유일한 방법입니다. 내 코드의 다른 곳에서 상위 요소를 제거하려고합니다.보기 흉하지만, 'parentElement.parentElement.removeChild (this.parentElement)'를 수행해야합니다. ... 좀 더 복잡합니다. 그러나 내가 보여준 몇 안되는 것들을 생각해 볼 수는 없습니다. –

함수 표현식을 사용해 보셨습니까? 기본적으로 변수에 함수를 지정하는 것을 의미합니다. this 답을 읽고 함수 표현과 함수 선언의 차이점에 대해 알아보십시오.

당신은 주어진 익명 함수의 부모 범위를 사용하려면 :

는 질문에 관해서는, 대부분의 시간은이 경우입니다.

경우 먹으 렴,이 깔끔한 약간의 트릭 추천 할 것입니다 경우

이

var self = this; 

this.saveButton = function() { // or self.saveButton... 
    this.parentElement.parentElement.querySelector('h3').innerHTML = this.parentElement.querySelector('input[name="task-title"]').value; 
    this.parentElement.parentElement.querySelector('p').innerHTML = this.parentElement.querySelector('textarea').value; 
    this.parentElement.parentElement.querySelector('.popup').className = 'popup hidden'; 
    this.parentElement.parentElement.querySelector('.overlay').className = 'overlay hidden'; 
    saveWork(); 
}; 

confirmButton.onclick = function() { 
    self.saveButton(); 
}

이 트릭은 범위 깊이의 모든 수준에서 사용할 수 있습니다

, 단지 전역 네임 스페이스 :

출처

2017-12-13 00:54:36 TehAbstraCt

Javascript에서 익명 함수로 함수를 호출 할 때 "this"키워드를 사용하는 방법은 무엇입니까?

답변

관련 문제