소년코딩의 자바스크립트 강좌 30. apply, call, 유사 배열 객체

자바스크립트 함수 호출이 발생할 때 각각의 상황에 따라 this가 바인딩 되는 객체가 다르다. 이러한 내부적인 패턴별 this 바인딩 이외에도 this를 특정 객체에 명시적으로 바인딩 시키는 방법이 있다.

이를 가능하게 하는 것이 바로 함수 객체의 기본 프로퍼티인 apply()와 call() 메서드다.

이 메서드들은 모든 함수의 부모 객체인 Function.prototype 객체의 메서드이므로 모든 함수에서 사용이 가능하다.

---

1. apply() 메서드

function.apply(thisArg, argArray)

apply() 메서드를 호출하는 주체가 함수이고, apply() 메서드도 this를 특정 객체에 바인딩 할 뿐 결국 본질적인 기능한 함수 호출이라는 것을 기억해야 한다.

Blog.apply() => 기본적인 기능은 Blog() 함수를 호출하는 것이다.

• thisArg인자: 메서드를 호출한 함수 내부에서 사용한 this에 바인딩할 객체
• artArray인자: 함수를 호출할 떄 넘길 인자들의 배열

// 생성자 함수
function Blog(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job
};
 
// blog 빈 객체 생성
var blog = {};
 
// apply() 메서드 호출
Blog.apply(blog, ['Oppa', 24, 'Programmer']);
 
console.dir(blog);

---

2. call() 메서드

apply() 메서드와 기능은 같지만, apply() 메서드의 두 번재 인자에서 배열 형태로 넘긴 것을 각각 하나의 인자로 넘긴다.

Blog.call(hong, 'Oppa', 24, 'Programmer');

---

3. 유사 배열 객체

apply()나 call() 메서드는 this를 원하는 값으로 명시적으로 바인딩해서 특정 함수나 메서드를 호출할 수 있다.

이들의 대표적인 용도가 바로 arguments 객체와 같은 유사 배열 객체에서 배열 메서드를 사용하는 경우다.

function myFunction() {
     console.log(arguments);
 
     // arguments.shift();    -> 에러 발생
 
     // arguments 객체를 배열로 변환
 
     var args = Array.prototype.slice.apply(arguments);
 
     console.dir(args);
 
}
 
myFunction(1, 2, 3);        [1, 2, 3]

(두 객체의 프로토타입 객체(__proto__)가 다르다.)

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.