날아라쩡글이의 블로그입니다.
객체 생성하기 본문
728x90
반응형
자바의 경우
public class Date{
public Date(){}//생성자 메소드 ->객체의 초기화를 담당
//기타메소드
//기타메소드
}
- 클래스파일( Date.class설계도 )로 객체를 생성하고, 생성자 메소드를 실행한다.
- 자바는 객체를 생성하기 위해서 클래스 파일이 필요하다.
- 그리고 this는 나자신을 가르킨다.
자바스크립트
- name : "홍길동"
- 리터럴이다.
- : 을사용한다.
- key : value로 표현한다.
- this.name="홍길동"
- 함수이다.
- 수행문 작성을 한다.
- 배열 리터럴 [10, 20, 30]
- 배열 수행문
- var x = [];
- x[0] = 100;
- 기능도 값이 된다.
자바스크립트에서 객체 생성하기
- 객체 리터럴을 사용하기
- 배열, 숫자, 상수를 표현하는 것이다.
- var obj = {}; //빈객체를 생성한다.
- var obj = { //프로퍼티와 메소드가 있는 객체를 생성한다.
name:"홍길동", //프로퍼티
kor:100, //프로퍼티
eng:80, //프로퍼티
math:70, //프로퍼티
getTotal=function(){ //메소드
return this.kor+this.eng+this.math;
},
getAverage=function(){ //메소드
return this.getTotal/3;
}
} - obj.getTotal();
- 이렇게 사용을하면 getTotal내에 있는 this는 obj가 들어간다.
- 자바의 경우 객체를 호출하고 그 내부에 있는 메소드를 사용해서 this는 나자신이 들어오지만, 자바스크립트의 경우는 다른 객체가 빌려사용할 수 있기 때문에 this가 obj가 되지 않고 다른 값이 들어가게 된다.
- 그리고 데이터를 만들기 위해서는 var obj1, var obj2를 저 프로퍼티와 메소드를 계속해서 붙여줘야하는 것이다. 그것은 너무 많은 양의 데이터를 만들어 낸다.
- 생성자 함수 이용하기
- 클래스는 없지만, 자바스크립트에서는 생성자 함수가 존재한다.
- function Date(){ //생성자 메소드이다.
}- 생성자는 대문자로 시작해줘야한다.
- 함수앞에 new를 붙이면 무조건 객체가 만들어 진다.
- var x = a(); //x에 a();가 담긴다.
- var x = new Date();
- 메소드 Date의 경우 toString을 재정의해서 날짜와 시간이 나온다.
- function Student(){
this.name="홍길동";
this.kor = 100;
this.eng = 80;
this.math = 70;
this.getTotal = function(){
return this.kor + this.eng + this.math
}
this.getAverage = function (){
return this.getTotal()/3;
}
}; - 그러면 함수를 사용하면 된다.
- var stud1 = new Student();
var stud2 = new Student();
var stud3 = new Student(); - 함수가 들어가 있다. 코드가 간결해진다.
- var stud1 = new Student();
- 사용방법
- function Student(name, kor, eng, math){
this.name=name;
this.kor = kor;
this.eng = eng;
this.math = math;
this.getTotal = function(){
return this.kor + this.eng + this.math
}
this.getAverage = function (){
return this.getTotal()/3;
}
}; - var stud1 = new Student("홍길동", 100, 80, 70);
- 매개변수 입력된 생성자 메소드가 실행되면서 입력된다.
- prototype
- 함수의 원형을 의미한다.
- 일단 부모의 객체라고 생각하면 된다.
- 자바의 경우 모든객체의 부모는 object다
- 자바스크립트도 모든 객체의 부모는 object다
- 객체 리터럴로 객체 생성하던지
- 생성자 함수를 사용해서 객체를 생성하는 방법이 있다.
- function Student(name, kor, eng, math){
- new 키워드와 같이 생성자 함수를 실행하면 객체가 생성되고, 생성자 함수가 실행된다.
- function Student(name, kor, eng, math){
this.name=name;
this.kor = kor;
this.eng = eng;
this.math = math;
this.getTotal = function(){
return this.kor + this.eng + this.math
}
this.getAverage = function (){
return this.getTotal()/3;
}
}; - var stud1 = new Student("홍길동", 100, 80, 70);
- var x = {}
new키워드는 빈 객체를 생성한다. - Student("홍길동", 100, 80, 70)을 실행한다.
- window.Student()
윈도우 내의 Student메소드를 실행한다.
매개변수가 비어있으면 window가 들어간다.
생략하면 window가 실행된다.
AAA();를 실행하면 window가 실행된다. - this는 고정적이지 않고, 언제든지 변경이 가능하다.
window.AAA.call(stud1);
call이라는 메소드를 이용해서 변경할 수 있다.
window의 AAA가 stud1을 호출하게 한다. - 생성자 메소드의 this에 new키워드에서 생성한 var x = {} 빈 객체가 전달된다.
- window.Student.call(obj)
- window객체의 Student함수를 obj객체에서 호출하게 한다.
- 자바스크립트의 함수의 this는 그 함수를 호출한 객체가 전달됨으로 this에는 빈 객체가 전달된다.
- 생성자함수의 수행문이 실행된다.
- this.name=name;
this.kor = kor;
this.eng = eng;
this.math = math;
this.getTotal = function(){
return this.kor + this.eng + this.math
}
this.getAverage = function (){
return this.getTotal()/3;
}
- this.name=name;
- this는 빈 객체가 들어있다.
- this는 obj다
- obj는 빈객체다.
- obj.name=name;
obj.kor = kor;
obj.eng = eng;
obj.math = math;
obj.getTotal = function(){
return obj.kor + obj.eng + obj.math
}
obj.getAverage = function (){
return obj.getTotal()/3;
}
- 따라서 1번에서 생성한 객체가
- obj.name="홍길동";
obj.kor = 100;
obj.eng = 80;
obj.math = 70;
obj.getTotal = function(){
return obj.kor + obj.eng + obj.math
}
obj.getAverage = function (){
return obj.getTotal()/3;
} - 프로퍼티가 있는 객체가 된다.
- 최종적으로 완성되고, 생성자 함수의 실행이 종료되면 1번에서 생성한 객체가 채워져서 반환된다.
- obj.name="홍길동";
- function Student(name, kor, eng, math){
반응형
'중앙 HTA (2106기) story > javascript story' 카테고리의 다른 글
JSON (0) | 2021.12.18 |
---|---|
Date메소드, math메소드 (0) | 2021.12.18 |
배열 Map(),reduce() (0) | 2021.12.17 |
배열 반복 문, 필터 메소드 (0) | 2021.12.17 |
배열 메소드 (0) | 2021.12.16 |
Comments