사용자 정의 객체, 프로토타입, call, apply

사용자 정의 객체

(1) 기존 방법

function makePerson(first, last){
    return {
        first : first,
        last : last    
    }
}
 
function personFullName(person){
    return person.first + ' ' + person.last;
}

> master = makePerson("susan" , "wilson");

> persnFullName (master);

: sunsan wilson

-> 작동은 하지만 어설픈 방법이다. 전역 공간에 관련 함수가 많이 생성되기 때문. 가장 중요한 것은 객체에 함수를 붙여 놓는 것이다.

(2) 객체에 함수 추가

function Person(first, last) {
 
    return {
        first : first,
        last : last,
        fullName : function(){
            return this.first + ' ' + this.last;    
        }
    }
}

> master = Person("susan" , "wilson");

> master.fullName()

: sunsan wilson

-> 여기서 this 는 함수 안쪽에 사용되어 현재 객체를 참조한다. 실제 의미하는 바는, 함수를 지정하는 것

> fullName() 

: undefined

-> 그냥 fullName 메소드를 호출하면, this는 전역에 속해 있기 때문에 undefined를 할당한다.

(3) 전역 함수 추가

function personFullName(){
    return this.first + ' ' + this.last;
}
 
 
function Person(first, last) { 
    return {
        this.first : first,
        this.last : last,
        fullName : function(){
            return this.first + ' ' + this.last;    
        }
    }
}

> master = new Person("susan" , "wilson");

: new라는 키워드가 새로 추가 되었다. new는 this와 연관이 깊다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 this에 설정한다.

 'new'에 의해 불려지도록 디자인 된 함수를 construct 함수라 일컫는다. 

-> 점차 코드가 개선되고 있지만, 안에 있는 fullName에 정의된 함수를 전역에 있는 함수와 공유하는 것이 좀 더 좋은 방법일 것이다.

(4) 전역 함수와 공유

function personFullName(){
    return this.first + ' ' + this.last;
}
 
 
function Person(first, last) { 
    return {
        this.first : first,
        this.last : last,
        fullName : personFullName;
        }
    }
}

-> 프로토타입을 추가하여 조금 더 개선이 가능하다. 프로토타입은 인스턴스된 모든 객체에서 공유할 수 있는 객체이다. 

    이것은 찾아보기 체인 (prototype chain 이라 일컫는)의 한 부분을 이룬다. 

    즉, person 객체에 설정되지 않은 속성에 접근을 시도할 때마다 javascript는 prototype에 대신 존재하는 속성이 있는지 없는지 찾아본다.

(5) 프로토타입 설정 

Person.Prototype.fullName = function(){
    return this.first + ' ' + this.last;
}
 
 
function Person(first, last) { 
    return {
        this.first : first,
        this.last : last,
        fullName : personFullName;
        }
    }
}

프로토타입은 Javascript의 가장 강력한 도구 중에 하나이다. 프로토 타입을 통해 언제든지 객체의 속성 및 메소드를 추가 할 수 있다는 뜻이된다.

(6) 프로토타입을 통해 기존 객체에 없던 메소드 추가

Person.Prototype.firstName = function(){
    return this.first;
}
 
Person.Prototype.fullName = function(){
    return this.first + ' ' + this.last;
}
 
 
function Person(first, last) { 
    return {
        this.first : first,
        this.last : last,
        fullName : personFullName;
        }
    }
}

firstName 이라는 property는 Person 객체에 없지만, 프로토타입을 통해 설정할 수 있다.

정의한 객체 이외에 기존 객체에도 prototype을 정의 할 수 있다.

(6) 프로토타입을 통해 Javascript 내부에 정의된 객체에 메소드 추가

String.prototype.checkNum = function(){    
    var str = "";
    
    if(!isNaN(parseInt(str))){
        return true;
    }else{
        return false;
    }
}

(6) Call , Apply 함수

function add(x,y){
    var total = x + y;
    return total;    
}

> add.call(null, 2,3,4) ;

 : 5     

> add.apply(null,[2,3,4]);

 : 5

apply를 통해 배열을 인자 값으로 넘길 수 있다. apply와 call의 첫 번째 인자값에 해당하는 null은 역할은?

 : this, 즉 자기 자신을 지칭한다.

(6) Call, Apply의 첫번 째 인자 값의 활용

var writer = {
  message: 'HI',
  write: function() {
    alert(this.message);
  }
};
var writer2 = {
  message: 'HELLO'
};

writer 객체에는 write라는 property가 있고, 함수를 대입했다.

writer.write();                    // HI

writer.write.call(writer2);     //HELLO