본문 바로가기

블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

[34일차] 20210429 proto prototype Object etc

반응형
function Person(){
    this.eyes=2;
    this.nose=1;
}

//새로운 객체 생성 
let kim = new Person();
let park = new Person();


console.log(kim.eyes);


 

this = Person 

this = 자기 자신 

 

Function과 Object의 차이 ? 

JavaScript 한해서 차이는 없다. 객체도 결국 함수이다. 

 

console.log(kim.eyes) //2 -> 이렇게 된 이유

Person Function 이 kim , park 에 적용됨 

실질적으로 변수 4개 만든 것

 

 

 

kim이라는 변수에 eyes라는 것을 가져온다. 

function Person(){
    this.eyes=2;
    this.nose=1;
}

//새로운 객체 생성 
let kim = new Person();
let part = new Person();


console.log(kim.eyes);
console.log(kim.nose);
console.log(park.nose);
console.log(park.nose);


park.eyes=4;
console.log('--------------');

console.log(kim.eyes);
console.log(kim.nose);
console.log(park.nose);
console.log(park.nose);

 

각각 컨트롤이 가능하다. 

 

Person() 의 값을 둘다 공유해서 가능하다.  (JS에서만! 객체지향에서는 있을 수 없는일) 

 

Object : 

 

Function : 

 

function Person(){
    this.eyes=2;
    this.nose=1;
}

//새로운 객체 생성 
let kim = new Person();
let part = new Person();

const Person2 = {
    eyes:2,
    nose:1,
}

console.log(Person2); //똑같이 만들어놓음

let kim2 = new Person2();
let park2 = new Person2();

 

 

 

Function과 Object는 같은데 위와 같이 조금다름 -> 같게 만들 수 있음. 

 

console.log(proto 를 잘 분석해봐 ) 두개가 다름. 

 

 

 

 

-> 좀 있다가 해주실 예쩡

 

 

우리가 사용하는 모든 함수는 proto 안에 들어가 있음/ 저 property를 사용할 수 있음. 

 

요렇게

 

__proto__에서 hasOwnPro...를 사용한것 

 

function Person(){
    this.eyes=2;
    this.nose=1;
}

//새로운 객체 생성 
let kim = new Person();
let part = new Person();

const Person2 = {
    constructor(){
        
    },
    eyes:2,
    nose:1,
}

console.log(Person2); //똑같이 만들어놓음

let kim2 = new Person2();
let park2 = new Person2();



// console.log(kim.eyes);
// console.log(kim.nose);
// console.log(park.nose);
// console.log(park.nose);


// park.eyes=4;
// console.log('--------------');

// console.log(kim.eyes);
// console.log(kim.nose);
// console.log(park.nose);
// console.log(park.nose);

------------이해 가 안감 ---------------

 

 

 

 

이번엔 

 

__proto__ 

prototype

 

function Person(){}

Person.prototype.eys = 2;
Person.prototype.nose = 1;

let kim = new Person();
let park = new Person();


prototype에가다 값을 넣은 것 같지만 console.log에 kim을 호출하면 내용이 안나와 근데 kim.eyes를 치면 숫자가 나와. 이게 왜 될까 

d안에 세모 눌러보면 __proto__ 안에 값이 존재한다. 

 

Person{} 자체는 값이 없지만 __proto__안에는 값이 있다. 

 

자기 자신에서 값을 먼저 찾는다 -> 없으면 -> 하위에 있는 __proto__ 에 가서 값이 있으면 쓰고 없으면 -> 그 다음 __proto__:로 넘어감 (prototype)

 

굳이 왜 prototype을 쓸까

 

function Person(){}

Person.prototype.eys = 2;
Person.prototype.nose = 1;

let kim = new Person();
let park = new Person();


console.log(kim.eyes);
console.log(kim.noes);
console.log(park.eyes);
console.log(park.noes);

 

function Person(){}

Person.prototype.eys = 2;
Person.prototype.nose = 1;

let kim = new Person();
let park = new Person();

park.__proto__.eyes = 4;

