Prototype, Event Delegation

수업

지난 주 Fetch

변경이 많을 거 같다면 템플릿 파일을 따로 분리하는 것도 방법이다.
생성자가 필요없다면 그냥 객체 리터럴로 만들어도 된다. (객체가 2개 이상 필요한게 아니라면)
자바스크립트는 원래 클래스 없이 사용할 수 있는 언어
ES Module

Event Propagation(전파) / Delegation(위임)

이벤트가 중첩되어도 다 실행이 된다.
부모, 자식 어디가 먼저 실행될까?
Bubbling / Capturing 순서
예를 들어 ul 에 클릭 이벤트를 걸고, 분기처리 하면 된다.
for 문으로 일일이 이벤트를 요소마다 등록해줄 필요가 없다.
currentTarget, tagname 등을 참조하면 된다.
대신 addEventListener 안의 콜백함수에서 분기처리를 다 해줘야 되는게 문제다.
event.stopPropagation()

this

호출될 때 결정된다. 그래서 this는 외울 수 없다. 늘 달라질 수 있다.
디버깅을 하면서 this를 깨달아보기
bind 아주 중요하다. 꼭 공부해보기. call/apply 보다 bind!
this 를 제어할 때 많이 사용한다.
비동기 콜백할 때 많이 사용한다. 보통 this가 window를 가르키므로...

prototype

const a = new Animal("호랑이", 22);
a;
Animal {name: "호랑이", age: 22}
  name: "호랑이"
  age: 22
  __proto__:
  constructor: class Animal
  run: ƒ run()
  setName: ƒ setName(name)
  info: ƒ info()
  __proto__: Object

클래스로 생성한 객체안에 키 밸류 값은 객체에 있는데, 메서드와 생성자는 __proto__ 안에 들어있다.
여러 객체가 같이 쓰는 정보들은 prototype 안에 들어있다. 메모리 효율성을 위해서
a.info() === b.info() // true -> 같은 객체를 바라보고 있다.
함수를 new로 호출하면 함수가 생성자가 되고, 객체를 만들어준다.
프로토타입을 쓰는 이유.
Object 에 있는 prototype -> 최상위 프로토타입.
Object 아래에 Array, String, Math... 하이어라키
그렇기 때문에 자바스크립트의 모든 것은 객체다.
프로토타입을 타고 타고... -> 프로토타입 체인
프로토타입 자체가 상속이다
대신 체인이기 때문에(한 방향), 다중상속을 하려면 부모위에 부모가 있다던가 식으로 해야함

자동완성

u에 대한 응답값, us에 대한 응답값, usb에 대한 응답값. 식으로 자동완성 데이터 만들어두기
delegation, prototype, fetch, keyboard event
키보드 동작에 따라 서버에 데이터를 주고 받는 부분

PreviousES Classes NextPromise

Last updated 4 years ago

Was this helpful?

수업

지난 주 Fetch

변경이 많을 거 같다면 템플릿 파일을 따로 분리하는 것도 방법이다.

생성자가 필요없다면 그냥 객체 리터럴로 만들어도 된다. (객체가 2개 이상 필요한게 아니라면)

자바스크립트는 원래 클래스 없이 사용할 수 있는 언어

ES Module

Event Propagation(전파) / Delegation(위임)

이벤트가 중첩되어도 다 실행이 된다.

부모, 자식 어디가 먼저 실행될까?

Bubbling / Capturing 순서

예를 들어 ul 에 클릭 이벤트를 걸고, 분기처리 하면 된다.

for 문으로 일일이 이벤트를 요소마다 등록해줄 필요가 없다.

currentTarget, tagname 등을 참조하면 된다.

대신 addEventListener 안의 콜백함수에서 분기처리를 다 해줘야 되는게 문제다.

event.stopPropagation()

this

호출될 때 결정된다. 그래서 this는 외울 수 없다. 늘 달라질 수 있다.

디버깅을 하면서 this를 깨달아보기

bind 아주 중요하다. 꼭 공부해보기. call/apply 보다 bind!

this 를 제어할 때 많이 사용한다.

비동기 콜백할 때 많이 사용한다. 보통 this가 window를 가르키므로...

prototype

const a = new Animal("호랑이", 22);
a;
Animal {name: "호랑이", age: 22}
  name: "호랑이"
  age: 22
  __proto__:
  constructor: class Animal
  run: ƒ run()
  setName: ƒ setName(name)
  info: ƒ info()
  __proto__: Object

클래스로 생성한 객체안에 키 밸류 값은 객체에 있는데, 메서드와 생성자는 __proto__ 안에 들어있다.

여러 객체가 같이 쓰는 정보들은 prototype 안에 들어있다. 메모리 효율성을 위해서

a.info() === b.info() // true -> 같은 객체를 바라보고 있다.

함수를 new로 호출하면 함수가 생성자가 되고, 객체를 만들어준다.

프로토타입을 쓰는 이유.

Object 에 있는 prototype -> 최상위 프로토타입.

Object 아래에 Array, String, Math... 하이어라키

그렇기 때문에 자바스크립트의 모든 것은 객체다.

프로토타입을 타고 타고... -> 프로토타입 체인

프로토타입 자체가 상속이다

대신 체인이기 때문에(한 방향), 다중상속을 하려면 부모위에 부모가 있다던가 식으로 해야함

자동완성

u에 대한 응답값, us에 대한 응답값, usb에 대한 응답값. 식으로 자동완성 데이터 만들어두기

delegation, prototype, fetch, keyboard event

키보드 동작에 따라 서버에 데이터를 주고 받는 부분