Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원/7월

22.07.01 - [ JS ] 생성자함수, 클로저, 프로토타입, BOM, DOM, 이벤트모델

giggs 2022. 7. 14. 13:31

 

 

-- Index --

 

 

1. 생성자함수 2. 클로저 3. 프로토 타입 4. BOM 5. DOM 6. 이벤트 모델
new 함수명() 객체 내부에서
외부변수 참조시
내부 변수의
스코프 변화		 원본을
바탕으로 복사		 Browser
Object Model		 Document
Object Model		 고전 이벤트 모델
인라인 모델
표준 모델

 

 

 

 

 

 

 

생성자 함수 - new 키워드를 사용해 객체를 생성할 수 있는 함수

 

  • 생성자 함수는 대문자로 만들기~
  • 형태가 java의 클래스처럼 생겼다.
  • ( java에서도 생성자 호출되면 객체 생성되듯이 )

 

 

 

 

생성자 함수의 핵심 KeyWord는 ' new '

  • new 키워드를 써주어야 생성자 함수로 컴퓨터가 인식
  • this의 바운딩 작업을 해준다.( this={ } 빈 객체 생성 & return this; )
  • 이 this. 으로 세팅해주었던 속성들만이 객체의 속성으로 포함되어서 출력된다.
  • #생성자 함수 내부에  this. 말고 일반 변수로 선언한 변수는 출력되지 않는다.

 

 

 

 

생성자 함수의 정확한 작동 방식

  • new라는 키워드로 생성자 함수를 호출하면 2가지의 작업이 생략되어서 작동하는 것이다.
  • this라는 빈객체 만들어지고 거기에 요소 값 대입해서 return 해주는 작업
  • 생성자 함수 사용할 때 저 노란 선 2가지 과정 생략해서 사용해본 것이다.
  • - 작동되었었다. - 조건은! new 키워드 붙여주기!!

 

 

 

 

new 키워드로 만들어 주면 return 없어도 객체 잘 생성돼서 나온다!

  • >>> new 키워드의 역할이 [ this 빈객체 생성 + return this; 해준다. ]
  • >>> 모든 함수에 new 사용 가능 / 일반 함수도 생성자 함수로 사용 가능
  • >>> 이렇게 객체를 생성할 때 사용하는 함수가 생성자 함수! new 키워드로!

 

 

new 키워드 사용 - 2개의 작업 생긴다.

  • >> arrow function으로 하면 생성자 함수 적용 안된다.
  • >> 생성자 함수를 만들 때는 화살표 함수로 만들지 않는다!

 

 

일반 함수와 화살표 함수 차이점 체크

  • this 바인딩 차이
  • 생성자 함수로 사용 가능 여부 차이
  • argument 사용 여부 차이

 

 

 

 

 

 

 

2. 클로저 

 

  • 클로저 확인하기 – 클로저로 private 효과 주기
  • 객체의 요소에 직접 접근하고 값도 변경 가능한 public 성격의 this. 대신에 사용

 

 

1. 변수 하나 만들어서 인자 값 넣어주기 ( 지역변수로 바꿔주기 )

 

2. new Person() 해봤자 – 일반 변수는 못 가져간다. - (맨 처음에 확인해봄)

 

3. this.getName 변수만들어서 -- 메서드 추가해주기 – 어떤함수? name 리턴해주는함수

 

 

 

4. 그런데. name이라는 변수는 지역변수로 해당 함수가 {} 존재하는 동안에만 존재하고 실행 끝나면 없어지는 것이 맞는데.. --- this.getName에 넣어준 함수는 name을 계속 알고 있어야 한다. ---- 그래서 name이라는 값은 Person() 존재와 상관없이 계속 존재하게 된다. --- 이것이 클로저

 

5. 이런 방식으로 하는 이유는? 

  • this.name =’ogs’; 이런 식으로 변경 가능했다.
  • BUT 이제는 이렇게 클로저 함수를 이용해서 불러오게 만들어 놓으면 
  • 함수를 통해서만 접근 가능

 

 

 

6. 이름을 읽어오려면?

  • 이런 식으로 getName에 들어 있는 함수를 호출 – getName()해줌으로써 Name을 읽어올 수 있다.

 

 

 

7. 게터/세터처럼 사용해보기

  • 객체 만들어서 객체 잘 만들어졌나 확인
  • get() / set() 사용해보기~

 

 

## 핵심 Point

  • 생성자 함수에서는 일반 변수는 보이지 않는다. 
  • this.으로 설정해준 속성/객체/요소들만 보인다.
  • 클로저효과(객체 내부에서 외부 변수를 참조하는 경우 - 변수의 생명주기가 내부 함수와 함께하는 것으로 바뀐다. )

 

 

 

 

 

3. 프로토 타입

 

  • 객체 만드는 기반의 차이 /// class 와 prototype
  • class 는 설계도 느낌 // prototype은 원본 느낌

 

 

 

 

 

## 설계도를 바탕으로 계속 만들어내는 것 ##

## 원본을 바탕으로 계속 복사해 내는 것 ##

 

 

 

 

3-1 prototype을 이용하여 객체의 속성과 함수 추가 가능

  • 생성자 함수 만들어질 때 추가 안 해주었던 것도
  • prototype을 이용하여 객체가 가지고 있게 추가해 줄 수 있다.

 

 

 

