Javascript를 이용해서 class를 작성하려면 function 이라는 키워드를 사용한다.
function 키워드는 함수를 만들때 사용하지만, class를 작성할 때도 사용이 된다.
# 방법 1
function Student(name, age) {
this.name = name;
this.age = age;
}
// setName() 이 아님을 주의하라!
Student.prototype.setName = function(name) {
this.name = name;
}
Student.prototype.setAge = function(age) {
this.age = age;
}
Student.prototype.getName = function() {
return this.name;
}
Student.prototype.getAge = function() {
return this.age;
}
class의 기본만 선언하고 해당 class의 method를 추가로 선언하는 방법
var student = new Student("홍길동", 45);
alert(professor.name + " : " + professor.age);
alert(professor.getAge());
# 방법 2
function Student(name, age) {
Student.prototype.setName = function(name) {
this.name = name;
}
Student.prototype.setAge = function(age) {
this.age = age;
}
Student.prototype.getName = function() {
return this.name;
}
Student.prototype.getAge = function() {
return this.age;
}
}
class선언과 동시에 method를 선언하는 방법
// class 선언에는 Student(name, age) 라고 되어 있지만, 아래처럼 해도 됨
// 이것이 Javascript의 매력! ㅋㅋ
var student = new Student();
student.setName("홍길동");
student.setAge(29);
alert(student.getName() + " : " + student.getAge());
// 아래처럼 하면 undefined 라고 나옴
alert(student.name);
# 방법 3
Student = function() {
var name;
var age;
this.setName = function(name) {
this.name = name;
}
this.getName = function() {
return this.name;
}
}
method 선언 방법
Student.setName("럭키");
alert(Student.getName());
alert(Student.name);
TIP.
위에 보면 prototype 이라는 놈이 있는데 이는 Java에서 모든 객체가 최상위 객체로 Object를 갖고 있는 것과 비슷하다고 생각을 하면 된다.
Java에서 Student.getName() 하면 Student 객체에서 getName()을 찾고
없으면 Object 객체까지 올라가면서 getName() 메소드를 찾는데,
Javascript에서 Student.getName() 이라고 호출을 하면
Student 객체에서 찾고, Student 객체에 없으면 prototype이라는 property에서
getName() 이라는 function을 찾는다. 없으면 undefined(변수일 경우) 또는 ""(메소드일 경우)를 반환한다.
prototype 이라는 property는 인스턴스별로 하나씩 존재하는 것이 아니고,
클래스에 하나가 존재하는 것이다.
아래 예제를 보면 이해하기가 쉬울 듯....
1번째 라인에서 class를 정의한 후에 20번째 라인에서 해당 class의 instance를 만들고,
60번째 라인에서 해당 class에 prototype을 이용해서 method를 추가하면,
추가한 시점 이후부터는 20번째 라인에서 생성한 instance도 해당 method를 사용할 수 있게 된다.
즉,
1 : function Student(name, age) {
2 : this.name = name;
3 : this.age = age;
4 : }
.
.
.
20 : var lucky = new Student("최유복", 30);
.
.
25 : alert(lucky.name);
.
.
60 : Student.prototype.setName = function(name) {
61 : this.name = name;
62 : }
.
.
.
77 : lucky.setName("홍길동");
78 : alert(lucky.name);
이렇듯 prototype은 class 자체에 지정이 되기 때문에 아래와 같이하면 안된다.
function Student(name, age) {
Student.prototype.name = name;
Student.prototype.age = age;
}
var lucky = new Student("최유복", 30);
alert(lucky.name); => 최유복 이라고 찍힌다.
var hong = new Student("홍길동", 24);
alert(lucky.name + " : " + hong.name); => 홍길동 : 홍길동 이라고 찍힌다.
위와 같이 하면 처음엔 "최유복" 이렇게 찍히나 두번째는 lucky.name 까지도 "홍길동"으로 바뀐다.
