JavaScript 주말 전문가 교육의 2일차이자 마지막 날이다.
어제 교육의 review
JavaScript의 특징
- type 지정 키워드가 없다
- 숫자, 문자열, 논리(true, false(0, "", null, false, undefined, NaN(숫자 타입이 값이 지정되지 않았을 경우)))
- lexical 특성 : 전역변수로 선언되있던 것을 다시 지역변수로 선언했는데, 그것을 초기화하기 전에 사용했을 경우 undefined가 나오는 것.
var a=10
function doit() {
console.log(a);
var a=20;
}
- 함수
생성자함수의 역할
메소드의 역할
- 메소드 : 어떤 동작이 일어나게끔 하는 (behavior)
- 함수의 인자와 파라미터 개수는 꼭 같지 않아도 된다. 인자값이 모자라면 undefined, 넘치면 버려진다.
argument.length : 전달되는 인자의 개수
객체지향 자바스크립트
1. 클래스(Class) 기반 객체지향
- 클래스 기반 객체지향 언어 : C++, C#, JAVA 등
- 클래스 기반 객체지향 언어의 특징
- 객체와 클래스의 개념 명확
- 캡슐화(Encapsulation)
- 정보 은닉을 위해 제공한다. 속성은 private로 제한, public 메서드를 통해 멤버에 접근하도록 함
- 저장되는 값의 검증, 조회하는 콜러의 권한 체크 등이 메서드 안에 작성 가능하기때문에 메서드 이용
- 집합(Aggregation or Composition)
- 상속(Inheritannce) : 부모의 멤버(변수, 메서드)를 자식 클래스에서 상속받을 수 있고, 코드 재사용성을 높인다.
- 다형성(Polymorphism) : 상속관계가 있는 상태에서 사용 가능하고, 부모타입으로 선언하면 참조시 상속관계가 있는 모든 개체를 참조할 수 있다.
2. 프로토타입(prototype) 기반 객체지향
- 객체를 만드는 방법
- new와 Object(최상위 객체) 생성자를 이용
* Object(언어차원에서 최상위 객체) 와 window(만들어진 객체?)
ex)
person = new Object();
person.name = "MJ";
person.age = 30; - 사용자 정의 생성자를 이용
ex)
function Person(name, age) {
this.name = name; //속성 추가
this.age = age;
this.setName = function(newName) { //메서드 추가
this.name = newName;
}
}
var friend = new Person("KilDong", 25); - 객체 리터럴을 이용
ex)
var person = {name: "Sunsin", age:35}; //JSON형식
Object 생성자 함수를 이용한 객체 생성
사용자 정의 생성자를 이용한 객체 생성
객체 리터럴을 이용 (JSON형식)
★★★ JSON 표현 형식
- object
- {}
{ members } - members
- pair
pair , members - pair
- string : value
- array
- []
[ elements ] - elements
- value
value , elements - value
- string
number
object
array
true
false
null
- string
- ""
" chars " - chars
- char
char chars - char
- any-Unicode-character-
except-"-or-\-or-
control-character
\"
\\
\/
\b
\f
\n
\r
\t
\u four-hex-digits - number
- int
int frac
int exp
int frac exp - int
- digit
digit1-9 digits
- digit
- digit1-9 digits - frac
- . digits
- exp
- e digits
- digits
- digit
digit digits - e
- e
e+
e-
E
E+
E-
3. 내장(built-in) 객체
- 자바스크립트 타입 체계의 특징
- 타입 체크를 수행하지 않는다
- 객체 초기 구조는 결정
- 자바스크립트의 생성자는 생성되는 객체의 최초 구조를 결정
위에 예제에서 Person을 생성하면서 객체의 최초 구조를 결정한다고 볼 수 있다. - 객체 구조 변경
위에 예제 Person(name, age)에서 꼭 name과 age만 들어가는걸까? 아니다.
Runtime에도 속성을 언제든지 바꿀 수 있다.
4. 객체 정의 및 생성
- new Object
객체를 생성하기 위해 함수를 호출할 때 new 사용
new 다음에 나오는 함수를 생성자(constructor)라고 한다.
Object도 함수다. - 객체 리터럴
객체 생성 구문으로 많이 사용
{ } 를 이용 - 함수 이용
클래스 기반 언어에서 클래스 정의
자바스크립트에서 클래스(생성자 함수) 정의
5. 객체 멤버
함수 내에서 바로 선언된 것(var 변수)을 비공개 멤버라하고, 이는 함수 밖에서 접근할 수 없다.
8. prototype, constructor, instance
★★★★★★ 완전 중요 ★★★★★★★
생성자 함수를 위한 공간이 실행코드 블록과 생성자(함수)영역으로 나뉜다.
인스턴스들은 함수 안에 this. 으로 선언한 속성들이 저장이된다.
프로토타입멤버의 프로토타입 속성은 생성자.prototype.속성 = 값; 으로 구현을 하는데..
JavaScript는 클래스가 없어서 상속을 못하기때문에 prototype을 이용하는 것이다.
prototype에 뭔가를 추가하면은 instance에서도 추가가 되는 것이다.
멤버는 변수가 될수도있고 메서드가 될수도있다.
+ : 외부에서 참조 가능
- : 외부에서 참조 불가능
공개변수 영역 : 생성자를 직접 추가하거나 제거할 수 있다.
값을 저장하는 영역 : 변수 스코프 영역(-), 프로토타입 객체(+ : 프로토타입객체.xx로 참조가능), 공개변수 영역(+ : 함수이름.xxx로 참조 가능)
constructor : 각각 상대를 의미한다. 즉 Person의 각각 객체를 의미
ex) Person.prototype.constructor = Person자바스크립트는 변수와 메서드 구분이 없다. 즉 변수가 추가되면 메서드도 추가가 가능하다는 소리이다.
salary라는 변수는 프로토타입 객체에도 있지만 friend라는 인스턴스에도 존재한다.(프로토타입 객체의 비대칭성)
9. prototype
- 모든 생성자가 가지고 있는 공개 속성
- 생성자를 통해 참조 가능(인스턴스를 통해 참조 불가능)
- Person.prototype (o) / p.prototype (x) - 인스턴스 "is a" prototype 객체
- 프로토타입 객체에 포함된 모든 멤버를 해당 생성자로 생성된 인스턴스에서 접근할 수 있다.
Person.prototype.job
p.job
- 프로토타입 객체는 메모리에 정의할 때 한번만 생성된다.
-프로토타입 멤버는 인스턴스 별로 복사본이 존재하는 것이 아니라 해당 생성자에 하나만 존재하면서 그 생성자의 모든 인스턴스가 함께 공유한다. - 프로토타입 멤버의 비대칭
10. constructor
- Person.prototype (o) / friend.prototype (x)
- Person.prototype.constructor = Person (o) / Person. constructor (x)
- friend.constructor = Person (o)
- 인스턴스를 가지고 생성자함수를 참조할수 있구나!
11. 객체 생성 과정
- 프로토 타입 실체는 Object
- 자바에서 최상위 객체는 Object이다. 자식이 만들어지기 전에 부모가 만들어져야한다.
- 그러니까 Object가 만들어지고 그 다음에 Person생성자 내에서 this.name="KilDong"이 Object 인스턴스가 된다.
- 자동으로 __proto__가 생성된다. 이 속성이 참조하는 것이 Person prototype 객체이다
- 그리고 Object는 this를 반환하는 형태이다.
- this는 해당 함수를 호출하는 객체
- 함수 안에서 쓰여진다.
- 원래 this를 쓰려면 function Person(name) { this.name = name; } 이렇게 쓰는데
//this.name = name 을 하고 var mySon = new Person("aaa")를 하면 aaa를 저장할 곳이 없다는 문제가 생기지만
Person.prototype.setNewName = function(newName) { this.name = newName; } 과 mySon.setNewName("bbb"); 를 보면은
mySon.setNewName("bbb")가 실행되면서 my - Q. line 12 이후 (어디에든) var urSon = new Person("ddd"); Console.log(urSon.name); 추가하고 결과값은??
이유는 urSon이라는 인스턴스가 생겨나긴하는데, 이전에 저장되어있던 프로토타입을 가지고 와서 출력하기 때문에 "ccc"가 나온다.
'IT' 카테고리의 다른 글
| [PhoneGap] Cordova 3.0 설치 (Android, Tizen - Windows) (1) | 2014.06.18 |
|---|---|
| [JS] 전문가교육 2일차 - 오후 (0) | 2014.05.25 |
| [JS] 전문가교육 1일차 - 오후 (0) | 2014.05.24 |
| [JS] 전문가교육 1일차 - 오전 (0) | 2014.05.24 |
