이 this가 저 this가?

JavaScript
1

this 바인딩의 3가지 규칙만 알면 더 이상 이 this 가 저 this인지 헷갈리지 않아도 될 것 같습니다. 역시 인사이드 자바스크립트 책이 좋네요~

여기는 정말 핵심이라고 생각하는 내용만 정리해서 적어봐요~
틀린 내용 있으면 수정 부탁드려요!!

좀 더 설명이 있는 full 정리본은

1. 객체의 메서드 호출할 때 this 바인딩

객체의 프로퍼티가 함수일 경우, 이 함수를 메서드라고 부른다. 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩 된다.

var myObject = {
    name: 'foo',
    sayName: function () {
        console.log(this.name);
    }
}

var otherObject = {
    name: 'bar'
}

otherObject.sayName = myObject.sayName;

myObject.sayName(); // foo
otherObject.sayName(); // bar

2. 함수를 호출할 때 this 바인딩

함수를 호출할 경우는, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩된다. 브라우저에서 자바스크립트를 실행하는 경우 전역 객체는 window 객체다.

var test = 'This is test';
console.log(window.test); // 'This is test'

var sayFoo = function() {
    console.log(this.test); // 'This is test'
}

sayFoo();

이러한 함수 호출에서의 this 바인딩 특성은 내부 함수(inner function)를 호출했을 경우에도 동일하게 적용되므로 유의해서 사용해야 한다.

// 전역 변수
var value = 100;

var myObject = {
    value : 1,
    func1 : function() {
        this.value += 1;
        console.log('func1() called. this.value : ' + this.value); // 2

        // func1의 내부 함수 func2
        func2 = function() {
            this.value += 1;
            console.log('func2() called. this.value : ' + this.value); // 101

            // func2의 내부 함수 func3
            func3 = function() {
                this.value += 1;
                console.log('func3() called. this.value : ' + this.value); // 102
            }

            func3();
        }

        func2();
    }
};

myObject.func1();

3. 생성자 함수를 호출할 때 this 바인딩

생성자 함수에서의 this는 생성자 함수를 통해 새로 생성되어 반환되는 객체에 바인딩된다. (이는 생성자 함수에서 명시적으로 다른 객체를 반환하지 않는 일반적인 경우에 적용됨)

// Person 생성자 함수
var Person = function(name) {
    this.name = name;
}

// foo 객체 생성
var foo = new Person('foo');
console.log(foo.name); // foo
3개의 좋아요