[JavaScript] this의 4가지 동작 방식

this

this의 값은 this가 사용된 함수가 어떤 방식으로 "실행"되었는지에 따라 달리진다.

선언된 부분만으로는 무엇을 가리키는 지 알 수 없다.

 

 

 

 

 

 

 

 

 

1. 일반 함수 실행 방식

strict mode가 아니면 무조건 global object를 가리킨다. (브라우저에서는 window)

 

var age = 1; // global object
function foo() {
  console.log(this.age);
  //this === global object : 브라우저에서는 window를 가리킨다.
}

foo(); // 1 (글로벌 객체 실행)

new foo(); // undefined

 

 

• strict mode (엄격모드)
  • strict mode란? : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode)
  • 엄격한 모드에서 일반 함수 실행 방식을 쓰면 undefined가 되어 error가 출력된다

"use strict";

var name = "hello";

function foo() {
  console.log(this.name); // 'this' === undefined // error
}
foo();

 

 

 

 

 

 

 

 

2. 암시적 바인딩

함수 호출이 객체의 property로 호출되면 this는 해당 객체에 바인딩된다

암시적 바인딩을 콜백으로 넘겨주면 바인딩이 끊긴다.

var age = 100;

var name = {
  age: 20,
  foo: foo,
};

function foo() {
  console.log(this.age);
}

var fn = name.foo;

name.foo(); // 20
fn(); // undefined

 

 

• arrow function(화살표 함수)와 암시적 바인딩
• arrow function의 this는 렉시컬 this를 따르기 때문에 상위 this 값을 바인딩한다

const foo = {
  bar: 100,
  baz: () => console.log(this.bar), // 렉시컬 this는 global this, global this가 없으므로 undefined
};

foo.baz();

const foo2 = {
  bar: 100,
  baz: function () {
    console.log(this.bar);
  }, // 100
};

foo2.baz();

 

 

 

 

 

 

 

 

 

 

3. call / apply / bind

call()

• call 함수의 인자값으로 변수를 넣어줌으로서 this를 변수로 할당한다
• 아무 인자도 넣지 않으면 일반 함수 실행과 동일하며 global scope로 this가 바인딩된다
• call 함수의 인자 값으로 첫 번째는 this 에 할당하는 값, 두 번째 부터는 호출하는 함수에 대한 인자 목록을 무제한으로 넣을 수 있다

function foo(a, b, c) {
  console.log(this.age);
  console.log(a, b, c);
}
const Age = { age: 123 };
foo.call(Age, 1, 2, 3);

 

 

 

apply()

• call 함수와 실행하는 방법은 동일하다
• 다른 점은 apply는 인자 배열 하나르 받는다는 것이다

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

Person.apply(foo, ['name']);
console.log(foo); // { name: 'name' }

 

 

 

 

 

bind()

• this 키워드를 주얻진 변수로 설정하고 앞쪽의 매개변수도 자신의 인자를 사용해 미리 순서대로 채워놓은 새로운 함수를 반환한다
• call 함수와 마찬가지로 첫번째 인자로 this에 들어갈 변수를 넣고 두번째 인자로 arguments에 들어갈 인자 목록을 넣는다

var age = 100;

function foo() {
  console.log(this.age);
}

var name = {
  age: 25,
  log: foo,
};

// 새로운 함수를 반환
var bar = foo.bind(name);
var baz = foo;

bar(); // 25
baz(); // 100
foo.call(name); // 25

 

 

 

 

 

 

 

 

 

 

 

4. 생성자 함수 new

• new 함수를 실행하면 해당 함수의 값은 빈 객체가 된다
• new와 같이 쓰는 this는 return문이 없어도 자동으로 return으로 할당된다 (강제로 retur 시켜도 return 문은 작동되지 않음)
• 객체를 return하면 함수는 객체 return 값을 채택한다
• 생성자 함수에서 this는 객체 속성 할당을 위해 사용된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

---

참조 : https://kyounghwan01.github.io/blog/JS/JSbasic/this/