Class와 Instance
모델이 되는 청사진: class
청사진을 바탕으로한 객체: instance
class와 instance를 쓰는 이유는 유사한 객체를 여러개 만들고 싶을 때 사용한다.
즉, 재사용할 수 있는 객체 생성코드를 구현하는 것이다.
class는 어떠한 데이터가 들어올 수 있다고 정의되어진 큰 틀 이다.
자판기를 예로 들 수 있다.
instance는 class라는 큰 틀에 맞춰서 들어갈 객체이다.
자판기에서 밀크 커피를 누르면 커피, 물, 우유 등이 자판기에 설정된 규칙에 따라 조합되어 나오는 것과 비슷하다.
보통 함수는 동사로 만들지만
class는 함수로 표현하되 명사 그리고 대문자 사용
function Car() {
constructor(name, brand, color) { // 생성자
// 인스턴스가 만들어질 때 실행된다
// class당 딱 하나만 가질 수 있다
this.name = name;
this.brand = bran;
this.color = color;
}
}ES6에서 function 대신 class키워드가 생겼다
class Car {
constructor(name, brand, color, speed) {
// fileds (속성)
this.name = name; // 생성자 안에선 생상자로 만든 객체를 가르킨다
this.brand = brand; // 즉, instance
this.color = color; // this는 함수 실행시 호출 방법에 따라 결정된다
this.speed = speed; // 함수자체보다 함수가 어떻게 실행되는지가 중요
}
// method (행동)
Forward () {
console.log(`${this.name}이 전진합니다`)
}
Backward () {
console.log(`${this.name}이 후진합니다`)
}
}
let myDreamCar = new Car('F-type', 'JAGUAR', 'black', '322km/h')
myDreamCar.name // 'F-type'
myDreamCar.Forward() // 'F-type이 전진합니다'new라는 키워드를 사용해 myDreamCar라는 새로운 객체를 만들어 냈다.
여기서 instance가 myDreamCar가 되는데 이렇게 새로운 객체를 만들어 내는 이유는
단순히 새로운 객체를 만드는 것이 아니라
instance가 상속되어있는 class의 내부 로직이나 데이터, 메소드를 가져와 사용할 수 있기 때문이다.
call, apply, bind
공통점: 첫 번째 인자가 무조건 this
차이점: call, apply는 this로 참조한 데이터를 바로 호출한다.
하지만 bind는 this로 참조한 데이터를 할당만 할 뿐이고 함수만 리턴한다.
call
func.call(무조건 this 참조, 인자1, 인자2, ...)
함수는 같지만 참조하는 this를 바꿔주고 싶을 때 사용하면 유용하겠다는 생각이 들었다.
apply
func.apply(무조건 this 참조, [배열로 써야 돼])
rest/spread 문법이 나오면서 점차 쓰지 않게 되는 추세라고 한다.
bind
func.bind(무조건 this 참조, 인자1, 인자2, ...)
function foo(a, b) {
return this + (a ? a : '') + (b ? b : '')
} // 삼항연산자 (?) if 대신 사용할 수 있으며 참이면 ':' 왼쪽이 거짓이면 오른쪽이 반환된다
const context = 'bind'
const boundFoo = foo.bind(context, ' is', ' useful')
console.log(typeof boundFoo) // 'function'
console.log(boundFoo) // 'bind is useful'bind는 onclick이나 setTimeout을 쓸 때 매우 유용하게 쓰였다.
bind는 함수 자체를 불러오기 때문에
btn.onclick = handleClick.bind(this)이런식으로 사용하기에 아주 좋다.
onclick은 함수 자체를 가져와야지 실행된 함수를 가져오면 클릭하기도 전에 실행이 된다.
하지만 bind를 통해 onclick에 할당할 함수에 인자도 전달해줄 수 있다.
setTimeout(함수, 지연시간)이므로 bind를 사용해서 함수에 바로 넣어줄 수 있다.
setTimeout(func.bind(this), 1000)그러뭍기
객체 축약형
let obj = {
name
}
let obj = {
name: name
}
두 객체는 완전히 같다.
this 화살표 함수
this는 화살표 함수에서 아무런 영향을 미치지 않는다
모듈 설치
$ npm install 모듈이름 --save -dev // devDependencies에 설치 (개발도구)
$ npm install 모듈이름 --save // dependencies에 설치 (실행도구)