Javascript_This

오늘 배운 내용은 자바스크립트를 공부하며 계속계속 봐왔던 This.
계속 '아 이런뜻이겠구나'만 알고 있던 This를 구체적으로 알 수 있었다.

7. this

• 자신을 호출한 객체
• 자신이 생성한 객체'

function sayName(){
  console.log(this.name);
}

출력 // window

• 아무것도 없을 때는 윈도우의 값을 불러줌
• 자기 자신을 호출한 객체의 이름을 부름
• 나자신
• 안에 들어가기 보다는 바깥에 호출할 수있도록 해주시는 형식이 좋다.

let 호텔 = [{
  '이름' : '하나호텔',
  '위치' : '제주도 제주시 001',
  '가격' : {'A':50000, 'B':30000, 'C':15000},
  '방의개수' : 50,
  '예약자수' : 25,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
  
  // 여기서는 this.예약자수가 25다.
},{
  '이름' : '둘호텔',
  '위치' : '제주도 제주시 002',
  '가격' : {'A':100000, 'B':60000, 'C':30000},
  '방의개수' : 100,
  '예약자수' : 30,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
  
  // 여기서는 this.예약자수가 30다.
},{
  '이름' : '셋호텔',
  '위치' : '제주도 제주시 003',
  '가격' : {'A':80000, 'B':50000, 'C':30000},
  '방의개수' : 120,
  '예약자수' : 80,
  '남은방의개수' : function(){return this.방의개수 - this.예약자수}
  
    // 여기서는 this.예약자수가 80다.
}];

7-1 This값을 사용자 임의대로 조작하기

1) call()

• call() 메서드 인수에 this로 사용할 값을 전달 할 수 있습니다.
• 다른 쪽에서 선언한 함수를 다른 함수내에서 재정의 하지 않고 불러올때 사용
• 브루스가 피터이름 빌려서 피터 물건 사용

/ * this */
function sayName(){
  console.log(this.name);
}

var name = 'Hero'; 

  name : 'Peter Parker',
  sayName : sayName
}

let bruce = {
  name : 'Bruce Wayne',
  sayName : sayName
}
peter.sayName.call(bruce)   // 출력: Bruce Wayne
피터에 있는 sayName이라는 함수를 가져온다

• peter.sayName.call(bruce): 나를(sayName).부른(call).객체(bruce)의 이름

apply()

• 인수에 this로 사용할 값을 전달할 수 있으며 배열의 형태로도 전달할 수 있습니다.
• 결국은 피터값을 쓰는 건 똑같음

var peter = {
  name : 'Peter Parker',
  sayName : function(is, is2){    
		console.log(this.name+ ' is '+ is + ' or ' + is2);
	}
}

var bruce = {
  name : 'Bruce Wayne',
}

peter.sayName.apply(bruce, ['batman', 'richman']);

bind()

• bind()는 this가 고정된 새로운 함수를 반환한다.

function sayName(){
  console.log(this.name);
}

var bruce = {
  name: 'bruce',
  sayName : sayName
}

var peter = {
  name : 'peter',
  sayName : sayName.bind(bruce)
}

peter.sayName();   //출력: bruce : 속해 있는건 peter인데 나는 bruce꺼다
bruce.sayName();   //출력: bruce : 이것도 내꺼다

• name값을 지정 안해주면 undefined가 나온다.

---

This의 전체적인 맥락은 나를 호출한 객체의 값이라는 것만 기억하면 될거 같다.
화살표 함수는 this 값이 적용되지 않기 때문에 화살표 함수를 감싸고 있는 객체의 값을 출력한다.
정말 말그대로 이것이라는 뜻으로 기억하면 좋을듯 하다.