[JS] this 간단 정리

이채현

💡 Javascript this

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작한다.

엄격모드와 비엄격 모드에서도 일부 차이가 있다.

• this는 scope와 관계가 있다.
• 객체에도 영향을 준다.
• this가 어디에 묶여있냐를 아는 것이 코드를 작성하는 시점, 동작하는 시점에 차이가 있을 수 있다.

(함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 bind메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수 를 추가했습니다.)

암시적 바인딩

암시적인 this 바인딩.. 사용자가 생각하지 않은대로 동작할 수 있다.

전역 공간에서의 this

• node.js 환경에서의 this는 global
• 브라우저에서의 this는 window

함수

• 함수에서의 this는 window ⇒ 전역공간에서의 this와 다르지 않다.

객체 (메서드)

• this는 호출되는 대상의 객체를 가리키고 있다.

const obj = {
	name: 'obj',
	method: function() {
		return this.name
	}
}

obj.method() // 'obj'

명시적 바인딩

• call(), bind(), apply()

const person = {
    name: 'Lee',
    sayName: function () {
        return this.name + '입니다';
    }
}

const zero = {
    name: '베이스',
    sayName: function () {
        return this.name + '입니다';
    }
}

• call()

function sayFullName(firstName) {
    return firstName + this.sayName()
}
const result = sayFullName.call(person, 'Chaehyeon ');
// Chaehyeon Lee입니다.

• apply()

function sayFullName(firstName) {
    return arguments[1] + this.sayName()
}

const result = sayFullName.apply(person, ['Chaehyeon ','채현 ']);
// 채현 Lee입니다.

• bind()

  • this를 묶어서 사용가능한다.

  • React Class Component에서 사용했다.

    function sayFullName(firstName) {
        return firstName + this.sayName()
    }
    
    const sayFullNamePerson = sayFullName.bind(person);
    const sayFullNameZero = sayFullName.bind(zero);
    console.log(sayFullNamePerson('Chaehyeon'));
    
    // ChaehyeonLee입니다