Modern JavaScript-2

class & instance

• 객체 지향 프로그래밍
  하나의 모델이 되는 붕어빵틀(class)을 만들고, 그 틀을 바탕으로 붕어빵(instances)을 만드는 프로그래밍 패턴.

class Fishbread { // class 명은 대문자로 시작.
	constructor(contains, status) {
		this.contains = contains; // this는 instance 객체를 의미.
      	this.status = status;
    }
  
  
  buy(){ // method in ES6
    console.log(`${this.contains} 붕어빵을 구매합니다`)
  }
  eat(){ 
     console.log(`${this.contains} 붕어빵을 먹습니다`)
  }
  nego(){
     console.log(`아주머니에게 붕어빵 한개를 달라고 네고를 시전합니다`)
  }
}

Fishbread.prototype.eat = function(){
console.log(this.status + '먹습니다')
} // prototype 객체: property와 method를 정의할 수 있음. ES5 문법

// instance는 class의 고유한 속성과 메소드를 갖게됨.
let redBeanBread = new Fishbread('redBean','burnt');
redBeanBread.contains; // 'redBean'
redBeanBread.buy() // 'redBean 붕어빵을 구매합니다'

let custardBread = new Fishbread('custard','raw');
custardBread.status; // 'raw'
custardBread.eat() // 'custard 붕어빵을 먹습니다'
// 

prototype(original form) + constuctor (생성자)= class (설계도)

Array

이때까지 만들어왔던 배열의 형태가 상기 객체 instance를 만드는 것과 매우 비슷함.
다시 말해, Array의 instance를 만들어내는 것과 동일함. MDN에 method를 살펴보면,
prototype이 붙어있는 이유가 여기에 있었음. ex) Array.prototype.push()
Array가 대문자로 시작되는 것으로 보아 class 명칭 방식과 동일.

let redBeanBread = new Fishbread('redBean','burnt');
redBeanBread.contains; // 'redBean'
redBeanBread.buy() // 'redBean 붕어빵을 구매합니다'

let arr = new Array('code','states','pre');
arr.length; // 3
arr.push('course'); 

call, apply method

method를 이용해 함수 실행하는 method

첫번째 인자는 this로 전달받음.
call -> 두번째 인자부터는 개별로 parameter로 전달.
apply -> 두번째 인자부터는 배열로 묶어서 전달

foo()
foo.call()
foo.apply()

bind method

함수 호출하지는 않고 this를 할당.

첫번째 인자는 this로 전달받음.

return 값은 항상 function.

react

'?' -> 다항연산자 알아보기