코어 자바스크립트 정리 - [3] this

대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스를 의미.

하지만 자바스크립트에서의 this는 어디서든 사용 가능하다.

 

01 - 상황에 따라 달라지는 this

자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정됨.

( 함수를 호출할 때 결정됨.)

 

1) 전역공간에서의 this

전역공간에서의 this 는 전역객체를 가르킴.

• 브라우저 환경의 전역객체 : window
• Node.js 환경의 전역객체 : global

자바스크립트의 모든 변수는 실은 특정 객체의 프로퍼티로써 동작

> 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당.

 

2) 메서드로서 호출시 this

함수 vs 메서드

공통점 : 미리 정의한 동작을 수행하는 코드 뭉치

함수 : 그 자체로 독립적인 기능을 수행

메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행

 

※ 함수를 객체의 프로퍼티에 할당한다고 해서 메서드가 되는 것이 아니라, 객체의 메서드로써 호출할 경우에만 메서드로 동작함.

 

메서드 호출 예제 )

var func = function (x ) {
    console.log(this, x);
};
func(1);            // 전역객체 1

var obj = {
    method: func
};

// 메소드로서 호출시 점 표기법.
obj.method(2);      // { method: f } 2

// 메소드로서 호출시 대괄호 표기법.
obj['method'](2);   // { method: f } 2

 

메서드 내부에서의 this

this에는 호출한 주체에 대한 정보가 담김.

어떤 함수를 메서드로서 호출하는 경우 호출 주체는 바로 함수명 앞의 객체.

 

3) 함수로서 호출시 this

어떤 함수를 함수로서 호출하게 되면 this는 전역 객체를 바라본다.

※ 메서드 내부함수에서 정의된 함수도 함수로서 호출하게 되면 this는 전역객체를 바라봄.

 

내부함수 예제 ) 

var obj = {
    outer: function () {
        console.log(this);
        var innerFunc = function () {
            console.log(this);
        }
        innerFunc();
        
        var obj2 = {
            innerMethod: innerFunc
        };
        obj2.innerMethod();
    }
}
obj.outer();

실행 결과

[ Line 15 ] : obj.outer();  // 메소드로서 outer 함수 호출

1. outer 함수 동작
2. [ Line 3 ] : 출력 : obj

[ Line 7 ] : innerFunc(); // 함수로서 innerFunc 함수 호출

1. innerFunc 함수 동작
2. [ Line 5 ] : 출력 : 전역객체

[ Line 11 ] : obj2.innerMethod(); // 메소드로서 innerMethod 함수(innerFunc) 호출

1. innerMethod 함수 동작
2. [ Line 5 ] : 출력 : obj2

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

1) 변수 활용

var obj = {
    outer: function () {
        console.log(this);      // { outer : f}
        var innerFunc = function () {
            console.log(this);  // 전역객체
        }
        innerFunc();
        
        var self = this;
        var innerFunc2 = function () {
            console.log(self);   // { outer : f}
        }
        innerFunc2();
    }
}
obj.outer();

2) 화살표 함수 사용 ( this를 바인딩하지 않는 함수)

화살표 함수는 실행컨텍스트를 생성할 때, this 바인딩 과정 자체가 빠져서 상위 스코프의 this를 활용할 수 있다.

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

 

4) 콜백 함수 호출시 그 내부 함수에서의 this

콜백함수의 제어권을 가지는 함수(메서드)가 콜백 함수에서의 this를 모엇으로 할지 결정.

setTimeout(function () { console.log(this); }, 300);
// 전역객체

[1, 2, 3, 4, 5].forEach(function (x) {
    console.log(this, x);
});
// 전역객체 1, 전역객체 2, ... // 전역객체 5

document.body.innerHTML += '<button id='a'>클릭</button>';
document.body.querySelector('#a').addEventListener('click', function (e) {
    console.log(this, e);
});
// <button>엘리먼트 클릭이벤트

setTimeout, forEach 메서드는 콜백함소를 호출할 때 this를 지정하지 않음. > this가 전역객체를 가르킨다.

addEventListener 메서드는 콜백함수를 호출할 때 자신의 this를 상속한다.

 

5) 생성자 함수 내부에서의 this

생성자 함수 내부에서의 this 는 만들어질 인스턴스를 가르킨다.

 

02 - 명시적으로 this를 바인딩하는 방법

1) call 메서드

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]])

2) apply 메서드

Function.prototype.apply(thisArg[, argsArray])

3) call, apply 메서드 활용

유사배열객체(array-like object)에 배열 메서드 적용

유사배열객체(array-like object) : 키가 0 또는 양의 정수인 프로퍼티가 존재하고, length 프로퍼티의 값이 0 또는 양의 정수인 객체

함수 내부에서 접근할 수 있는 arguments 객체도 유사배열 객체이다.

 

생성자 내부에서 다른 생성자를 호출

function Person(name) {
    this.name = name;
}

function Student(name, school) {
    Person.call(this, name);
    this.school = school;
}

여러 인수를 묶어 하나의 배열로 전달

var numbers = [10, 20, 3, 16, 45];
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);
console.log(max, min);    // 45 3

 

4) bind 메서드

bind 메서드는 call과 비슷하지만 함수를 즉시 호출하지 않고, 넘겨받은 this, 및 인수들을 바탕으로 새로운 함수를 반환하기만 한다.

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

name 프로퍼티

bind 메서드를 적용해서 만들어진 함수는 name 프로퍼티에 bound 라는 접두어가 붙는다.

 

상위 컨텍스트의 this 를 내부함수나 콜백 함수에 전달

var obj = {
    outer: function () {
        console.log(this);      // { outer : f}
        var innerFunc = function () {
            console.log(this);  // 전역객체
        }
        innerFunc();
        
        var innerFunc2 = function () {
            console.log(this);   // { outer : f}
        }.bind(this);
        innerFunc2();
    }
}
obj.outer();

 

5) 화살표 함수의 예외사항

화살표 함수는 실행컨텍스트를 생성할 때, this 바인딩 과정 자체가 빠져서 상위 스코프의 this를 활용할 수 있다.

 

6) 별도의 인자로 this를 받는 경우 (콜백 함수 내에서의 this)

콜백 함수를 인자로 받는 메서드중 일부는 추가로 this 지정할 객체(thisArg)를 인자로 지정할 수 있는 경우가 있음.

var report = {
    sum: 0,
    count: 0,
    add: function() {
        // arguments를 배열로 변환하여 변수 args에 저장.
        var args = Array.prototype.slice.call(arguments);
        args.forEach(function (entry) {
            this.sum += entry;
            this.count++;
        }, this);
    },
    average: function () {
        return this.sum / this.count;
    }
};
report.add(60, 85, 95);
console.log(report.sum, report.count, report.average());
// 240 3 80

콜백함수와 thisArg를 인자로 받는 메서드

• Array : forEach, map, filter, some, every, find, findIndex, flatMap, from
• Set : forEach
• Map : forEach

---

참조 : 코어 자바스크립트 ( 정재남 )