날짜별 글 목록: 2015년 6월 20일

this, call(), apply()

객체에 메소드를 부여하는 방법중 하나는 다음 코드처럼 함수 값을 객체에 첨가하는것이다

var rabbit = {}; // rabbit객체 생성

//speak메소드 부여
rabbit.speak = function(line) {
 console.log("토끼가말합니다: '", line, "'"); 
}

rabbit.speak("저는 살아 있어요."); 
// 토끼가말합니다 : ' 저는 살아 있어요. '

 

this

그런데 토끼 여러마리여서 서로 다른 말을 해야할때 객체안에 메소드인(rabbit.speak();)  speak() 안에 this는 해당 객체를 가르킨다.

function speak(line) { 
 console.log(this.adjective, "토끼가 말합니다:'",line,"'"); 
}

var whiteRabbit = {adjective: "흰색", speak: speak};
var fatRabbit = {adjective: "살찐", speak: speak};

whiteRabbit.speak("하얀토끼가 좋으세요?");
// 흰색 토끼가 말합니다:' 하얀토끼가 좋으세요? '
fatRabbit.speak("당근먹고싶다");
//살찐 토끼가 말합니다:' 당근먹고싶다 '

call(), apply()

이번엔 반대로 callapply을 이용해 함수에서 객체를 불러보자.

speak.call(fatRabbit,"꺼억~");
//살찐 토끼가 말합니다:' 꺼억~ '

speak.apply(fatRabbit,["냠냠"]); // 배열타입으로 인자를 넘김
//살찐 토끼가 말합니다:' 냠냠 '

주의할 점은 apply배열 ([]) 타입으로 인자를 넘겨야한다는 것이다. 기능은 같다.

function run(from, to) {
 console.log(this.adjective + "토끼가"
             , from + "에서" , to + "로 달려갑니다.");
}

var ary =["찬장","냉장고","집","학교"];

run.apply(fatRabbit, ary);
//살찐 토끼가 찬장에서 냉장고로 달려갑니다.

run.call(whiteRabbit, ary[2],ary[3]);
//흰색 토끼가 집에서 학교로 달려갑니다.