[공부 복습] 생활코딩 JavaScript 입문 강의 복습 (3)

복습하면서 알게된 내용, 공부하는 내용들을 기록하고 있는데

너무 스크롤 압박이 심해져서 끊어가기로 했다.

 

cinnamonc.tistory.com/174

[공부 복습] 생활코딩 JavaScript 입문 강의 복습 (2)

 

---

Arguments

1) arguments.length와 함수명.length는 다른 의미를 가지고 있음

 

함수의 호출

1) 자바스크립트가 일종의 "객체"임을 잊지말기

2) 함수를 호출하는 방법은 함수명([인자값]) 외에도 함수명.apply([thisarg],[인자값])의 방법이 있으며 실습

// 함수의 호출 방법 중 하나인 apply 메소드 실습
var class1 = {
    'Kim' : { 'kor' : 10, 'math' : 20, 'eng' : 30 },
    'Lee' : { 'kor' : 40, 'math' : 50, 'eng' : 60 },
    'Park' : { 'kor' : 70, 'math' : 80, 'eng' : 90 }
}
var class2 = {
    'Choi' : { 'kor' : 100, 'math' : 90, 'eng' : 80 },
    'Sung' : { 'kor' : 70, 'math' : 60, 'eng' : 50 },
    'Hwang' : { 'kor' : 40, 'math' : 30, 'eng' : 20 }
}

function avgFn(){
    var avg = 0;
    var cnt = 0;
    for(var name in this){
        for(var subject in this[name]){
            avg += this[name][subject];
            cnt++;
        }
    }
    return avg/cnt;
}

console.log('class 1반 전체 평균 : ', avgFn.apply(class1));
console.log('class 2반 전체 평균 : ', avgFn.apply(class2));

실행결과

 

 

객체 지향 프로그래밍 : 생성자와 new

1) 생성자 : 객체를 만드는 역할을 하는 함수

     * 함수 앞에 new를 붙여서 변수(객체)에 대입을 하면 객체화됨

        => 즉, 보통 함수를 임의의 변수에 대입하면 함수의 반환값(return값)이 저장되지만

              'new 함수명'을 임의의 변수에 대입하면 객체(함수는 원래 객체임)가 만들어지는 것

2) 생성자는 주로 "객체를 새로 만들고 초기화할 데이터들"이 들어있음

3) 생성자를 사용하는 이유는 "재사용성 용이"를 위함 (재사용할 수 있는 객체 생성 코드 구현하는 것)

     * 앞서 위에서 입력한 코드만 해도 class1(1반)과 class2(2반) 객체를 각각 객체 생성 문법을 이용해 만들었음

     * 생성자를 이용하면 new 코드만을 통해 간단하게 생성 가능

     * '첫 글자가 대문자인 함수'는 new를 붙여서 실행해야한다고 함 (공동의 약속)

     * 참고한 블로그글 : 

ko.javascript.info/constructor-new

'new' 연산자와 생성자 함수

3) 실습해보기

 

상속

1) 상속 및 자식 객체에게만 특정 prototype 추가 실습해보기

function Thing(name){
    this.name = name;
}

Thing.prototype.name = null;
Thing.prototype.uniqueCode = function() {
    switch(this.name){
        case 'desk':
            this.uniqueCode = 'D';
            break;
        case 'chair':
            this.uniqueCode = 'C';
            break;
        case 'bed':
            this.uniqueCode = 'B';
        default:
            this.uniqueCode = 'O';
    }
    return this.uniqueCode;
}

function Desk(name){
    this.name = name;
}

Desk.prototype = new Thing();
Desk.prototype.material = 'Wood';

var desk1 = new Desk('desk');
console.log(desk1.name, " 의 상품코드는 ", desk1.uniqueCode(), " 입니다.");
console.log(desk1.name, " 의 재질은 ", desk1.material, " 입니다.");

2) 아래 코드 참고

     * Sub가 상속받은 ultraProp의 값을 변경하여도 Ultra 생성자 함수에 속한 ultraProp에는 영향 X

        => o1 객체 : Sub 생성자 함수에 ultraProp가 없어서 Ultra 생성자 함수의 prototype을 상속받았음

        => o1 객체와 o2 객체는 각각 맨처음에 Sub, Ultra 생성자 함수로 초기화하기 때문에(생성자 함수가 정의된 코드로 초기화)

             객체를 만든 후 ultraProp를 변경하여도 서로의 ultraProp 값에 영향을 주지 않는 듯함