내용 많으니 나눠야 겠다.... 아 언제 자...
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 |