[JS] 전문가교육 2일차 - 오전

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) 기반 객체지향

• 객체를 만드는 방법
1. new와 Object(최상위 객체) 생성자를 이용
   * Object(언어차원에서 최상위 객체) 와 window(만들어진 객체?)
   
   ex)
       person = new Object();
       person.name = "MJ";
       person.age = 30;
   
   
2. 사용자 정의 생성자를 이용
   ex)
       function Person(name, age) {
           this.name = name;    //속성 추가
           this.age = age;
           this.setName = function(newName) {    //메서드 추가
               this.name = newName;
           }
       }
       var friend = new Person("KilDong", 25);
   
   
3. 객체 리터럴을 이용
   ex)
       var person = {name: "Sunsin", age:35};    //JSON형식
   
   
2번째 방법은 계속 값이 바껴서 저장되야할 때 좋고
3번째 방법은 한번 값을 저장하면 되는 것일 때 사용하기 좋다.
2번째 방법과 3번째 방법은 꼭 알아두는게 좋다.

Object 생성자 함수를 이용한 객체 생성

사용자 정의 생성자를 이용한 객체 생성

객체 리터럴을 이용 (JSON형식)

* http://json.org/

★★★ 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. 객체 정의 및 생성

1. new Object
   객체를 생성하기 위해 함수를 호출할 때 new 사용
   new 다음에 나오는 함수를 생성자(constructor)라고 한다.
   Object도 함수다.
2. 객체 리터럴
   객체 생성 구문으로 많이 사용
   { } 를 이용
3. 함수 이용
   클래스 기반 언어에서 클래스 정의
   자바스크립트에서 클래스(생성자 함수) 정의

5. 객체 멤버

함수 내에서 바로 선언된 것(var 변수)을 비공개 멤버라하고, 이는 함수 밖에서 접근할 수 없다.

8. prototype, constructor, instance

★★★★★★ 완전 중요 ★★★★★★★

생성자 함수를 위한 공간이 실행코드 블록과 생성자(함수)영역으로 나뉜다.

인스턴스들은 함수 안에 this. 으로 선언한 속성들이 저장이된다.

프로토타입멤버의 프로토타입 속성은 생성자.prototype.속성 = 값; 으로 구현을 하는데..

01234

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를 반환하는 형태이다.

12. 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"가 나온다.