[코드스테이츠 TIL] This & 함수메소드 call, apply, bind

[ this ]

Execution context : 어떤 함수가 호출되면 실행 컨텍스트(Execution context)가 만들어진다

- 콜스택에 push

- 함수를 벗어나면 콜스택에서 pop

- scope 별로 생성된다

- 실행 컨텍스트에 담긴 것: 스코프 내 변수 및 함수, 전달인자, 호출된근원(caller), this

 

this : 모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자

- Execution context 의 구성 요소 중 하나로 함수가 실행되는 동안 이용할 수 있다

- this는 콜타임, 즉 불러올 때/실행될 때 결정된다

 

 

 

[ this의 5가지 패턴 ]

1. Global : window

var name = 'Global Variable';
console.log(this.name);  // 'Global Variable'

2. Function 호출 : window

var name = 'Global Variable';
function foo() {
  console.log(this.name);  // 'Global Variable'
}

foo();

3. Method 호출 : 직계 부모 object

var counter = {
  val: 0,
  increment: function() {
    this.val += 1;
  }
};

counter.increment();
console.log(counter.val);  // 1

counter.['increment']();
console.log(counter.val);  // 2

4. construction mode (new 연산자로 생성된 함수 영역의 this) : 새로 생성된 객체

function Car(brand, name, color) {
	this.brand = brand;
	this.name = name;
	this.color = color;
}

 

5. call 또는 apply 호출 : 첫 번째 인자로 명시된 객체

function identify() {
  return this.name.toUpperCase();
}

function speak() {
  var greeting = "Hello, I'm " + identify.call(this);
  console.log(greeting);
}

var me = { name: 'Kyle' };
var you = {name: 'Reader' };

identify.call(me);  // KYLE
identify.call(you);  // READER
speak.call(me);  // Hello, I'm KYLE
speak.call(you);  // Hello, I'm READER

var add = function (x,y) {
  this.val = x + y;
};
var obj = {
  val: 0
};

add.apply(obj, [2, 8]);
console.log(obj.val);  // 10

add.call(obj, 2, 8);
console.log(obj.val);  // 10

* 함수.apply : 인자를 배열로 받음

* 함수.call : 인자를 각각 받음 (쉼표로 구분자)

=> 첫 번째 인자가 this 이다. (this === obj)

 

var add = function (x,y) {
  this.val = x + y;
  console.log(this.val);
};

let obj = { val: 0 };

let boundFn = add.bind(obj, 2, 8);  // boundFn은 함수를 리턴한다
boundFn() // 10 , add 함수는 여기서 실행된다

bind는 call,apply와는 다르게 함수를 바로 실행시키지 않고 this값이 바잉딘된 함수를 리턴한다.

 

 

<함수를 실행하는 다양한 방법>

- function (method) 호출

- new 키워드를 이용한 호출

- 함수 메소드 call, apply, bind 이용

 

 

[ Apply, Call, Bind Case ]

1. apply :  배열에서 Math.min 활용하기

let arr = [7,35,2,8,21];

let minimum = Math.min.apply(null, arr); //여기서는 this 값이 의미가 없으므로 null로 넘겨도 된다
console.log(minimum); // 2

2-1. call : 인스턴스와 메소드의 순서 바꾸기 (apply도 적용가능)

function moreThanFive(el) {
  return el.length > 5;
}

let arr = ['code', 'states'];
arr.filter(moreThanFive);  // ['states']
// 인스턴스 arr이 먼저 등장하고 메소드 filter가 뒤에 등장

Array.prototype.filter.call(arr, moreThanFive);  // ['states']
// 메소드 filter가 먼저 등장하고 인스턴스 arr이 뒤에 등장

2-2. call : 유사 배열에 배열 메소드를 적용하기

3-1. bind : 특정 함수가 this 값을 바꾸는 경우

3-2. bind : currying