[JavaScript] 스터디 3일차_ this (1)

 

this

 = 함수를  호출 할 때 결정되는(실행 컨텍스트가 생성될 때) 것 = 호출한 놈!! 

"나" 라는 단어를 부르는 사람에 따라 의미가 달라지듯이, this 는 아래의 "나"와 같은 역할을 한다. 

 

 

1. 전역공간에서의 this

 ⭐ 전역공간에서의 this === window 

 

전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다.
자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작.
실행 컨텍스트는 변수를 수집해서 LexicalEnvironment(LE) 에 저장하고, 어떤 변수를 호출하면 LE를 조회해서 일치하는 프로퍼티가 있을 경우 반환함. 전역컨텍스트의 경우 LE는 전역객체를 그대로 참조. 

var a = 1;
console.log(a); // 1 출력
console.log(window.a); // 1 출력
console.log(this.a); // 1 출력

 

전역객체의 프로퍼티로 할당한 경우에는 삭제가 된다.

전역변수로 선언한 경우에는 삭제가 되지 않는다. 

var a = 1;
delete window.a; // false
console.log(a, window.a, this.a); // 1 1 1 


var b = 2;
delete b; // false
console.log(b, window.b, this.b);  // 2 2 2 


window.c = 3;
delete window.c; //true
console.log(c, window.c, this.c); //Uncaught ReferenceError: c is not defined


window.d = 4;
delete d; //true
console.log(d, window.d, this.d); //Uncaught ReferenceError: d is not defined

 

 

2. 메서드로 호출할때의 this 

어떤 함수를 메서드로 호출하는 경우  ⭐ 호출 주체는 함수명(프로퍼티명) 앞의 객체이다.

점 표기법일때 마지막 점 앞에 명시된 객체가 곧 this가 된다.

 

innerFunc은 함수 자체로 호출했으므로 this가 지정되지 않는다. 그럴 경우 this는 전역객체를 바라본다.

obj1. outer()의 경우 outer()앞에 . 점이 있으므로, 메서드로 호출했다. 즉 this는 obj1이 된다.

 

 - 메서드 내부 함수에서 this를 우회하는 방법

 변수를 활용하여 내부함수에 this를 우회적으로 상속한다. 상위 스코프의 this를 저장해서 내부 함수에서 활용하려는 수단.

var obj = {
	outer: function(){
    	console.log(this); // {outer: f} 출력
        var innerFunc1 = function(){
        	console.log(this); // window 출력
        };
        innerFunc();
        
        var self = this; 
        var innerFunc2 = function(){
        // 원래 window 출력이나, outer의 내부 함수인 innerfucn2에 this를 상위 객체로 지정
        // { outer: f } 출력(obj)
        	console.log(self); 
     
        };
        innerFunc2();
    }

};
obj.outer();

 

- ES6에서 this를 바인딩하지 않는 화살표 함수(애로우 펑션)

 ⭐  애로우펑션 ⭐ 은 실행컨텍스트를 생성할 때, this 바인딩 과정이 빠지게 되어, 상위 스코프의 this를 그대로 활용할 수 있다.
 (ES5에서는 화살표 함수 사용 X)

var obj = {
	outer: fucntion () {
    	console.log(this); // {outer: f} 출력
        var innerFunc = () => {
        	console.log(this); // {outer: f} 출력
        };
        innerFunc();
    };
    
};
obj.outer();

 

 

3. 콜백함수 호출할때의 this 

 

콜백함수는 함수 A의 제어권을 다른 함수( 혹은 메서드) B에게 넘겨주는 경우 함수 A를 콜백 함수라고 한다.
이때 함수 A는 함수 B의 내부 로직에 따라 실행되며, this는 역시 함수 B 내부로직에서 정한 규칙에 따라 값이 결정된다. 

콜백함수도 함수이기 때문에 기본적으로 this가 전역객체를 참조하지만, 제어권을 받은 함수에서 콜백함수에 별도로 this가 될 대상을 지정하면 그 대상을 참조한다.

setTimeOut 함수와 , forEach 메서드는 콜백함수를 호출할 때 대상이 될 this를 지정하지 않음
addEventListener 메서드는 콜백함수(function(e))를 호출할 때, this를 상속  

(<button id="a">클릭</button>) 이 라는 이벤트가 출력된다. 

setTimeout(function () {console.log(this)}, 300);  // window 출력 

[1,2,3,4,5].forEach(fucntion(x) {
	console.log(this,x); //window, 배열요소 * 5번
});


document.body.innerHTML += "<button id="a">클릭</button>";
document.body.querySelector("#a").addEventListener("click", function(e) {
	console.log(this,e);
});

//<button id="a">클릭</button> 출력

 

 

4. 생성자 함수 내부에서의 this 

 

◼ 클래스: 공통 속성들을 모아 집합을 정의한 것

◼ 생성자: 구체적인 인스턴스(객체)를 만들기 위한 일종의 틀

JS에서는 new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로 동작한다.
생성자 함수로 호출된 경우의 내부 this는 곧 새로 만들 구체적인 인스턴스 자신임

 

var Cat = function(name, age) {
	this.bark = "야옹";
    this.name = name;
    this.age = age;
};

var choco = new Cat("초코", 7); //this = choco 인스턴스
var nabi = new Cat("나비", 5); // this = nabi 인스턴스

console.log(choco, nabi);

//출력
Cat { bark: "야옹", name: "초코", age: 7}
Cat { bark: "야옹", name: "나비", age: 5}