* 클래스 *

 

함수(메소드) 와 변수( 멤버변수 ) 의 집합

 

1) 리터널방식 ( literal ) : 객체형태. 자체가 인스턴스이다 ( 일회용 )

2) 함수방식 클래스 : 함수형태. new연산자 사용하여 인스턴스 만듬 ( 확장성 )

3) 프로토타입방식 클래스 :  함수형태.

- new연산자 사용하여 인스턴스 만들고(확장성) .prototype을 이용하여 데이터를 추가한다.

- 상속 가능( 관리 용의성 )

 

 

 

 

 

 

1. 전역변수, 전역함수는 협업할 때 합리적이지 않다 ( 이름이 겹치면 곤란해짐 )

-> 클래스 이용

 

 

- 전역변수와 전역함수로 이루어진 코드

 

 

 

 

- 위의 코드를 클래스(리터널클래스) 로 만들었을 때

 

 

 

 

 

 

 

 

 

 

 

 

 

* this *

 

현재 속해있는 객체, .. 영역

상황에 따라 다르다.

 

 

- 전역에서의 this

 

 

 

 

 

 

*

 

 

 

 

: 100의 값을 줬는데도 200으로 바꼈다.

(전역에서의 this == window)

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 리터널방식 클래스 ( literal class)

: 객체로 나타낸다.

 

- 사용할 땐 . 을 사용해서 불러옴.

 

 

* 안의 this는 속해있는 객체 Exam이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 함수방식 클래스 ( 객체 아님 )

 

paramenter를 이용해 재활용 가능.

틀( 함수 )을 만들어서 인스턴스로 계속 찍어냄 .

 

 

1) 클래스 Func

 

 

 

 

- this.num 을 console에 찍으면

 

 

 

 

 

- 함수로 실행해서 Func안의 this가 어딘지 console을 찍으면

 

: window이다.

 

 

 

 

 

2) 연산자 new로 인스턴스 만들기

: 함수가 객체로 바뀐다. 객체로 바꼈기 때문에 Func안의 this는 윈도우가 아닌 Func가 된다.

 

Exam2, Exam3는 각각의 데이터 공간을 가진다.  

 

 

* new연산자로 바꾸는 순간 Func가 한번 실행된다. this콘솔에 찍힘 -> Func*

 

 

 

 

3) 멤버변수와 메소드 실행시키기.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 프로토타입 클래스.

 

상속이 가능하기 때문에 객체지향 프로그래밍을 사용하기에 좋다.

 

 

1) 본체 - 초기화

 

 

2) 변수, 메소드 등 생성하기

클래스이름.prototype.메소드/변수이름 = ..

 

 

 

 

3) 인스턴스로 만들어내기.

( 한번 실행된다. )

 

 

* Cal을 아래처럼 바꾸고 나서 new연산자를 이용해 인스턴스 만들 경우 *

 

- 한번 실행되면서 찍힌다. num, sum도 같이 찍힌다.

 

 

 

4) 인스턴스 멤버변수, 메소드 실행 출력하기

 

 

 

 

*모듈* 

클래스를 이용해 코드를 간결하게 만드는 것. 

(재활용, 재사용)




기존의 방법으로 아래의 레이아웃을 만들기 











모듈 이용하기 


1. 반복적으로 사용할 CSS속성을 임의의 class명으로 .style파일에 미리 만들어 놓는다. 



2. 사용하고 싶은 태그에 해당 class를 넣는다. 




훨신 간결 ! 



+ Recent posts