정적바인딩, 동적바인딩

JavaScript의 this 키워드는 함수 호출 방식에 따라 동적으로 바인딩되거나, 특별한 경우에 정적으로 바인딩될 수 있습니다. 이를 이해하기 위해 먼저 동적 바인딩과 정적 바인딩이 무엇인지 살펴보겠습니다.

동적 바인딩 (Dynamic Binding)

동적 바인딩은 함수 호출 시점에 this가 결정되는 것을 의미합니다. 이는 JavaScript의 일반적인 함수 호출 방식에서 주로 발생합니다. this는 호출 컨텍스트에 따라 다르게 바인딩될 수 있습니다.

주요 동적 바인딩 예시

1. 전역 컨텍스트에서 호출된 함수:

 

 

 

function foo() {
    console.log(this);
}
foo(); // window (브라우저 환경에서) 또는 global (Node.js 환경에서)

 

2. 객체의 메서드로 호출된 함수:

const obj = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};
obj.greet(); // "Alice"

 

3. 함수에서 call, apply, bind 메서드를 사용한 경우:

function greet() {
    console.log(this.name);
}
const user = { name: 'Bob' };
greet.call(user);  // "Bob"
greet.apply(user); // "Bob"

const boundGreet = greet.bind(user);
boundGreet(); // "Bob"

 

 

4. 생성자함수

 

function Person(name) {
    this.name = name;
}
const person = new Person('Charlie');
console.log(person.name); // "Charlie"

 

 

 

정적 바인딩 (Static Binding)

정적 바인딩은 this가 함수 정의 시점에 결정되는 것을 의미합니다. JavaScript에서는 주로 화살표 함수(arrow function)에서 발생합니다. 화살표 함수는 자신만의 this 바인딩을 가지지 않고, 정의될 때의 상위 스코프의 this를 그대로 사용합니다.

화살표 함수의 정적 바인딩 예시

1. 상위 스코프의 this를 사용하는 화살표 함수:

const obj = {
    name: 'Dave',
    greet: function() {
        const inner = () => {
            console.log(this.name);
        };
        inner();
    }
};
obj.greet(); // "Dave"

 

 

 

2. 전역 컨텍스트에서 화살표 함수:

 

 

const arrowFunc = () => {
    console.log(this);
};
arrowFunc(); // window (브라우저 환경에서) 또는 global (Node.js 환경에서)

 

 

차이점 요약

• 동적 바인딩: 함수 호출 방식에 따라 this가 달라짐. 일반적인 함수 및 메서드에서 주로 발생.
• 정적 바인딩: this가 함수 정의 시점에 결정됨. 주로 화살표 함수에서 발생.

예제 코드

동적 바인딩 예제:'

 

function dynamicThis() {
    console.log(this);
}

const obj = {
    name: 'Eve',
    dynamicThis: dynamicThis
};

dynamicThis(); // 전역 객체 (window 또는 global)
obj.dynamicThis(); // obj 객체

 

 

정적 바인딩 예제:

const staticThis = () => {
    console.log(this);
};

const anotherObj = {
    name: 'Frank',
    staticThis: staticThis
};

staticThis(); // 전역 객체 (window 또는 global)
anotherObj.staticThis(); // 여전히 전역 객체

 

 

이렇게 this의 동적 바인딩과 정적 바인딩은 함수가 어떻게 호출되었는지에 따라 달라지며, 특히 화살표 함수는 정의 시점의 상위 스코프의 this를 사용함으로써 정적 바인딩의 특성을 가집니다.