console.log(kim.eyes);
console.log(kim.noes);
console.log(park.eyes);
console.log(park.noes);

 

 

 

 

park만 변경했는데 kim, park 둘 다 변경이 된다. 

 

kim, park 이 Person.prototype.eyes=2, 1; 을 참조하게 됨 (아~ 까는 Person.proto가 kim, park에 영향) 이번엔 반대로 바라보게 됨 

 

음..

 

 

 

 

 

이것을 일컫는 말 

prototype link -> __proto__

proto type Object  -> prototype

 

함수를 만들면 무조건 proto라는게 생성됨 JS에서 

잘 알수록 클래스같은걸 사용할 수 있음. 

 

 

 

-------------------------------------------------------------------------------------------------------------------

 

 

 

혼자 연습해보기 

 

function Person(){} -> this -본인을 말함. kim, park 에 적용되서 kim.eyes=2, kim.nose=1 요렇게 된듯 

function Person(){
    this.eyes=2;
    this.nose=1;
}

let kim = new Person();
let park = new Person();

console.log(kim);
console.log(park);
console.log(kim.eyes);  //2
console.log(kim.nose);   //1
console.log(park.eyes);   //2
console.log(park.nose);   //1

console.log(kim) /(park) 뭔가 엄청 많이 나옴 하나하나 뜯어보기 

 

 

 

 

function Person(){
    this.eyes=2;
    this.nose=1;
}

let kim = new Person();
let park = new Person();

console.log(kim);
console.log(park);
console.log(kim.eyes);
console.log(kim.nose);
console.log(park.eyes);
console.log(park.nose);

kim.nose=10;
park.eyes=4;
console.log('---------------------');


console.log(kim.eyes);
console.log(kim.nose);
console.log(park.eyes);
console.log(park.nose);

 

 

 

kim.nose = 10;  park.eyes=4; 로 속성 변경  // 각각 컨트롤이 가능하다.  (각각 값이 들어갔기 때문에)

 

 

-------------------------------------------------------------------------------------------------------------------

 

 

아래처럼 다르게 만들면 kim, park 내용 자체는 비어있다. __proto__ 안에 들어가 있음. 

function Person(){}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

let kim = new Person();
let park = new Person();

console.log(kim);
console.log(park);

console.log(kim.eyes);
console.log(kim.nose);
console.log(park.eyes);
console.log(park.nose);

 

 

function Person(){}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

let kim = new Person();
let park = new Person();

console.log(kim);
console.log(park);

console.log(kim.eyes);
console.log(kim.nose);
console.log(park.eyes);
console.log(park.nose);

kim.nose=10;
park.eyes=4;
console.log('-----------------');

console.log(kim.eyes);
console.log(kim.nose);
console.log(park.eyes);
console.log(park.nose);

 

 

 

 

 

 

www.nextree.co.kr/p7323/

 

JavaScript : 프로토타입(prototype) 이해

JavaScript는 클래스라는 개념이 없습니다. 그래서 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어입니다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이

www.nextree.co.kr

 

 

 

--------------------------------------------- 2교시 다시 하기 ----------------------------------------------

 

console.log 창에 Object를 치면 

f 가 뜬다.

f 뜻 : function valueOf() -> 즉, 다 함수다. 

 

내장 객체인 Object를 출력해보면 ㅇ얘도 함수다. 

 

new = 생성자 

저 저 함수를 객체로 만들겠다 ~ 하는 뜻

 

function Person(){
    this.eyes =2;
    this.nose = 1;
}

let kim = new Person();
let park = new Person();


//new =생성자

console.log(kim.eyes);
//kim 이라는 변수에다 저 함수를 객체로 만들어서 넣었따. 
// kim = {eyes:2, nose:1}
console.log(kim.nose);
console.log(park.eyes);
console.log(park.nose);

new 라는 건 

// kim = {eyes:2, nose:1}

요렇게 

 

코드로 해석하면 

 

 

 

 

함수로 객체만들지 말고 바로 객체로

사용하면 어떨까 ? ? 

function Person(){
    this.eyes=2;
    this.nose=1;
}

