Javascript: call, apply, bind

Minjae Kwon·2020년 10월 28일
0

 🍉   Learning Journal

목록 보기
16/36
post-thumbnail

🙋🏻‍♀️ call, apply, bind 의 차이점은?

먼저 공통점은 셋 다 this 로 넘겨주고 싶은 변수를 첫 인자로 받는다.
call 과 apply 의 차이점은, call 은 두 번째 인자부터 인자를 나열해서 받고, apply 는 두 번째 인자를 배열 형태로 받는다.
[call, apply] 와 [bind] 의 차이점은, 함수가 호출된 시점에 call, apply 는 함수 실행을 하고, bind 는 실행을 하지 않는다. bind 는 this 가 바인드 된 함수 자체를 리턴한다고 이해해 둔다.

// 유사배열 i.e. nodeList
const rainbow = { 0: 'red', 1: 'orange', 2: 'yellow', 3: 'green', 4: 'blue' }

// 배열에 강제 접목하여 배열처럼 다룬다
Array.prototype.slice.call(rainbow, 0, 1) // 'red' 
Array.prototype.slice.call(rainbow, [0, 1]) // 'red' 

// setTimeout 등에 유용한 bind
let current = { sec: 10 }

function tictoc(){ 
	this.sec++; 
	console.log(this.sec); 
}

// call, bind 의 문법차이 확인
setTimeout(() => { tictoc.call(current), 1000 }) 
setTimeout(tictoc.bind(current), 1000)
profile
Front-end Developer. 자바스크립트 파헤치기에 주력하고 있습니다 🌴

0개의 댓글