기본 문법
생성
1
2
3
4
5
6
7
| var person = {
name: 'Soyeon',
age: 24,
sayHi: function() {
alert("Hi, I\'m " + this.name);
}
};
|
- 객체 : 데이터와 함수의 집합 person
- 프로퍼티(속성) : 객체 내부의 속성 name, age
- 메소드 : 객체 내부의 함수 sayHi
- 객체 리터럴(object literal) : 생성자로 생성하지 않고, 내용을 그대로 대입해서 생성한 객체
접근 & 설정
- 점 표기법
- 괄호 표기법
1
2
3
4
5
6
7
| // 접근
person.age
person['age']
// 설정 (새로운 멤버 생성 가능)
person.age = 28;
person['hometown'] = 'Inchoen';
|
this
실행 중인 코드가 속해있는 객체
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var person1 = {
name: 'Soyeon',
sayHi: function() {
alert("Hi, I\'m " + this.name);
}
}
var person2 = {
name: 'Joy',
sayHi: function() {
alert("Hi, I\'m " + this.name);
}
}
person1.sayHi(); // Hi, I'm Soyeon
person2.sayHi(); // Hi, I'm Joy
|
객체지향 프로그래밍
생성자
1
2
3
4
5
6
7
8
9
10
| // 생성
function Person(name) {
this.name = name;
this.sayHi = function() {
alert("Hi, I'm " + this.name);
};
}
// 호출
var person1 = new Person("Soyeon");
var person2 = new Person("Joy");
|
- 생성자 : 프로퍼티와 메소드를 정의 Person
- 객체 인스턴스 : 생성자로 생성된 각각의 객체 person1, person2
생성
this 키워드 사용- 생성자 함수명은 보통 대문자로 시작
호출
Object() 생성자
- 빈 객체를 생성하는 함수
- 프로퍼티와 메소드를 정의해서 생성하려면 객체 리터럴 사용
1
2
3
4
5
6
7
| var person1 = new Object();
var person2 = new Object({
name: 'Soyeon',
sayHi: function() {
alert("Hi, I\'m " + this.name);
}
})
|
create() 함수
- 이미 존재하는 객체를 이용하여 새로운 객체를 생성하는 함수
- 익스플로러 8에서는 지원하지 않는다.
1
2
3
4
| var person1 = Object.create(person2);
person1.name // Soyeon
person2.sayHi() // Hi, I'm Soyeon
|
프로토타입 (prototype)
- 객체는 상속받은 멤버를 접근할 때 프로토타입 체인을 타고 올라가며 찾는다. (복사되는 것이 아님)
프로토타입 속성
- 상속하고자 하는 속성과 메소드를 담아두는 하나의 객체
1
2
3
4
5
6
| // Person을 상속받은 객체에서 사용 가능한 속성과 메소드들을 확인
Person.prototype
// 프로토타입 객체 접근
var person1 = Object.create(person2);
person1.__proto__ // person2
|
생성자 속성 (constructor)
- 객체에서 자신을 만든 생성자를 호출하고자 할 때 사용하는 속성
1
2
3
4
| person1.constructor // Person()
// constructor를 이용하여 새로운 객체 생성
var person3 = new person1.constructor('Soyeon');
|
프로토타입 수정
1
2
| Person.prototype.fullName = this.name.first + ' ' + this.name.last;
Person.prototype.callMyName = function() { ... };
|
속성을 생성자 밖에서 정의할 때 상수를 넣어줄 경우, 객체를 생성할 때마다 같은 값이 되어 좋은 방법이 아니고, this 를 이용할 경우, 함수 범위가 아닌 전역 범위를 가리키므로 의도대로 동작하지 않는다.
- 그러므로, 보통 속성은 생성자에서 메소드는 프로토타입에서 정의한다.
출처 📎
Mozilla