const Person2={
    eyes:2,
    nose:1,
}

 

 

 

 

 

 

 

함수에서 객체로 변환하려면 new생성자 사용해야함. 

근데 객체는 이미 객체.. new 붙힐 수없음. (위에 내용 정정) 

 

 

new Person() -> 되는데 

new Person2() 은 안됨

 

 

 

-----------------------------------------------------------------------------------------------

 

 

prototype : ? 

 

이번에는 객체 생성방법을 다른 방법으로 

 

function Person(){}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

//이게 객체 생성 ㄱ ㄱ
let kim = new Person();
let park = new Person();
// 각각 함수에 넣어준 상태 .



 

 

 

 

이 상태에서 값이 __proto__ 안에 있음. 

__proto__는 출력할 땐 안나와 js 안에서 돌아가는 소스일뿐

 

 

이제 요 안에서 수정을 해보기 

Park.eyes 만 수정

 

 

-> kim 도 봐봐. kim.eyes 도 바뀌어 있음. 

 

 

kim, park 은 

constructor: f Person() 안에 있음. 안에 한번 봐봐

 

원리는....

kim 이라는 객체 안에서는 자기 자신이 값을 갖고 있지 않고 안에 있는 __proto__안에 두가지가 존재하는데 존재 이유는 constructor(생성자) 에 의해 만들어진 f 함수에 의에 값을 가져옴. 그것도 없으면

prototype 이라는 내용을 참조해서 꺼내옴. 

 

머선129...........

 

 

 

 

4번 : 자기 자신을 바라봄 

 

 

함수를 만들면 js 에서 2가지를 자동 생성해줌 

1. 함수 안에 있는 prototype 이라는 내용을 가진 아이

2. 함수 prototype에 대한 Object가 생성됨, 그 안에는 constructor 생기고 그 안에 __proto__라는게 생김 

3. prototype이 생성되면 Person Prototype Object에 영향을 주고 이로인해 생긴 constructor 는 자기 자신인 function Person(){}을 바라본다. 

* __proto__를 쓰는 이유

//왜 kim=nex Person() 이 연결되는지 알기 

new Person 이라는 함수를 객체로 만들었고 우리가 만든걸 kim에 넣은 상태

prototype object - 그림에 저 오른쪽 아래꺼 

prototype link - __proto__ 얘다. link는 proto다. 라고 이해하기 

 

kim이라는 변수에 person함수를 객체로 만들어 넣음. 그래서 아래처럼 dir 가 나옴. (그럼 person함수의 내용(prototype포함해서) 이 모두 객체로 변해서 넘어간 상태) 

__proto__ -> 모든 객체에 존재. 객체를 만들면 자동으로 생성됨. 

 

예시

kim 만 바꿔도 다 바뀌었던 이유

 

다 연결 되어 있대.

 

 

console.dir(Person) 쳐보면 

dir = directory 

 

 

처음 보면 어렵지만 두고두고 곱씹으면 ㅇ언젠간 이해 되겟지...

 

 

----------------------------------------------------------첩첩산중이다-----------------------------------------------------

 

 

let foo1= {name:'foo'};

function foo2(){
    this.name='foo';
}

foo3 =function (){
 this.name='food';
}

foo4 = ()=>{
    this.name='foo';
}


console.log(foo1);
console.log(foo2);
console.log(foo3);
console.log(foo4);



//arrow 익명함수는 __proto__ 가 없음 
//

 

 

 

 

 

function foo(){}   //함수 하나에,1. prototype / 2.prototype Object( constructor, proto)생김
foo.prototype.txt = "hello world";  //prototype 객체에는 마음대로 속성값을  (property) 추가, 삭제 가능  
let Obj = new foo(); 

 

그 내용을 foo 에 넣은 상태

let Obj = new foo(); => new 안에 있는 객체를 만들어 Obj에 넣음 

new foo(); 안에 있는 속성 객체를 그대로 Obj에 넣음 

Obj는 text라는 값을 가져올 수 있게 되었다. 

 

 

