사용자 정의 객체
(1) 기존 방법
1 2 3 4 5 6 7 8 9 10 | function makePerson(first, last){ return { first : first, last : last } } function personFullName(person){ return person.first + ' ' + person.last; } | cs |
> master = makePerson("susan" , "wilson");
> persnFullName (master);
: sunsan wilson
-> 작동은 하지만 어설픈 방법이다. 전역 공간에 관련 함수가 많이 생성되기 때문. 가장 중요한 것은 객체에 함수를 붙여 놓는 것이다.
(2) 객체에 함수 추가
1 2 3 4 5 6 7 8 9 10 | function Person(first, last) { return { first : first, last : last, fullName : function(){ return this.first + ' ' + this.last; } } } | cs |
> master = Person("susan" , "wilson");
> master.fullName()
: sunsan wilson
-> 여기서 this 는 함수 안쪽에 사용되어 현재 객체를 참조한다. 실제 의미하는 바는, 함수를 지정하는 것
> fullName()
: undefined
-> 그냥 fullName 메소드를 호출하면, this는 전역에 속해 있기 때문에 undefined를 할당한다.
(3) 전역 함수 추가
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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; } } } | cs |
> master = new Person("susan" , "wilson");
: new라는 키워드가 새로 추가 되었다. new는 this와 연관이 깊다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 this에 설정한다.
'new'에 의해 불려지도록 디자인 된 함수를 construct 함수라 일컫는다.
-> 점차 코드가 개선되고 있지만, 안에 있는 fullName에 정의된 함수를 전역에 있는 함수와 공유하는 것이 좀 더 좋은 방법일 것이다.
(4) 전역 함수와 공유
1 2 3 4 5 6 7 8 9 10 11 12 13 | function personFullName(){ return this.first + ' ' + this.last; } function Person(first, last) { return { this.first : first, this.last : last, fullName : personFullName; } } } | cs |
-> 프로토타입을 추가하여 조금 더 개선이 가능하다. 프로토타입은 인스턴스된 모든 객체에서 공유할 수 있는 객체이다.
이것은 찾아보기 체인 (prototype chain 이라 일컫는)의 한 부분을 이룬다.
즉, person 객체에 설정되지 않은 속성에 접근을 시도할 때마다 javascript는 prototype에 대신 존재하는 속성이 있는지 없는지 찾아본다.
(5) 프로토타입 설정
1 2 3 4 5 6 7 8 9 10 11 12 13 | Person.Prototype.fullName = function(){ return this.first + ' ' + this.last; } function Person(first, last) { return { this.first : first, this.last : last, fullName : personFullName; } } } | cs |
프로토타입은 Javascript의 가장 강력한 도구 중에 하나이다. 프로토 타입을 통해 언제든지 객체의 속성 및 메소드를 추가 할 수 있다는 뜻이된다.
(6) 프로토타입을 통해 기존 객체에 없던 메소드 추가
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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; } } } | cs |
firstName 이라는 property는 Person 객체에 없지만, 프로토타입을 통해 설정할 수 있다.
정의한 객체 이외에 기존 객체에도 prototype을 정의 할 수 있다.
(6) 프로토타입을 통해 Javascript 내부에 정의된 객체에 메소드 추가
1 2 3 4 5 6 7 8 9 | String.prototype.checkNum = function(){ var str = ""; if(!isNaN(parseInt(str))){ return true; }else{ return false; } } | cs |
(6) Call , Apply 함수
1 2 3 4 | function add(x,y){ var total = x + y; return total; } | cs |
> add.call(null, 2,3,4) ;
: 5
> add.apply(null,[2,3,4]);
: 5
apply를 통해 배열을 인자 값으로 넘길 수 있다. apply와 call의 첫 번째 인자값에 해당하는 null은 역할은?
: this, 즉 자기 자신을 지칭한다.
(6) Call, Apply의 첫번 째 인자 값의 활용
1 2 3 4 5 6 7 8 9 | var writer = { message: 'HI', write: function() { alert(this.message); } }; var writer2 = { message: 'HELLO' }; | cs |
writer 객체에는 write라는 property가 있고, 함수를 대입했다.
writer.write(); // HI
writer.write.call(writer2); //HELLO
'programming > JavaScript' 카테고리의 다른 글
| 클로져 (Closures), 메모리 누출 (0) | 2018.06.09 |
|---|---|
| 배열, 함수 (0) | 2018.05.26 |
| 객체 (Object) (0) | 2018.05.26 |
| 데이터 타입, 변수, 연산자 (0) | 2018.05.26 |
