JS중급_this2

▶️ constructor안에서 사용하는 this

 	function mechanic(){
    	this.name = "Kim"; //새로 생성되는 오브젝트의 이름 key값에 "Kim"이라는 value를 부여
    };

	var newbie = mew mechanic();

• 자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우 오브젝트를 복사하는게 아니라 constructor를 만들어 사용한다.
• 함수를 선언한 뒤 변수에 new키워드를 이용해 새로운 오브젝트를 생성할 수 있다.
• 여기서의 this는 constructor로 부터 새로 생성될 오브젝트를 의미한다.

---

▶️ eventlistener와 콜백함수 case1

      document.getElementById('btn').addEventListener('click',function(e){
      var array = [1, 2, 3];
      array.forEach(function(){
          console.log(this)
      });  
  }); 

위 경우에는, eventlistener의 내부는 맞지만 그 안에서 forEach라는 기본함수를 썼기 때문에 의미가 변한다. 즉 그냥 일반함수와 똑같기 때문에 window가 출력된다.

---

▶️ eventlistener와 콜백함수 case2

	var obj = {
    	names = ['김','이','박'];
		func : function(){
        	obj.names.forEach(function(){
            	console.log(this)
            });
        }
    }

이 경우에도 콜백함수인 forEach는 일반함수이므로 window가 출력된다. 위 케이스와 별반 다르지 않다.

---

▶️ arrow function

	var obj = {
    	names = ['김','이','박'];
		func : function(){
        	obj.names.forEach(()=>{
            	console.log(this)
            });
        }
    }
    
    obj.func();

arrow function은 기존 함수와 동일하게 함수를 만들지만, 함수 내부의 this값을 새로 바꿔주지 않기때문에 this를 사용할 때 유용하다. 이 경우엔 this를 출력시 오브젝트 덩어리가 출력된다.

---

더 많은 this 공부를 위한 모던 자바스크립트 튜토리얼:

https://ko.javascript.info/object-methods