[this 에러] Uncaught TypeError: Cannot read property 'menu' of undefined at insertCoffeeMenu (index.js:13) at HTMLButtonElement.<anonymous>

이 함수를 사용한 곳으로 가보았습니다.

 

이때의 this를 호출해 보았습니다.

정상적으로 this가 호출이 되네요. call메서드를 사용해서 this를 넘겨줍시다.

정상적으로 기능이 작동 하면서 this도 잘 출력이 됩니다.

 

Call 메서드

메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령

이때 call메서드의 첫 번째 인자를 this로 바인딩하고 이후의 인자들을 매개변수로 사용합니다.

const obj = {
	a:1,
    method: function(x,y){
    	console.log(this.a, x, y)
    }
}
obj.method(2,3) // 1, 2, 3
obj.method.call({ a:4 }, 5, 6) // 4, 5, 6

apply 메서드

call 메서드와 동일 하지만 첫 번째 인자를 제외한 나머지 모든 인자들을 배열로 받습니다.

const func = function(a,b,c){
	console.log(this, a, b, c)
}
func.apply({x:1}, [4,5,6])  // {x: 1} 4, 5, 6

const obj = {
	a: 1,
    method: function(x,y) {
    	console.log(this.a, x, y)
    }
}
obj.method.apply({a: 4}, [5,6]) // 4, 5, 6

bind 메서드

call과 비슷하지만 즉시 호출하지않고 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드

새로운 함수를 호출할 때 기존의 bind 메서드로 전달했던 인수들의 뒤에 이어서 전달합니다.

const func = function(a,b,c,d){
	console.log(this,a,b,c,d)
}
func (1,2,3,4)   // Window{} 1, 2, 3, 4

const bindFunc = func.bind({x:1})
bindFunc(5,6,7,8)    // {x:1}, 5, 6, 7, 8

내 프로젝트에서는

이렇게 사용할 수 있다.

arrowfunction

arrow function만으로도 해결할 수 있다.

그냥 function과 arrow function의 차이점

arrow function 내부에서 this는 전역 객체가 아닌 부모 객체인 obj를 가리키기 때문입니다.

 

단 사용해서는 안되는 경우도 있습니다.

var obj = {
    names: ["seo"],
    text: "님 안녕하세요",
    print: () => { console.log(this.text) } // undefined
}
obj.print()

객체의 메소드를 화살표 함수로 선언할 경우 this는 전역 객체를 가리키므로 주의해야 합니다.

이 외에도 화살표 함수는 prototype 속성이 없으며 new 연산자로 생성 될 수 없다는 특징이 있습니다.

var Name = () => {}
console.log(Name.prototype)// undefined
var name = new Name()      // TypeError: Name is not a constructor