function person(){
this.eyes=2;
this.nose=1;
}
여기서 this는 항상 자기자신을 가리킨다
dir이 뭘까??
-----3교시--------
우와 꿀잠
index.html 파일에 prototype.js 파일 연결하기
index.html
<head>
<script type="text/javascript" src="/prototype">
</head>
해주면 연결 끝.
자바 스크립트가 객체지향이 아니라서 완벽히 상속할 순 없지만 상속 비슷한걸 할 수 있다고 함
prototype link : 참고 해라. 타고타고타고 계속 참고하다가 참고할게 없을때까지 참고해라!
let a = {number1} ...? 어쩌구 저쩌구,,
-------------------4교시------------------------
let user = {
name : 'ingoo'
}
콘솔창에 user라고 찍어보면 ingoo가 나옴
const 아반떼 ={
색상:'블루',
휠:'4',
네비게이션:true,
drive(){
console.log('시동');
}
}
const 소나타 = {
색상:'레드',
휠:'4',
네비게이션:false,
drive(){
console.log('시동');
}
}
const 제네시스 = {
색상:'검정',
휠:'4',
네비게이션:true,
drive(){
console.log('시동');
}
}
//위에처럼 쓰면 겹치는 내용이 많고 수정시 불리하게 되어있음.
//('시동'을 바꾸려면 일일히 객체 하나하나 바꿔야 함)
//proto를 이용해서 아래와같이 고쳐주기
const 자동차 = {
휠:'4',
drive(){
console.log("시동");
}
}
const 아반떼 ={
색상:'블루',
네비게이션:true,
}
const 소나타 = {
색상:'레드',
네비게이션:false,
}
const 제네시스 = {
휠:'4',
drive(){
console.log('시동');
}
}
아반떼.__proto__=자동차;
소나타.__proto__=자동차;
제네시스.__proto__=자동차;
//이상태에서 아반떼를 쳐보면 아반떼에는 휠도 없고 drive도 없는데
//쳐보면 나옴. 왜냐면 소나타나 제네시스에 있는걸 상속 받아와서 뜨는것임
//검색한게 본인한테 없을시에 proto를 참조한다
//이제 proto type을 이용해보자
const 자동차 = function(컬러,네비게이션){
this.컬러 = 컬러;
this.네비게이션 = 네비게이션
}
자동차.prototype.휠 = 4;
자동차.prototype.drive=function(){
console.log('drive');
}
let 아반떼 = new 자동차 ('블루',true);
let 소나타 = new 자동차 ('레드',false);
let 제네시스 = new 자동차 ('검정',true);
결과는 다음과 같다.
> 화살표 옆에 '아반떼','소나타'를 작성하자 위와 같은 정보가 뜬 것!
-----------------------5교시--------------------------
4교시에서 설명해주신 부분 다시 복습~
위에 쓴 부분을 쉽고 짧게 표현
function 자동차(색상,네비게이션){
this.색상 = 색상;
this.네비게이션 = 네비게이션;
this.휠='4';
this.드라이브=function(){
console.log('시동');
}
}
let 아반떼 = new 자동차('블루',true);
let 소나타 = new 자동차('레드',false);
let 제네시스 = new 자동차('검정',true);
해주면
짜잔.
//여기서 프로토도 활용해보면~
function 자동차(색상,네비게이션){
this.색상 = 색상;
this.네비게이션 = 네비게이션;
this.휠='4';
this.드라이브=function(){
console.log('시동');
}
}
let 아반떼 = new 자동차('블루',true);
let 소나타 = new 자동차('레드',false);
let 제네시스 = new 자동차('검정',true);
//여기까지는 위에 하던거 그대로인데 여기에서 +
아반떼.__proto__=부품;
let 부품 = {
휠:'4',
드라이브:function(){
console.log('시동');
}
}
//let 부품 이건 맨위로 올려 써주기 (맨위로 안올려주면 작동 안됨)
//해주고 콘솔창에서 아반떼써보면 프로토에 휠이랑 드라이브 나옴
Q. 정성진님 질문-
new 자동차.__proto__=부품; 이렇게는 왜 작동이 안되는건가요?
A. 못들음.. 뭐라고 하신거지? 근데 화면에는 이런식으로 찍혀있음
원래 휠=4; 였는데
소나타.__proto__.휠 = 3; 으로 바꿔주자, 소나타와 아반떼와 제네시스에 있는 모든 휠 값이 3으로 바뀌었다.
이말인 즉,
처음에 설정해뒀던 자동차.prototype.휠 =4; 가 의미하는 것은
아반떼와 소나타와 제네시스의 프로토 타입에다가 휠=4; 를 저장해놓은 것이 아니라
어딘가에다가 휠이라는것이 4라는 내용을 한번만 저장해 놨고,
아반떼와 소나타와 제네시스는 그것은 참조만 한것이라는 뜻이다.
---------------------------------------6교시---------------------------------------------
* class 생성하기
부모의 우선순위가 먼저, 다음이 자식
이렇게 똑같이 만들어오기 과제래.....
이건 너무 어렵다고 그냥 콘솔창에 아반떼 쳤을때 위데 메소드 실행되면 된다고 하심
이렇게
오늘 수업은 여기서 끝인가?