[javascript] ‘var that = this;’는 무엇입니까? JavaScript에서 의미 하는가?
JavaScript 파일에서 나는 보았다 :
function Somefunction(){
var that = this;
...
}이것을 선언 that하고 할당 하는 목적은 무엇입니까 this?
답변
이 답변을 그림으로 시작하겠습니다.
var colours = ['red', 'green', 'blue'];
document.getElementById('element').addEventListener('click', function() {
// this is a reference to the element clicked on
var that = this;
colours.forEach(function() {
// this is undefined
// that is a reference to the element clicked on
});
});내 대답은 원래 jQuery로 이것을 보여주었습니다. 매우 약간 다릅니다.
$('#element').click(function(){
// this is a reference to the element clicked on
var that = this;
$('.elements').each(function(){
// this is a reference to the current element in the loop
// that is still a reference to the element clicked on
});
});this새 함수를 호출하여 범위를 변경하면 자주 변경 되므로 이를 사용하여 원래 값에 액세스 할 수 없습니다. 에 대한 별칭을 지정 that하면의 원래 값에 계속 액세스 할 수 있습니다 this.
개인적으로, 나는 that별칭으로 사용하는 것을 싫어합니다 . 특히 함수가 두 줄보다 긴 경우 참조하는 내용이 분명하지 않습니다. 나는 항상 더 설명적인 별칭을 사용합니다. 위의 예제에서는 아마도을 사용 clickedEl합니다.
답변
에서 크록 포드
관례 적으로 우리는 그
변수를 비공개로 만듭니다 . 개인 메소드가 오브젝트를 사용할 수 있도록하는 데 사용됩니다. 이 원인 인 ECMAScript 언어 사양의 오류에 대한 해결 방법입니다 이것은 내부 기능을 위해 잘못 설정 될 수 있습니다.
function usesThis(name) {
this.myName = name;
function returnMe() {
return this; //scope is lost because of the inner function
}
return {
returnMe : returnMe
}
}
function usesThat(name) {
var that = this;
this.myName = name;
function returnMe() {
return that; //scope is baked in with 'that' to the "class"
}
return {
returnMe : returnMe
}
}
var usesthat = new usesThat('Dave');
var usesthis = new usesThis('John');
alert("UsesThat thinks it's called " + usesthat.returnMe().myName + '\r\n' +
"UsesThis thinks it's called " + usesthis.returnMe().myName);이 경고 …
그것이 Dave라고 생각합니다.
이것은 이것이 undefined라고 생각합니다.
답변
이것은 내부 함수 (다른 함수 내에 정의 된 함수)가 더 작동하도록 해킹하는 것입니다. 자바 스크립트에서 한 함수를 다른 함수 안에 정의 this하면 전역 범위로 자동 설정됩니다. this외부 함수에서와 동일한 값 을 기대 하기 때문에 혼동 될 수 있습니다 .
var car = {};
car.starter = {};
car.start = function(){
var that = this;
// you can access car.starter inside this method with 'this'
this.starter.active = false;
var activateStarter = function(){
// 'this' now points to the global scope
// 'this.starter' is undefined, so we use 'that' instead.
that.starter.active = true;
// you could also use car.starter, but using 'that' gives
// us more consistency and flexibility
};
activateStarter();
};이것은 ( car.start예 와 같이) 객체의 메소드로 함수를 생성 한 다음 해당 메소드 내에 함수 (예 :)를 생성 할 때 특히 문제가됩니다 activateStarter. 최상위 수준 방법 this에서 객체를 가리키는 방법 (이 경우 car)이지만 내부 함수에서 this이제 전역 범위를 가리 킵니다. 이것은 고통이다.
두 범위에서 규칙으로 사용할 변수를 작성하는 것은 자바 스크립트의 일반적인 문제에 대한 해결책입니다 (jquery 함수에서도 유용합니다). 이것이 가장 일반적인 소리 이름 that이 사용되는 이유 입니다. 언어의 단점을 극복하기 위해 쉽게 인식 할 수있는 규칙입니다.
Douglas Crockford의 El Ronnoco 힌트와 마찬가지로 이것이 좋은 생각이라고 생각합니다.
답변
의 사용은 that당신의 사용과 해결 만들면 정말 필요하지 않습니다 call()또는 apply():
var car = {};
car.starter = {};
car.start = function(){
this.starter.active = false;
var activateStarter = function(){
// 'this' now points to our main object
this.starter.active = true;
};
activateStarter.apply(this);
};답변
때때로 this다른 범위를 참조하고 다른 것을 참조 할 수 있습니다. 예를 들어 DOM 이벤트 내에서 생성자 메소드를 호출하려는 경우 (이 경우)this 생성 된 객체가 아닌 DOM 요소를 참조합니다.
HTML
<button id="button">Alert Name</button>JS
var Person = function(name) {
this.name = name;
var that = this;
this.sayHi = function() {
alert(that.name);
};
};
var ahmad = new Person('Ahmad');
var element = document.getElementById('button');
element.addEventListener('click', ahmad.sayHi); // => Ahmadassing 의지 위의 솔루션 this에 that내부의 이름 속성 다음 우리가 할 수있는 접근 sayHi의 방법that 이 그래서는 DOM 호출 내부 문제없이 호출 할 수 있습니다.
또 다른 해결책은 빈 that객체 를 할당하고 속성과 메서드를 추가 한 다음 반환하는 것입니다. 그러나이 솔루션을 사용 prototype하면 생성자 를 잃어 버렸습니다 .
var Person = function(name) {
var that = {};
that.name = name;
that.sayHi = function() {
alert(that.name);
};
return that;
};답변
예제는 다음과 같습니다.
$(document).ready(function() {
var lastItem = null;
$(".our-work-group > p > a").click(function(e) {
e.preventDefault();
var item = $(this).html(); //Here value of "this" is ".our-work-group > p > a"
if (item == lastItem) {
lastItem = null;
$('.our-work-single-page').show();
} else {
lastItem = item;
$('.our-work-single-page').each(function() {
var imgAlt = $(this).find('img').attr('alt'); //Here value of "this" is '.our-work-single-page'.
if (imgAlt != item) {
$(this).hide();
} else {
$(this).show();
}
});
}
});
});`따라서 대상의 DOM 요소에 따라이 값이 서로 다른 두 값이라는 것을 알 수 있습니다. 그러나 위의 코드에 “that”을 추가하면 “this”의 값이 변경됩니다.
`$(document).ready(function() {
var lastItem = null;
$(".our-work-group > p > a").click(function(e) {
e.preventDefault();
var item = $(this).html(); //Here value of "this" is ".our-work-group > p > a"
if (item == lastItem) {
lastItem = null;
var that = this;
$('.our-work-single-page').show();
} else {
lastItem = item;
$('.our-work-single-page').each(function() {
***$(that).css("background-color", "#ffe700");*** //Here value of "that" is ".our-work-group > p > a"....
var imgAlt = $(this).find('img').attr('alt');
if (imgAlt != item) {
$(this).hide();
} else {
$(this).show();
}
});
}
});
});`….. $ (that) .css ( “배경색”, “# ffe700”); // var의 값이 “this”이므로 “that”의 값은 “.our-work-group> p> a”입니다. 따라서 “this”= ‘.our-work-single-page’에 있어도 “that”을 사용하여 이전 DOM 요소를 조작 할 수 있습니다.
답변
