call, bind

call

call을 사용하면 독립된 함수를 특정 객체의 메소드로 호출할 수 있다.

 

var player1 = {level: 57, mora: 1000000}
var player2 = {level: 10, mora: 70000}
player2.__proto__ = player1

function showUserInfo() {
    console.log(this.level + '/' + this.mora)
}

showUserInfo.call(player1)
showUserInfo.call(player2)

 

실행결과

call 메소드의 인자로 객체를 지정하게 되면 해당 함수의 this는 인자로 받은 객체가 된다.

showUserInfo() 함수가 player1, player2 객체의 내부에 존재하지 않지만 call 메소드로 내부 메소드처럼 사용할 수 있게 된다.

 

call 메소드는 인자를 여러개 받을 수도 있다. 첫번째 인자는 this로 지정할 객체가 오고, 그 뒤로는 함수의 인자로 들어갈 값이 된다.

var player1 = {level: 57, mora: 1000000}
var player2 = {level: 10, mora: 70000}
player2.__proto__ = player1

function showUserInfo(sep) {
    console.log(this.level + sep + this.mora)
}

showUserInfo.call(player1, '=>')
showUserInfo.call(player2, '/')

 

실행결과

 

 

 

bind

bind 함수를 사용해서 this가 고정된 새로운 함수를 만들 수 있다.

새로운 함수를 만들어서 반환하기 때문에 따로 변수에 저장해두어야 한다.

var player1 = {level: 57, mora: 1000000}
var player2 = {level: 10, mora: 70000}
player2.__proto__ = player1

function showUserInfo(sep) {
    console.log(this.level + sep +this.mora)
}

var player1UserInfo = showUserInfo.bind(player1, '=>');
player1UserInfo()

 

실행결과

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs124

자바스크립트의 시작