function foo(){}   //함수 하나에,1. prototype / 2.prototype Object( constructor, proto)생김
foo.prototype.txt = "hello world";  //prototype 객체에는 마음대로 속성값을  (property) 추가, 삭제 가능  
let Obj = new foo(); 

console.dir(Obj.txt);
console.dir(Obj.constructor);
console.dir(foo);
console.dir(foo.prototype);
console.log(Obj);
console.log(Obj.__proto__);

내용 확인해보기 

 

 

---------------------------------------------------------------LINK------------------------------------------

 

 

 

let x = {number1:1}
let y = {number2:2}

let z ={
    'x':x,
    'y':y
}

 

요걸 심플하게 사용할 수 잇대 ↓↓↓↓

 

 

let x = {number1:1}
let y = {number2:2}

// let z ={
//     'x':x,
//     'y':y
// }


let z ={};
x.__proto__=y;
z.__proto__=x;

console.log(z.number1); //해보면 
console.log(z.number2)


정확한 상속은 아니지만 비슷하게 할 수 있따. 

x는 y라는 값을 가져온 것 

x는 y를 담고 있는 상태에서 z에 넣는 것 

 

 

 

z는x를 먼저 가져오고

개체간 상속 . 

z.number2 = 4; 

ㅇ없을 때까지 참조하다가 정말 없으면 undefined 가 됨. z에다가 number2 r값을 부여하는 것 

 

 

let x = {number1:1}
let y = {number2:2}

// let z ={
//     'x':x,
//     'y':y
// }


let z ={};
x.__proto__=y;
z.__proto__=x;

console.log(z.number1); //해보면 
console.log(z.number2)

// z.number2 = 4; 
y.number2 = 4; 

y.number1 를 추가하면 

참고하는 값이 바뀜 

 

prototype.link 라는 것은 내가 값이 없을 때 proto를 참조한다. 그 안에 proto 가 없을 때까지 계속 참조한다. 

없을 때 끝남. 

 

정말로 없을 때 무슨 값이 나올지 보자

console.log(z.number3) 해보면 undefined

 

 

 

 

--------------------------------------------- ㄷ ㅏ 쉬 --------------------------------------------

 

 

 

 

여기서 console.log(c.number1) 나오도록 

console.log(c.number2) 나오게 만들어보기 

let a = {number1:1}
let b = {number2:2}
let c = {number3:3}


c.__proto__=a;


console.log(c.number1); //

정답을 알려줘

 

let a = {number1:1}
let b = {number2:2}
let c = {number3:3}

a.__proto__=b;
c.__proto__=a;


console.log(c.number2); //

이런 방법으로 짜여진 코드들 이 굉장히 많음 (상속) 

이 방법 연습 많이 해야함. 

효율적인 것보다 훈련때문에 요렇게 하는 중. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

user 안에 있는 proto 객체 안에 있는 많은 함수들을 사용할 수 있따. 

 

 

 

name  = property 값 

 

let user = { 
    name: "ingoo",
    hasOwnProperty:function(){
        console.log('Hello!');
    }
}

 

우리가 쓴게 먼저 나오는 이유 : 자기 자신부터 참조를 함.

자기가 가지고 있는게 짱이다. 없을 경우에만 proto 안에서 내려가며 찾고 - > 그래도 없으면 undefined..

 

 

 

const 아반떼 = {
    색상:'블루',
    휠:'4',
    네비게이션:true,
    drive(){
        console.log('시동');
    }
}


const 소나타 = {
    색상:'레드',
    휠:'4',
    네비게이션:false, //네비게이션없음
    drive(){
        console.log('시동');
    }
}


const 제네시스 = {
    색상:'검정',
    휠:'4',
    네비게이션:true,
    drive(){
        console.log('시동');
    }
}

 

객체 안에 함수를 넣을 수 있다. 새로 배움

drive:function(){} 와 같음. 

 

위에 쓴거 보면 휠, drive(){} 겹치는 내용 2가지가 있음. 

 

제네시스.색상  // 검정

제네시스.drive() //시동

 

 

-> 코드를 줄일 순 없을까,,

 

오늘 배웠떤 proto를 가지고 묶어보기 

 

 

 


