내용 많으니 나눠야 겠다.... 아 언제 자...

2.생성자 함수 사용

function 생성자함수명( ){
this를 사용해서 속성 설정
}

보통 일반함수와 구분하기위해 함수명을 대문자로 시작
return문을 안 쓴다
생성자 함수에는 주로 속성만 정의한다
생성자 함수 안에 쓰인 this는 그냥 사용 시 window객체로 인식되어 받은 인자들이 매개변수로써 이용이 안됨!! 그래서 밑에 처럼 인스턴스화를 해야 this가 함수의 객체로 인식됨!!
var 객체명 = new 생성자함수명( );
함수는 객체명.prototype.함수명=function(){ }로 별도로 정의한 후 추가시킨다 !
(이게 나름 오버라딩하는거!!!)
같은 구조의 객체를 계속해서 찍어 낼 수 있다!! 붕어빵처럼 !! 붕어빵 먹고싶다

아띠 어려워 직접 해봐

객체 생성하기(생성자 안에는 속성만 정의 !!)
(자바의 멤버변수??)

 function Human(username,years){
   //Human의 객체 속성, 여기 안에는 속성만 !!
   this.username=username;
   this.years=years;
   this.birthDate = new Date();
       console.log(this);
 };


함수 추가하기
함수는 생성자 밖에서 정의하고 추가 시키는구나~
생성자 함수.prototype.함수명 = function(){ }; 자바의 인스턴스형 메소드와 같다.
어? 함수명을 여기서 정의하는거나 마찬가지잖앙 ?

 // 함수 추가하기
 Human.prototype.print=function(){
      console.log('이름:%s,나이:%s,생일:%s',
                   this.username,this.years,this.birthDate
       );
};


이번엔 클래스 메소드 추가요
클래스 메소드:자바의 정적메소드와 같음, this키워드 안 돼요
생성자함수.함수명 = function( ){ };

Human.inform=function(legs,arms){
     console.log(this.username);  // this쓰면 undefined 나옴
     console.log('인간은 포유류다. 다리는 %s 개, 팔은 %s 개 이다.',legs,arms);
};
//클래스메소드 호출  이건 짧으니  먼저 걍 호출 하고 털자
    Human.inform(2,2);   
    //출력 =>  
    //undefined 
    //인간은 포유류. 다리는 2 개, 팔은 2 개 이다. 출력


드디어 호출이다아아!!!

Human('가길동',20)  // 함수 호출하면 this는 window 객체가 되어요.. 
//(가길동 20 이 안나오니까 this를 쓰려면 밑에처럼)

//new 생성자 함수 객체화(인스턴스화) 하면 이때 this는 객체화 된 human의 객체가 되는거..이래야 제대로 나옴 !
var human = new Human('가길동', 20);
console.log(typeof human);

console.log(human);
console.log(JSON.stringify(human));  // { } 객체로 만든거랑 동일동일동일

//속성 값 읽기 
console.log(["속성 값 읽기"])
console.log(human.username)
console.log(human.years)
console.log(human["birthDate"])
  human.print();   // 오 이렇게도 호출 되네 !


끝이다 !!!! 인 줄 알았지 ?
하...

instanceof 연산자 : 해당 객체가 어떤 생성자 함수 타입인지 알아내는 연산자
이거 this가 어떤 객체인지 알아야 헷깔리지 않게 쓸 수 있으니 필요한 연산자 인 듯 !
자스 모든객체는 object 상속 받았다 !

 var array = new Array(10);
   console.log(array instanceof Array);
   console.log(array instanceof Object);
   console.log(array instanceof String);

진짜 끝 !! 안녕 이제 잘거야 바이

'학원 > JS' 카테고리의 다른 글

11/2 34-8 [JS] DOM  (2) 2022.11.03
11/2 34-1 [JS] Function_4(상속)  (0) 2022.11.02
11/1 33-6 [JS] Function_4(객체 만들기 -중괄호사용)  (1) 2022.11.02
11/1 33-5 [JS] Function_3  (0) 2022.11.01
11/1 33-5 [JS] Function_2  (1) 2022.11.01

+ Recent posts