Javascript this란 무엇일까??

this란 뭘까??

Javascript에서 this는 쉽게 말하자면 누가 나를 불렀냐 라는 뜻입니다.
즉 선언이 아니라 this의 값은 함수를 호출하는 방법에 의해 결정이 된다는 뜻입니다
실행하는 동안의 할당에 의해 설정될 수 없고, 함수가 호출될 때마다 다를 수 있다.

this의 이해

this의 값은 어떻게 변화할까? this가 어떤 값과 연결되는 지는 this의 바인딩을 통해서 확인해 볼 수 있다.
바인딩이란, this의 호출 방식에 따라서 this가 특정 '객체'에 연결되는 것이다.
this의 바인딩은 일반 함수 내부, 메서드 내부, 생성자 함수 내부, Call, Apply, Bind를 통한 '호출 방식'으로 나눠서 살펴볼 수 있다.

1. 일반 함수 내부에서의 this는 글로벌 객체와 바인딩된다.
2. 메서드 내부에서의 this는 메서드를 호출한 객체와 바인딩된다.
3. 생성자 함수 내부에서 this는 생성자 함수가 생헐할 인스턴스와 바인딩된다.
4. Call, Apply, Bind 메서드 사용 시, 메서드에 첫 번째 인수로 전달하는 객체에 바인딩 된다.

일반 함수 내부에서의 this는 글로벌 객체와 바인딩된다.

console.log(this === window); // true;
a = 30;  
console.log(window.a); // 30

function x() {  
return this;  
}

x() === window; // true

메서드 내부에서의 this는 메서드를 호출한 객체와 바인딩된다.

let ryan = {  
firstName: "Ryan",  
lastName: "Kim",  
driveCar() {  
console.log(`${this.firstName} drives a car.`)  
}  
}

ryan.driveCar(); // 'Ryan drives a car.'

생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스와 바인딩된다.

function person() {  
this.firstName = "Ryan",  
this.lastName = "Kim",  
this.start = function() {  
console.log(`${this.firstName} drives a car.`)};  
};

let person1 = new person();  
console.log(person1); // person { firstName: 'Ryan', lastName: 'Kim', start: ƒ (), **proto**: person { constructor: ƒ person() } }

Call, Apply, Bind 메서드 사용 시, 메서드에 첫 번째 인수로 전달하는 객체에 바인딩 된다.

Call과 Apply 메서드는 기본적으로 함수를 호출하는 역할을 한다. 그렇다면 기존 함수 호출과의 차이점은 무엇일까? 그것은 바로, 해당 메서드를 사용해 함수를 '실행'하면, 함수의 첫 번째 인자로 전달하는 객체에 this를 '바인딩'할 수 있다는 것이다. 이를 통해서 유사 배열 arguments 객체에 배열 메서드를 사용할 수 있다. 반면에, bind는 첫 번째 인자를 this에 바인딩하지만 함수를 실행하지 않으며, 새로운 함수를 반환한다.

call

function logName(a, b, c) {  
console.log(this.name);  
console.log(this.nationality);  
console.log(a + b + c);  
}

const person = {  
name: 'Ryan',  
nationality: 'South Korea'  
}

logName.call(person, 1, 2, 3 );  
// 'Ryan'  
// 'South Korea'  
// 6

Apply

function logName(a, b, c) {
  console.log(this.name);
  console.log(this.nationality);
  console.log(a + b + c);
}

const person = {
  name: 'Ryan',
  nationality: 'South Korea'
}

const nums = [1, 2, 3];

logName.apply(person, nums );
// 'Ryan'
// 'South Korea'
// 6

// 요즘에는 apply를 사용하지 않고, spread operator와 call을 활용한다.
logName.call(person, ...nums);
// 'Ryan'
// 'South Korea'
// 6

bind

unction logName(a, b, c) { // 원본 함수
  console.log(this.name);
  console.log(this.nationality);
  console.log(a + b + c);
}

const person = {
  name: 'Ryan',
  nationality: 'South Korea'
}

const Ryan = logName.bind(person, 1); // 새로운 함수

Ryan(2, 3);
// 'Ryan'
// 'South Korea'
// 6

Call, Apply, Bind 메서드 정리

: Call 메서드는 함수를 실행하고, 첫 번째 인자에 this를 바인딩하며, 이후의 값을 함수의 인자로 전달한다. Apply 메서드는 함수를 실행하고, 첫 번째 인자에 this를 바인딩하며, 이후의 값을 배열의 형태로 받아 차례로 함수의 인자로 전달한다. bind 메서드는 함수를 실행하지 않으며, 첫 번째 인자에 this를 바인딩한 새로운 함수를 반환한다. 각 메서드를 통해 전달할 수 있는 인자의 갯 수에는 제한이 없다.

this 정리

: 이처럼 this는 함수 호출 방식에 따라서 동적으로 결정된다. 예시에서 살펴본 것처럼 함수를 일반 함수로 호출할 경우, this는 글로벌 객체를, 메서드로 호출할 경우 이를 호출한 객체를, 생성자 함수를 호출할 경우, 생성자 함수가 생성할 인스턴스를 가리키게 된다. Call, Apply, Bind 메서드 사용 시, 메서드에 첫 번째 인수로 전달하는 객체에 바인딩 된다.

 

 

 

참고 : https://velog.io/@realryankim/JavaScript-this%EB%9E%80