객체 내에 있는 메소드는 별도의 변수로 분리할 수 있다. 이 변수를 통해 메소드를 호출할 때, 당신은 아마도 여기서의 this가 메소드가 정의되어있는 객체라고 생각할 것이다.
사실 객체 밖에 있는 메소드를 호출할 경우, 함수 실행을 한 결과와 같다. 함수 실행을 할 경우 this는 전역 객체인 window를 가리킨다. (엄격 모드에서는 undefined) .bind() 바인딩 함수를 사용해서 문맥을 수정할 경우, 메소드를 객체에 포함시킬 수 있다.
아래는 Animal 생성자로 myCat이라는 인스턴스를 생성하는 예제다. 그리고 setTimeout() 함수로 1초 뒤 myCat 객체의 정보를 출력한다.
--------------------------------------------------
function Animal(type, legs) {
this.type = type;
this.legs = legs;
this.logInfo = function() {
console.log(this === myCat); // => false
console.log('The ' + this.type + ' has ' + this.legs + ' legs');
}
}
var myCat = new Animal('Cat', 4);
// "The undefined has undefined legs" 출력
// 혹은 엄격모드라면 TypeError 출력
setTimeout(myCat.logInfo, 1000);
--------------------------------------------------
아마도 setTimeout으로 myCat.logInfo()를 호출할 때, myCat 객체가 출력될 거라고 예상할 것이다. 하지만 setTimeout의 매개변수로 전달되었기 때문에 메소드는 객체로부터 분리 되어있고, 1초 뒤 함수 실행이 된다. logInfo가 함수로써 실행되기 때문에 여기서의 this는 전역 객체이거나 엄격 모드에서라면 undefined다. 그렇기 때문에 객체의 정보를 기대한 것대로 출력하지 못한다.
밑줄친거 10번읽어도 뭔소린지 모르겠다
한방에 설명해줄테니까 잘 들어봐라
setTimeout(myCat.logInfo, 1000);에서 myCat.logInfo에 담긴 함수가 넘어가는 거기 때문에 결과적으로 setTimeout(function() { console.log(this === myCat); // => false console.log('The ' + this.type + ' has ' + this.legs + ' legs'); }, 1000); 이 되버린다. 그리고 태스크에서 빠져나와서 실행될 때, myCat.logInfo 에 담긴 함수로써 호출되는게 아니라 객체가 this에 바인딩이 안된다 .
ㅇㅎ ㄱㅅㄱㅅ이해함 고마워용다들
그렇기에 setTimeout( () => myCat.logInfo(), 1000); 처럼 클로져를 생성해줘서 넣어주면 출력 가능하다
여기서 저렇게 함수의 참조가 넘어가는 걸 설명해주자면, 자바스크립트는 원시값의 경우 복사, 객체의 경우 참조를 넘겨서 그렇다.
답변해주려고 보니까 설명 개잘해놓으셧네 저도 배우고갑니다