apply의 첫번째 인자 this

2021. 12. 1. 18:08

알고리즘 문제를 풀던 중 apply의 this가 무엇을 의미하는지 헷갈려 글을 남긴다.

func.apply(thisArg, [argsArray])

apply에는 첫번쨰 인자로 this, 두번째 인자로 배열이 들어간다.

첫번째 인자로 들어가는 this는 객체를 넘긴다.

정확히 객체를 넘긴다는 말이 무엇인지 예졔를 통해 확인해보자.

예시1)

// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임
var obj = {a: 'Custom'};

// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당
var a = 'Global';

function whatsThis() {
  return this.a;  // 함수 호출 방식에 따라 값이 달라짐
}

whatsThis();          // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다.
whatsThis.call(obj);  // this는 'Custom'. 함수 내에서 obj로 설정한다.
whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.

변수를 선언하고 변수에 프로퍼티로 전역 window를 할당한다는 말은

전역객체인 window에 프로퍼티로 a를 준다는 말로 보인다 (widow.a = 'Global')

*property의 정의:

객체의 일부로 이름과 값 사이를 연결한다 프로퍼티는 객체를 구성하는 블록이다.

일반적인 정의방식) this.a="test"; // 객체명.a = "test"

*변수의 정의:

변수는 실행 컨텍스트 내의 존재하는 이름과 값 사이의 연결을 의미한다.

일반적인 정의방식) var a = "test"; // let a = "test" // const a = "test"

예시2)

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 이어지는 인자들은 함수 호출에서 인수로 전달된다.
add.call(o, 5, 7); // 16

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다.
add.apply(o, [10, 20]); // 34

다음과 같이 this는 객체를 넘긴다고 볼 수 있다.

즉 첫번쨰 인수는 해당 함수 내의 this에 연결되는 값으로 만약 this가 상관없는 함수라면 별다른 의미가 없기 때문에 null이나 undefined값을 주는 것으로 볼 수 있다.

reference:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

mdn apply

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

mdn this

https://daramji-joa.tistory.com/17

apply참조자료

https://m.blog.naver.com/bongy12357/22197775439

변수와 프로퍼티의 차이