const 아반떼 = {
    색상:'블루',
    네비게이션:true,
}


const 소나타 = {
    색상:'레드',
    네비게이션:false, //네비게이션없음
}


const 제네시스 = {
    색상:'검정',
    네비게이션:true,
}


const 자동차 ={
    휠:'4',
    drive(){
        console.log('시동');
    }
}

아반떼.__proto__=자동차
소나타.__proto__=자동차;
제네시스.__proto__=자동차;

 

이렇게 깔끔하게 정리 가능

자기 자신 값은 2개뿐 -> drive() 찾을 때 자기 값이 없으니 아래로 내려가서 찾음 

자동차의 내용을 proto에 그대로 넣어줌 

 

이런식으로 상속의 개념을 이해할 수 잇다..

 

__proto__ 대체 넌 무엇이냐..

 

prototype link -> __proto__ 

like = 연결 

 

const 자동차 ={
    휠:'4',
    drive(){
        console.log('시동');
    }
}


const 아반떼 = {
    색상:'블루',
    네비게이션:true,
    __proto__:자동차
}


const 소나타 = {
    색상:'레드',
    네비게이션:false, //네비게이션없음
    __proto__:자동차
}


const 제네시스 = {
    색상:'검정',
    네비게이션:true,
    __proto__:자동차
}

 

 

 

 

일반 객체 사용하듯이 __proto__를 쓰면 된다. 사용법은 똒같다.

 

 

어렵다..

 

 

-------------이번에 똑같은 걸 할 껀데 prototype object -> prototype을 가지고 하는걸 해보기 -------------

 

 

 

const 자동차 = function (컬러, 네비게이션){
    this.컬러 = 컬러;
    this.네비게이션 = 네비게이션;
}

자동차.prototype.휠=4;
자동차.prototype.dride = function(){
    console.log('drive');
}
//함수를 만들엇으니 객체로 만들어서 원하는 변수값을 넣기 
let 아반떼 = new 자동차('블루', true);
let 소나타 = new 자동차('레드', false);
let 제네시스 = new 자동차 ('검정', true);

console.log(아반떼);
console.log(소나타);
console.log(제네시스);

 

 

 

 

-----------------------------------------------------------------------------------------------------------

 

 

 

function 자동차(){
    this.색상='블루';
    this.네비게이션=false;
    this.휠='4';
    this.drive=function(){
        console.log('시동')
    }
}

 

console.에

let 아반떼 = new 자동차();

let 소나타 = new 자동차();

let 제네시스 = new 자동차();

요렇게 하면 되는데 메모리에 안좋을 것 (같은 내용 반복)

 

this == 자동차 this.색상 -> 자동차.색상

 

 

 

 

function 자동차(색상, 네비게이션){
    this.색상=색상;
    this.네비게이션=네비게이션;
    this.휠='4';
    this.drive=function(){
        console.log('시동')
    }
}


let 아반떼 = new 자동차('블루', ture);

let 소나타 = new 자동차('레드', false);

let 제네시스 = new 자동차('검정', ture);


console 아반떼, 소나타, 제네시스 확인

 

 

공통부분 휠,drive 따로 빼서 객체로 만들기 

 

let 부품 = {
    휠:'4',
    drive:function(){
        console.log('시동')
    }
}

function 자동차(색상, 네비게이션){
    this.색상='색상';
    this.네비게이션=네비게이션;
}

let 아반떼 = new 자동차('블루', ture);
let 소나타 = new 자동차('레드', false);
let 제네시스 = new 자동차('검정', ture);

아반떼.__proto__=부품;

 

 

 

console.log쳐보기 

아반떼.drive() 

아반떼.휠 

 

let 부품 = {
    휠:'4',
    drive:function(){
        console.log('시동')
    }
}

function 자동차(색상, 네비게이션){
    this.색상='색상';
    this.네비게이션=네비게이션;
}

let 아반떼 = new 자동차('블루', ture);
let 소나타 = new 자동차('레드', false);
let 제네시스 = new 자동차('검정', ture);

아반떼.__proto__=부품;
소나타.__proto__=부품;
제네시스.__proto__=부품;

 

 

