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);
--------------------------------------------- 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...........
함수를 만들면 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 복습하면서 분석 해봤더니 조금 이해되었다.