11. this 우회방법, 콜백 함수 this, 생성자 함수 this

1. 우회하는 방법

 - 1. 변수를 활용하는 방법

     내부 스코프에 이미 존재하는 this를 별도의 변수에 할당하는 방법.

예시코드

var obj1 = {
    outer: function () {
        console.log(this); //(1) outer

        //AS-IS (기존)
        var innerFunc1 = function() {
            console.log(this); // (2) 전역객체
        };
        innerFunc1();

        //TO-BE (이후)
        //흐름을 유지하는 this를 찍는것같은
        //효과가 있다.
        var self = this;
        var innerFunc2 = function () {
            console.log(self); // (3) outer
        };
        innerFunc2();
    }
};

//메서드 호출 부분
obj1.outer();

 

 

- 2. 화살표 함수(=this를 바인딩하지 않는 함수)

     - es6에서는 함수 내부에서 this가 전역객체를 바로보는 문제 때문에 도입됬다.

     - 일반 함수와 화살표 함수의 가장 큰 차이점

          => this binding 여부

예시 코드

//화살표 함수 사용
var obj = {
    outer: function () {
        console.log(this); // (1) obj

        //화살표 함수이기 때문에 this바인딩 과정 자체가 없어서
        //this는 outer를 바라본다.
        var innerFunc = () => {
            console.log(this); // (2) obj
        };
        innerFunc();
    }
};

obj.outer();

 

 

 

2.콜백 함수 호출 시 그 함수 내부에서의 this

 - 콜백 함수도 함수이기 때문에 this는 전역객체를 참조하지만, 콜백 함수를 넘겨받은 함수에서

   콜백 함수에 별도로 this를 지정한 경우는 예외적으로 그대상을 참조하게 되어있다.

 

예시 코드

// 콜백 함수
// 별도 지정 없음 : 전역 객체
setTimeout(function () { console.log(this) }, 300);

//별도 지정 없음 : 전역 객체
[1, 2, 3, 4, 5].forEach(function(x) {
    console.log(this, x);
});

//addListener 안에서의 this는 항상 호출한 주체의 element를 return하도록 설계되었음
//따라서 this는 button을 의미함.
document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a').addEventListener('click', function(e) {
    console.log(this, e);
});

// 콜백함수는 무조건 전역객체를 바로보게 되있다.
// 단, 예외는 있다.
// 콜백 함수에 별도로 this를 지정한 경우(우리가 하는것이 아니다)
//addEL를 사용한 경우이다.

 

 

 

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

 - a. 생성자 : 구체적인 인스턴스(어려우면 객체로 이해)를 만들기 위한 일종의 틀

 - b. 공동 속성들이 이미 준비돼 있다.

 

예시 코드

//생성자 함수

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