하루5분코딩"bind"

## bind : .call과 유사하게 this 및 인자를 바인딩 하나 당장 실행하지 않고 바인딩된 함수를 리턴

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

bind 의 유용한 사용 예시

case1: 이벤트 핸들러

<div id = "target"></div>

let target = document.querySelector('#target')
let users = ['김코딩' , '박해커' , '최초보']
-------------------------------------
users.forEach(function(user){
let btn = document.createElement('button')
btn.textContent = user
btn.onclick = handleClick
});
-------------------------------------
function handleClick(){
  console.log(this)
}

🚫위와 같이 코드를 작성하면, 동적으로 생성되는 각각의 버튼을 클릭하면 button 엘리먼트 자체가 콘솔에 표시될 것입니다. 이 때 bind를 이용해 출력하고 싶은 값을 this로 넘기거나, 혹은 인자로 보낼 수 있습니다.

solution 1

let target = document.querySelector('#target')
let users = ['김코딩', '박해커', '최초보']
--------------------------------------
users.forEach(function(user) {
  let btn = document.createElement('button')
  btn.textContent = user
  btn.onclick = handleClick.bind(user) // 이렇게 바꿔볼 수 있습니다.
  target.appendChild(btn)
});
--------------------------------------
function handleClick() {
  console.log(this)
}

solution 2

let target = document.querySelector('#target')
let users = ['김코딩', '박해커', '최초보']
----------------------------------------
users.forEach(function(user) {
  let btn = document.createElement('button')
  btn.textContent = user
  btn.onclick = handleClick.bind(null, user) // 굳이 this를 이용하지 않더라도 인자로 넘길 수도 있습니다.
  target.appendChild(btn)
});
----------------------------------------
function handleClick(user) {
  console.log(user)
}

case2: setTimeout (이 함수는 명시적으로 항상 window객체를 this 바인딩하는 특징이 있다.)

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() // 에러 발생!

solution 1

prinAsync(){
  setTimeout(this.printArea.bind(this),2000)
}

solution 2

printAsync(){
  setTimeout(() => {
    this.printArea()
  },2000)
}