[D+44] call, apply, bind 메소드

D+44

- call, apply, bind 메소드 -

(call, apply, bind)

call 과 apply

call과 apply를 호출할 경우 명시적으로 this를 지정하고 싶을때 사용한다고 간략하게 설명할 수 있으며, 첫번째 인자가 항상 this값이 됩니다.

이 둘의 차이점은 .apply는 배열로 값을 넘겨주고, .call은 그냥 단순히 값을 입력하면 넘겨준다는 차이를 가지고 있다.

function add(x, y) {
	return x + y;
}

add.apply(null, [2, 8]); // 10

add.call(null, 2, 8); // 10

bind

.bind는 .call과 유사하게 this 및 인자를 바인딩 하지만 당장 실행하는 것이 아닌 바인딩 된 함수를 리턴하는 함수이다.

첫 번째 인자는 this, 두번째 인자부터는 필요한 파라미터를 전달한다.

fn.bind(this값, 인자1, 인자2, ...)

case 1: 이벤트 핸들러

bind는 이벤트 핸들러에서 이벤트 객체 대신 다른 값을 전달하고자 할 때 유용하게 사용된다.

<!DOCTYPE html>
<html>
  <body>
    <button id="btn"> 클릭하세요 </button>
  </body>  
</html>

html 파일

let btn = document.querySelector('#btn')
btn.onclick = handleClick

function handleClick() {
  console.log(this) // <button id="btn"> 클릭하세요 </button>
}

js 파일

bind를 사용하지 않았을 경우 (gif가 제대로 실행되지 않는다면 gif를 클릭해 확인해 주세요)

bind를 사용하지 않고 바로 사용하게 되면 이벤트객체가 바로 나오겠지만

bind를 사용해 주게 되면 다른 값이 나오는 것을 확인 할 수 있다.

let btn = document.querySelector('#btn')

btn.onclick = handleClick.bind({ hello: 'world'})

function handleClick() {
  console.log(this) // {hello: 'world'}
}

js 파일

bind를 사용해 다른 값을 전달했을 경우 (gif가 제대로 실행되지 않는다면 gif를 클릭해 확인해 주세요)

case 2: setTimeout

setTimeout은 시간 지연을 일으킨 후 함수를 비동기적으로 실행하게 하는 함수로

명시적으로 항상 window 객체를 this 바인딩하는 특징을 가지고 있다.

아래의 코드처럼 사용할 경우 마찬가지로 setTimeout으로 인한 함수로

후에 오류가 발생하는 것을 확인할 수 있다.

class Rectangle {
  constructor(width, height) {
    this.width = width
    this.height = height
  }
  
  getArea() {
    return this.width * this.height
  }

  printArea() {
    console.log('사각형의 넓이는 ' + this.getArea() + ' 입니다')
  }
  
  printSync() {
    // 즉시 사각형의 넓이를 콘솔에 표시합니다
    this.printArea()
  }
  
  printAsync() {
    // 1초 후 사각형의 넓이를 콘솔에 표시합니다
    setTimeout(this.printArea, 2000)
  }
}

let box = new Rectangle(40, 20)
box.printSync() // '사각형의 넓이는 800 입니다'
box.printAsync() // 에러 발생!

오류없이 문제를 해결하기 원한다면 셋타임 안에 있는 this.printArea를

this.printArea.bind(this)로 수정해 준다면 문제가 해결될 것이다.

저작자표시

'시도 > Code-States' 카테고리의 다른 글

[D+46] 스택과 큐 (0)	2020.10.22
[D+45] ESlint 설치하기 (0)	2020.10.21
[D+44] 화살표 함수, 구조분해 할당, this (0)	2020.10.20
[D+43] node.js와 관련 도구 (0)	2020.10.19
[D+42] Pre Course를 마치며... (0)	2020.10.18

IT Information Notebook

[D+44] call, apply, bind 메소드

D+44

- call, apply, bind 메소드 -

(call, apply, bind)

call 과 apply

bind

case 1: 이벤트 핸들러

case 2: setTimeout

'시도 > Code-States' 카테고리의 다른 글

댓글

티스토리툴바

[D+44] call, apply, bind 메소드

D+44

- call, apply, bind 메소드 -

(call, apply, bind)

call 과 apply

bind

case 1: 이벤트 핸들러

case 2: setTimeout

'시도 > Code-States' 카테고리의 다른 글

관련글

댓글

티스토리툴바