20211007 객체 생성자 함수
객체 생성자 함수
- var 혹은 let 으로 선언된 변수 혹은 내부함수는 객체화 후 외부에서 접근이 불가능하다.
- this 키워드로 선언된 변수는 외부에서 접근 가능하다.
- new 연산자를 활용하여 함수를 객체화를 하는 방식
- this 키워드로 선언된 변수 혹은 메서드가 존재한다.
- 확장이 가능하다.
- 객체생성자함수는 함수명 표기시 파스칼표기법으로 표기한다.
기본형 :
function 함수명 (매개변수1, 매개변수2){
this.속성명 = 값;
this.함수명 = function(){
<!-- 코드 -->
}
}
var 참조변수(인스턴스 네임) = new 함수명();
1. 함수 선언 후 new 연산자로 객체화 해보기
- myFn과 myFn2는 다른 주소값을 가지고있다.
<script type="text/javascript">
//1. 함수선언
function MyFn(){
}
//2. 함수를 객체화 - 객체형태로 변환
var myFn = new MyFn();
console.log(myFn);
var myFn2 = new MyFn();
console.log(myFn);
</script>
<- 결과
2. 내부변수선언 this와 var 키워드의 차이점
- 변수명의 이름이 같더라도 서로 다른 변수이다.- this키워드로 선언된 변수를 내부에서 접근할 경우
this 키워드로 선언된 변수 혹은 메서드는 this 키워드 활용하여 접근한다.
function MyFn2(){
var userName = '홍길동'; //내부변수
this.userName = '이순신'; //외부에서 접근이 가능한 변수
}var myFn3 = new MyFn2();객체화 되었으므로 멤버에 접근이 가능하다.
즉 this 키워드로 선언된 내부의 변수 혹은 메서드 외부에서 접근할 수 있는 멤버로 변환된다.
console.log(myFn3);
<- 결과
console.log(myFn3.userName);
<-결과
3. 접근 불가능한 내부변수(지역변수) 메서드 활용하여 접근하기
function MyFn3(){
//정보은닉(데이터 보호) 가능하다.
var userName; //var 키워드로 선언된 변수는 외부에서 접근 불가능하다.
this.userName;//속성, 필드, 프로퍼티 (!!)
//this 키워드 활용하여 변수선언하고 익명함수 대입할 경우 외부에서 접근 가능한 메서드이다.
this.setUserName = function(name){
//지역변수는 this 키워드 없이 내부에서 접근 가능
userName = name;
//this 키워드로 선언된 변수는 this 키워드 활용하여 접근한다.
this.userName = name;
}
this.getUserName = function(){
return userName;
}
}
var myFn4 = new MyFn3();
1)
console.log(myFn4);
<- 결과
2)
myFn4.setUserName('유관순');
console.log(myFn4.getUserName());결과 : 유관순
3)
this.userName = name 으로 지정 후
this.userName 에 저장된 값을 출력했다.
console.log(myFn4.userName);결과 : 유관순
3-1. 객체 생성자 함수를 개체화하지 않고 실행해보기.
- 일반 함수처럼 함수를 실행할 경우 return 표기 없으므로 undefined 결괏값이 나온다.
즉 new 연산자가 없을 경우 객체화 되지 않고 일반함수실행처리 실행된다.
var myFn5 = MyFn3();
console.log(myFn5);결과 : undefined
| 함수 선언시 객체 생성자 함수 -> 객체화시 멤버을 생성해야 하므로 this 키워드 활용 일반 함수 -> 객체화가 아닌 함수 실행이므로 멤버생성에 관련된 this 키워드 불필요 객체 생성자 함수 혹은 일반함수 활용 용도를 파악하고 내부 구조를 잡아사용 할 것. |
4. 객체화시 인자 받아 객체화하기
function MyFn4(name){
this.userName = name;
}
//객체회시에 인수를 넣어 객체화 할 수 있다.
var myFn6 = new MyFn4('홍길동');
console.log(myFn6);
<- 결과
5. 객체와 객체생성자 함수 차이
1)
동일한 객체 구조를 갖도록 하기 위해서는 구조 전체 복사해서 사용한다.
구조 복사 후 데이타 수정
var user01 = {
userName : '홍길동',
userAge : 20
}
var user02 = {
userName : '이순신',
userAge : 30
}
var user03 = {
userName : '고길동',
userAge : 25
}
console.log(user01, user02, user03);
2)
객체 생성자 함수를 개체화했을 경우 동일한 구조의 다른 데이타를 갖도록 할 수 있다.
또한 정보 은닉이 가능하다.
function UserInfo(name, age){
this.userName = name;
this.userAge = age;
}
var user04 = new UserInfo('홍길동', 20);
var user05 = new UserInfo('이순신', 30);
var user06 = new UserInfo('고길동', 25);
//객체 생성자 함수를 개체화했을 경우 동일한 구조의 다른 데이타를 갖도록 할 수 있다.
//또한 정보 은닉이 가능하다.
console.log(user04, user05, user06);1. 객체 생성자 함수 실습
MemberInfo 라는 객체 생성자 함수는 아래 구조의 회원의 정보를 담아야 한다.
또한 회원 정보는 직접적으로 프로퍼티에 접근이 불가능하며 메서드를 통해서 접근과 수정이 가능해야한다.
아래의 구조를 확인하고 MemberInfo 를 완성하여라.
구조 : 이름, 나이, 성별, 전화번호
<script type="text/javascript">
function MemberInfo(name, age, gender, phone){
//객체화시 외부 접근이 불가능.
var userName;
var userAge;
var userGender;
var userPhone;
//this 키워드는 외부 접근이 가능.
this.setUserName = function(name){
UserName = name;
}
this.getUserName = function(){
return UserName;
}
this.setuserAge = function(age){
userAge = age;
}
this.getuserAge = function(){
return userAge;
}
this.setuserGender = function(gender){
userAge = gender;
}
this.getuserGender = function(){
return userGender;
}
this.setuserPhone = function(phone){
userAge = gender;
}
this.getuserPhone = function(){
return userPhone;
}
}
</script>
2. 객체 생성자 함수 실습
GuGu 라는 생성자 함수가 있다. 이 함수는 객체화시 숫자형 인수 1개를 받아 객체화가 되며,
print라는 메서드를 실행시 객체화시 받은 구구단이 출력되고
sum이라는 메서드를 실행시 개체화시 받은 숫자의 합산값을 리턴한다.
위 설명대로 생성자 함수를 구현하고 print 메서드와 sum 메서드를 실행하여라.
<script type="text/javascript">
function GuGu(n){
this.print = function(){
for(var i=1; i<10; i++){
console.log(n + 'x' + i +'=' + (n * i));
}
}
this.sum = function(){
var sum = 0;
for(var i=1; i<10; i++){
sum+=i*n;
}
return sum;
}
}
var gugu = new GuGu(5);
gugu.print();
console.log(gugu.print);
var sum = gugu.sum();
console.log(sum);
</script>