[JavaScript] Day 03_2 (Note + Code): 프로토 타입, 화살표 함수, 이벤트

1.  프로토 타입 prototype
: 메모리 절약을 위한 방법 중 하나
공유해서 사용할 것들을 prototype으로 만들어두면 메모리를 효율적으로 사용 가능하다. 나아가서, 상속관계까지 만들어줄 수 있다.

(메모리를 매번 생성할 때마다 차지하지 않게 해 주려고) JS는 프로토타입 기반 언어라고 함. 잘 알아야 한다.. 프로토타입 자체가 자스라서 이해하기 힘들 수 있다.
자바 같은 경우는 객체 지향에서 빠질 수 없는 부분이 클래스. JS도 객체 지향인데 클래스라는 개념이 없다 대신에 프로토 타입이 존재한다. 클래스가 없으니까 기본적으로 상속 개념도 없다. ES6부터 새로운 게 생기면서 상속이 가능해졌는데 문법 내부에서는 프로토타입으로 돌아간다. 
메모리 절약을 위해서 프로토 타입으로 메서드로 만들어 놓으면 이 생성자 함수로 만들어 놓은 객체들은 모두 프로토 타입을 통해 사용할 수 있다.

 

//교제 발췌

function Point(xops, ypos){
	this.x = xpos;
    this.y = ypos;
  	}
Point.prototype.getDistance = function(){ //Point.prototype에 메서드를 추가한다. 
	return Math.sqrt(this.x * this.x + this.y * this.y
};

Point.prototype이라는 숨겨진 객체가 있으며 여기에 getDistance()를 정의해 두면 Point 객체는 모두 getDistance() 메서드를 공유할 수 있다는 것이다. 

[기존 방법]

[prototype]

function Person(){  //함수 //Person.prototype Object
 this.age = 1;
 this.name = “str”;
}
let pika = new Person(); //2개
let lai = new Person(); //2개
피카.에이지 피카. 네임 해도 ok 라이.에이지 라이.네임해도  ok
피키랑 라이는 둘 다 에이지와 네임을 공통적으로 가지고 있다. 메모리상 4개를 할당. 객체를 백개 만들면 200개 변수가 할당되겠지.. 우리가 person타입을 만들면 어딘가에 Person.prototype이라는 비어있는 객체가 어딘가에 생긴다. 펄슨 함수 생성하면 어딘가 존재하는 오브젝트에 존재하는 Person.prototype을 가져다 쓸 수 있게 하는 것이 프로토타입이다.

각각 만드는 게 아니라 프로토타입에 갔다 놓으면 new로 만든 것들은 다 공유해서 쓰는 거. static과 비슷한 느낌이라고 보면 된다. 공유해서 쓸 수 있는…
*Prototype = Prototype Link + Prototype Object

1) Prototype Object: 객체 생성될 때는 항상 내부 함수를 통해서 생성이 되게 되어있다.
let obj = new Person(); //함수로 객체 생성
obj객체는 Person으로 객체 생성이 됨
let obj = {}; 이거는 new function() 또는 new Object() 한 것과 동일
펑션이 만들어지면 JS에서는 컨스트럭트 자격이 부여가 됨.

 

js19

__proto__는 최고 조상 오브젝트가 가지고 있는 메서드에 전부 접근할 수 있다. 프로토.. 공유해서 쓸 것들..

2) Prototype Link: __proto__ 이렇게 쓰는 거랑 똑같다. 객체가 생성될 때 조상이 되는 Prototype Object 가리킴. obj는 Person 함수로 생성되었으니 Person Prototype Object를 가리키고 Person Prototype Object가 가진 __proto__는 Object 객체를 가리킴 (Object가 객체의 조상)

화살표 함수 Arrow Function
자바 스크립트에서 람다 쓴다고 생각하면 됨..

*매개변수 지정 방법
() => {……} //매개변수 없을 때
(x) => {……} //매개변수 하나일 때. 소괄호 생략 가능. x => {……}
(x, y) => {……} //매개변수 여러 개, 소괄호 필수

*함수 구현부 지정
x => {return x * y}
x => x *y //구현부 명령이 한 줄의 구문이면 중괄호 생략 가능, return키워드 생략 가능.
() => {return {a:10};} // 객체를 리턴해주겠다고 하면..() => a:10 안됨. 중괄호 반드시. () => ({a:10}) 객체 리턴시 중괄호 소괄호로 묶어서 사용
() => {
if()… for()… return x * x;
}

 

event 이벤트

일반적인 제어 흐름과는 좀 다른 접근이 필요함.. 어떤 이벤트가 발생하면 감지해줄 수 있는 게 필요하다.

이벤트: 웹 브라우저 상에서 어떤 상황, 예를 들어 버튼 클릭했을 때, 페이지가 로드됐을 때……
이벤트 핸들러: 이벤트가 발생하면 그에 맞는 반응을 하는 함수 (처리 기술)

 

1.  UI 이벤트 종류
load: 웹 페이지 로드 완료 시
unload: 웹 페이지 로드 안될 때
error: js에서 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize: 브라우저 창 크기 조절했을 때
scroll: 스크롤할 때
select: 텍스트를 선택했을 때

 

2.  keyboard 이벤트
keydown: 키보드의 키를 누를 때
keyup: 눌렀다가 뗄 때
keypress: 눌렀다 뗐을 때

 

3.  Mouse 이벤트
click
dbclick: 더블클릭
mousedown: 마우스를 꾹 누른 시점
mouseup: 눌렀다가 뗄 때
mousemove: 마우스를 움직일 때 (터치스크린 x)
mouseover: 마우스를 요소 위로 움직였을 때 (터치스크린 x)
mouseout: 마우스가 요소 밖으로 움직였을 때 (터치스크린 x)

 

4.  Focus 이벤트
focus / focusin: 요소가 포커스를 얻었을 때. 예) input 태그에 커서가 깜빡거리며 포커스가 있을 때. 속성에 autofocus.. 기억나지.. 포커스 이해
blur / focusout: 요소가 포커스를 잃었을 때

 

5.  Form 이벤트
input: input이나 textarea 등 값 변경 가능한 요소의 값이 변경되었을 때
change: select, checkbox, radio 등의 상태가 변경되었을 때
submit: form을 submit 할 때
reset: reset버튼 눌렀을 때

 

6.  Clipboard 이벤트 (복사하면 저장되는 곳. 클립보드에 잠깐 복사돼서 저장되는 곳)
cut: 콘텐츠를 잘라내기 할 때
copy: 콘텐츠 복사할 때
paste: 콘텐츠 붙여 넣기 할 때

 

이벤트 핸들러 등록
#1. 인라인 이벤트 핸들러 등록 (옛날 방식.. 비추..)
HTML 태그에 on으로 시작하는 속성으로 추가
<button onclick= “ “></button> 이거..
이벤트에 해당하는 개별 속성에 호출될 함수 이름. 함수를 전달만 해주면 된다.

#2. 이벤트 핸들러 프로퍼티 방식
HTML과 JS를 분리하여 작성할 수 있으나, 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다. (바인딩한다: 데이터를 매개변수한테 던지는 걸 바인딩한다. 이벤트 핸들러를 프로퍼티에 대입하는 걸 바인딩한다고 한다.)

#3. addEventListener 메서드 방식