오늘은 새 스터디원들이 들어오고 난 첫 날~!
같이 열심히 할 사람들이 늘어나서 너무 좋다.
오늘은 HTML 미션 2 마무리 했다.
해결하기 힘들었던 부분이 background로 아이콘 넣기, 별점 사진 자르기 두 개 였는데
마지막까지 해결하지 못한 건 나중에 다시 보니 클래스 이름을 잘못 써서 적용이 안 됐던 거였다😂...
그래도 해결했으니 뿌듯하다!
과제를 하느라 모각코 시간을 다 써버려서 강의는 조금밖에 듣지 못했다😅
오늘 공부한 내용
JavaScript 기본
프로토타입
1. 프로토타입이란?
2. constructor
3. __proto__
4. 프로토타입 체인
5. 프로토타입 확장
1. 프로토타입이란?
- 자바스크립트는 프로토타입을 기반으로 동작한다.
- 모든 자바스크립트는 프로토타입을 가지고 있다.
2. constructor
- constructor : 생성자.
- 내가 만드는 모든 값들이 prototype을 내부적으로 갖고 있고, 이 prototype을 통해 어떠한 생성자로 생성되었는지 유추할 수 있다.
object instanceof constructorprototype은 누구나 접근 가능하기 때문에 constructor에 바로 접근하는 것보다 instanceof를 활용하는 것이 좋다.
3. __proto__
- __proto__ (던더 프로토)
- 브라우저에서 비표준으로 제공했음.
- 던더 프로토를 사용하면 prototype에 접근 가능
- getter, setter(접근 제어자)와 비슷하다.
- 던더 프로토는 사용하지 않는 것이 좋다.
- 던더 프로토 대신 Object.getPrototypeOf / Object.setPrototypeOf 사용을 권장한다.
4. 프로토타입 체인
- 프로토타입은 체이닝이 가능하다.
- ex) array.hasOwnProperty(0) => true
- hasOwnProperty는 Object의 메서드이다.
- array < Array < Object
- 배열도 객체가 가지고 있는 메서드를 동일하게 사용할 수 있다.
- 간단한 객체를 만들고 여러가지 메서드를 사용할 수 있는 것도 체이닝이다.
5. 프로토타입 확장
- 프로토타입 확장 (extends, 상속)
- 프로토타입, 클래스 확장 가능(클래스 확장을 권장)
- 상위 클래스 : super class
- 하위 클래스 : sub class
- Friends 안 Animal.call(this, name, sound); 에서 this는 Friends 를 명시적으로 바인딩 -> animal을 호출하면서 animal 생성자 함수의 this를 Friends 로 명시적 바인딩 하고 그 다음 원래 사용하던 인자들을 넘긴다.
- 프로토 타입 확장도 시켜야 한다.
- 프로토 타입 확장은 너무 복잡하고 까다롭지만 클래스 확장을 사용하면 간단하게 할 수 있기 때문에 클래스 확장 사용을 권장한다.
// 프로토타입 확장
function Animal(name, sound){
this.name = name;
this.sound = sound;
}
Animal.prototype.getInfo = function(){
return(
this.name +
'가(이)' +
this.sound +
'소리를 낸다.'
);
};
function Friends(name, sound){
Animal.call(this, name, sound);
}
Friends.prototype = Object.create(
Animal.prototype,
);
Friends.prototype.constructor = Friends;
const dog = new Friends('개', '멍멍');
dog instanceof Friends; //true
dog instanceof Animal; //true
오늘 내 코딩 메이트의 부트캠프가 시작됐다.
그 부트캠프 사람들 공부 시간을 보니 다시 자극이 된다.
열심히 하자 🥺
Comment