## 바깥쪽에서 prototype을 이용 - getName() 만들어줘도 작동한다! ##

 

 

 

 

이렇게 가능한 이유는??

  • new Person() 으로 만들어진 result 객체가 있는데
  • result 객체가 만들어지기 전에 이미 Person의 prototype이 만들어져 있다.
  • 만들어진 prototype을 바탕으로 result객체가 만들어지는 것이다.
  • 따라서 prototype에 있는 변수나 함수 같은 것들 사용 가능하다!

 

 

 

result.kh; 는 – result 객체의 kh변수 값 변경 ;

result.__proto__.kh; 는 – prototype에 있는 값 찾아가기;

2개는 다른 변수다.

 

 

 

 

3-2 객체 생성 방식의 차이

 

  • 자바 = 설계도 보고 만들기

 

 

  • JS = 이미 객체가 있다(오리지널, prototype) – 이거를 복사해서 만들기

 

다 연결되어있다. - 만들어진 친구로 prototype으로 연결 가능!!

__proto__

 

 

 

 

 

 

 

 

4. BOM

  • Browser Object Model
  • window 객체

 

 

 

 

window 객체

 

 

 

많다...

 

 

밑으로 쭉쭉쭉 더있음.

 

 

 

# 이해하는 방법~

  • >alert / atob / blur 등등 변수에 - 프로포티에  
  • >어떤 함수가 들어가 있다는 의미이다. f alert() ~~
  • >이렇게 함수를 포함하고 있는 변수를 실행시켜주면 안에 있는 함수 실행시켜주는 것이다.
  • >함수 실행되면 만들어 놓은 기능 수행! 
  • > alert() 함수를 가지고 있는 alert 변수를 실행시켜주는 방식으로 사용

 

 

# 실행 테스트

  1. location 은 ip주소 거기 부분
  2. screen은 화면 관련 정보 부분
  3. open() - 새로운 창으로 오픈
  4. setTimeout() - 입력시간만큼 기다렸다가 실행해라
  5. setInterval() - 입력시간 기준으로 작업 반복으로 실행
  6. history() - 브라우저의 방문 기록 관련 객체
  7. navigator() - 웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가진 객체

 

 

 

실행 테스트는 밑에서 확인 

 

 

 

 

 

 

5. DOM

  • Document Object Model
  • Node 객체

 

 

 

 

 

Node 객체

  • 노드란?
  • 웬만한 건 다 노드 ( 태그, 요소, 엘리먼트, 개체, 등 )

 

 

 

이거 말고도 훨씬 많다~

 

 

 

 

#  실습 TEST

  • 텍스트 노드가 있는 요소 노드 생성
  • 텍스트 노드가 없는 요소 노드 생성
  • 노드 객체 삭제

 

 

 

 

5-1. 텍스트 노드가 있는 요소 노드 생성

  • 요소 노드 생성 – tag / text
  • createElement()
  • createTextNode()
  • appendChild()

 

 

5-2. 텍스트 노드가 없는 노드 생성

 

 

 

5-3. 객체 삭제 

 

 

 

 

 

html문서 <body> 태그에서 직접 추가나 삭제 안 하고

JS에서 추가 / 삭제하는 방식을 사용하는 이유가 있나요?

동적으로 만들기 위해서! - 어떤 이벤트나 상황이 발생했을 때 작동하도록 하기 위해서

react, vue애들은 왜 동적으로 만드냐? - 핸들링은 클라이언트 쪽에 주기 위해서/ 변화가 일어난 애들만 체크하기 위해서/

 

 

 

 

 

 

6. 이벤트 모델

 

 

 

 

6-1. 종류

  1. 고전 이벤트 모델
  2. 인라인 이벤트 모델
  3. 표준 이벤트 모델

 

 

1.고전 이벤트 모델

 

 

어떤 요소나 함수 안에서 this를 사용할 때에는 바인딩처리(연결처리)를 해준다. 그런데 화살표 함수는 this에 대한 처리를 따로 안 해준다..

(this는 기본적으로 window객체를 가리킨다. 따라서 화살표 함수에서this는 윈도우객체가

리킴)

 

2. 인라인 이벤트 모델

 

 

 

3.표준 이벤트 모델

 

 

고전 이벤트 모델의 단점 – 한 이벤트에 중복으로 효과 적용 안된다.

표준 이벤트 모델( addEventListener)의 특징 - 한 번에 여러 개의 이벤트 핸들러 설정이 가능

 

 

 

 

 

 

 

 

2. 이벤트 발생 요소 객체에 접근 방법

 

 

 

# 용어체크

  • 콜백 함수
  • 콜백 함수가 되면 순서에 맞지 않고 나중에 실행되는 함수
  • 일반적인 함수는 this 바인딩 처리해줌 – 접근 가능
  • 화살표 함수는 this처리 안 해줌 – 접근 불가능으로 이해하자~

 

 

 

 

3. 태그별 기본 이벤트 제거

 

 

 

 

3-1 a태그 제거

 

3-2 submid 태그 제거

 

 

3-3 기본 이벤트 제거 응용

 

 

어떤 함수의 True/False 리턴 받아서 그에 맞게 처리해주자~

아이디 체크해보기~

정규표현식 사용할 때는:: [ / ~~ / ] 슬래시 사이에 써주기 :: 정석은 new Reg~(~)

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시 (새창열림)