이렇게 메모리를 효율적으로 사용할 수 있음. 

 

 

-> proto 다 더해주기 귀찮으니 prototype 을 씀

 

let 부품 = {
    휠:'4',
    drive:function(){
        console.log('시동')
    }
}

function 자동차(색상, 네비게이션){
    this.색상='색상';
    this.네비게이션=네비게이션;
}

자동차.prototype.휠=4;
자동차.prototype.drive=function(){
    console.log(drive);
}

let 아반떼 = new 자동차('블루', ture);
let 소나타 = new 자동차('레드', false);
let 제네시스 = new 자동차('검정', ture);


 

 

 

아까와 결과값이 똑같음.

지금 방법이 더 좋음 100개 객체라면 100번 해야함(첫번째껀)

 

 

 

---------------------------------CLASS-----------------------------------

function User(name,age){
    this.nae=name;
    this.age=age;
    this.showName=function(){
        console.log(this.age);
    }
}

const gildong = new User('길동',20)

class User2{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        console.log(this.name);
    }
}
const dogoo = new User2('dogoo',20);



console.log check

 

function User(name,age){
    this.nae=name;
    this.age=age;
}

User.prototype.showName=function(){
    console.log(this.name); //this = User
}

const gildong = new User('길동',20)

class User2{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        console.log(this.name);
    }
}
const dogoo = new User2('dogoo',20);

 

 

클래스 구문은 JS에서 이런식으로 처리가 되고 있다. 

 

조금 다른 점 -> 두개다 new 를 빼고 해보면

console.log 길동 : undefined 

console.log dogoo = 오류

-> 실수하지 말아라 라는 느낌 

 

클래스는 new 꼭 써라~~~ 하는 거 (이거가 살짞 다른 점 ) 

 

 

 

 

---------------------------상속-----------------------------

 

class Car{
    constructor(color){
        this.color=color;
        this.wheels=4;
    }

    driver(){
        console.log('drive');
    }

    stop(){
        console.log('stop');
    }
}

class avante extends Car {
    
}

 

저 extends CAr 부분이 상속 한다. 부분

아반떼 안에 prototype을 넣는다. 

 

 

class Car{
    constructor(color){
        this.color=color;
        this.wheels=4;
    }

    driver(){
        console.log('drive');
    }

    stop(){
        console.log('stop');
    }
}

class avante extends Car {
    showName(){
        console.log('아반떼');
    }
}

 

함수만 만들어놓은 상태

객체로 만들기 (new 사용 )

 

  //부모 
class Car{
    constructor(color){   //생성자 -처음 인자값에 변수받을 수 있음 
        this.color=color;
        this.wheels=4;
    }

    driver(){
        console.log('drive');
    }

    stop(){
        console.log('stop');
    }
}

// 자식 
class avante extends Car {
    showName(){
        console.log('아반떼');
    }
}

const 아반떼 = new avante('blue');

 

 

 

중요한 부분 : extends  calss avante의 부모를 정해줌. ( Car) 

class avante extends Car 

        자식             부모 

 

 

console 에가다 아반떼.wheels 아반떼.driver()  아반떼.stop() 아반떼.showName() -본인이름나옴 -> 다 입력해보기 

이런식으로 상속을 받을 수 있음. 

 

 

 

-> 요 내용들을 prototype과 __proto__를 활용해서 똑같이 만들기

-  과 ㅈ ㅔ .

 

 

 

 

오늘 이해한 내용 1%

 

 

-> blckchainetc.tistory.com/80 복습하면서 분석 해봤더니 조금 이해되었다.

 

[34일차 복습 및 정리] node.js proto prototype 이란 ? __proto__ / Prototype Object 분석

오늘 공부한 내용 proto, prototype ???? 기억도 잘 나지 않는 ㄷ ㅏ...... 다시 보면서 하나하나 복습해보자...............  prototype JavaScript는 Class 라는 개념이 없다. 그래서 기존의 객체를 복사(Clon..

blckchainetc.tistory.com

 

 

 

 

 

 

반응형