JavaScript 기초 - 객체, 클래스

1. 객체

01. 객체A

: 함수, 클래스(틀) => 객체, 개체, object

- 생성자 함수로 객체 만들기

• function 틀(){} => new 틀()

//생성자 함수
function A (){}
const a = new A();
console.log(a, typeof a); //A {} object
console.log(A()); //undifined

//생성하면서 데이터 넣기
function B(name,age){
    console.log(name,age);
}
const b = new B(); //undifined undifined
const c = new B('Mark',37); //Mark 37
console.log(B()); //undifined undifined  -> return 값이 없어서 undifined

 

- 객체에 속성 추가하기

//값을 속성으로 넣기
function A(){ //생성자 함수로 사용할 예정
    this.name = 'Mark';
}
const a = new A(); 
console.log(a); //{name:'Mark}

//함수를 속성으로 넣기
function B(){
    this.hello = function(){
        console.log('hello');
    }
}
new B().hello(); //hello출력

 

 

02. 객체B

- Object로 객체 만들기 : new Object()

const a = new Object();
console.log(a,typeof a); //object형

const b = new Object(true);
console.log(b, typeof b); //object형

const c = new Object({name: 'Mark'});
console.log(c, typeof c); //object형

 

- 프로토타입 체인

function Person(name,age){
    this.name = name;
    this.age = age;
    // this.hello = function(){
    //     console.log('hello',this.name,this.age);
    // };
}

//추가
Person.prototype.hello = function(){
    console.log('hello', this.name, this.age);
};

const p = new Person('Mark',37); 
p.hello(); //hello Mark 37 출력

//작성하지 않은 함수들이 정의되어있음을 알 수 있음
console.log(p.toString()); //object Object라고 출력
console.log(Person.prototype);
console.log(Person.prototype.toString);
console.log(Person.prototype.constructor); //함수 자체를 의미
console.log(Person.prototype.hello); //undifined, prototype은 property보다 세부적인것이라..

console.log(Object.prototype); //{}
console.log(Object.prototype.toSTring); // hello 함수 의미
console.log(Object.prototype.constructor); // 객체의 생성자 함수

console.log(p instanceof Person); //true
console.log(p instanceof Object); //true

 

-prototype 생활코딩 보충 강의

prototype은 일종의 정보를 담는 특수한 property다.

prototpye에는 어떠한 객체가 정의되어 있다.

youtu.be/yXnbvyl04V4

 

 

03. 객체C

- 프로토타입을 사용한 객체 확장

function Person(){};

Person.prototype.hello = function(){ //부모
    console.log('hello');
};

function Korean(region){ //자식
    this.region = region;
    this.where = function(){
        console.log('where', this.region);
    };
};

Korean.prototye = Person.prototype; //상속

const k = new Korean('Seoul');

k.hello(); //k.hello is not a function
k.where();

console.log(k instanceof Korean);
console.log(k instanceof Person);
console.log(k instanceof Object);

 

- 객체 리터럴

const a = {};
console.log(a, typeof a);

const b = { name: 'Mark'};
console.log(b, typeof b);

const c = { 
    name: 'Mark', 
    hello1(){
        console.log('hello1',this);
    }, 
    hello2: function(){
        console.log('hello2', this);
    },
    hello3: () => {
        console.log('hello3', this);
    },
};

c.hello1();
c.hello2();
c.hello3();

 

 

04. 객체D

- 표준 내장 객체 : Object, new Function 등등

// 표준 내장 객체 : Array
const a = new Array('red','black','white');
console.log(a, typeof a);
console.log(a instanceof Array);
console.log(a instanceof Object);

const b = ['red','green','yellow'];
console.log(b, typeof b);
console.log(b instanceof Array);
console.log(b instanceof Object);

console.log(b.slice(0,1));
console.log(Array.prototype.slice, Object.prototype.slice); //Function, undefined --> Array에만 있다

 

---

2. 클래스

01. 클래스A

: 객체를 만들 수 있는 새로운 방법

//선언적 방식
class A {};
console.log(new A());

//class 표현식을 변수에 할당
const B = class{};
console.log(new B());

//선언적 방식이지만 호이스팅은 일어나지 않는다.
new C();
class C {};

 

- 생성자 : constructor 

class A {}
console.log(new A());

class B{
    constructor(){
        console.log('constructor');
    };
};
console.log(new B());

class C{
    constructor(name,age){
        console.log('constructor',name,age);
    }
};
console.log(new C('Mark',37));

 

 

02. 클래스B

- 멤버 변수 (객체의 프로퍼티)

//멤버 변수
class A{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
}
console.log('Mark',37); //Mark 37


//class field는 런타임 확인
class B{
    name;
    age;
}
console.log(new B()); //{name: undefined, age: undefined}

class C {
    name = 'no name';
    age = 0;
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
}
console.log(new C('Mark',37)); // {name: 'Mark', age: 37}

 

- 멤버 함수

//멤버 함수
class A{
    hello1(){
        console.log('hello1',this);
    }
    hello2 = () => {
        console.log('hello2',this);
    }
}

new A().hello1(); //hello1 A { hello2: [Function: hello2] }
new A().hello2(); //hello2 A { hello2: [Function: hello2] }

//
class B{
    name = 'Mark';
    hello(){
        console.log('hello',this.name);
    }
}
new B().hello(); //hello Mark

 

 

03. 클래스C

- get, set 

//set, get
class A{
    _name = 'no name';

    get name(){
        return this._name + '@@@';
    }
    set name(value){
        this._name = value + '!!!';
    }
}
const a = new A();
console.log(a); //A { _name: 'no name' }
a.name = 'Mark';
console.log(a); //A { _name: 'Mark!!!' }
console.log(a.name); //Mark!!!@@@
console.log(a._name); //Mark!!!

- read only

//readonly
class B{
    _name = 'no name';

    get name(){
        return this._name + '@@@';
    }
}
const b = new B();
console.log(b); //B { _name: 'no name' }
B.name = 'Mark';
console.log(b); //B { _name: 'no name' } --> set함수가 없어서

 

- static 변수, 함수 : 객체가 아니고, 클래스의 변수와 함수

class A{
    static age = 37;
    static hello(){
        console.log(A.age); //A는 클래스의 변수
    }
}
console.log(A, A.age); //[class A] { age: 37 } 37
A.hello(); //37

class B{
    age = 37;
    static hello(){
        console.log(this.age);
    }
}
console.log(B,B.age); //[class B] undefined 
B.hello(); //undefined
//new B().hello(); //오류

class C{
    static name = '이 클래스의 이름은 C가 아니다.';
}
console.log(C); //[class 이 클래스의 이름은 C가 아니다.] { name: '이 클래스의 이름은 C가 아니다.' }

 

 

04. 클래스D

- extends : 클래스 상속 기본

class Parent{
    name = 'Lee';

    hello(){
        console.log('hello',this.name);
    }
}
class Child extends Parent{

}
const p = new Parent();
const c = new Child();
console.log(p,c); //Parent { name: 'Lee' } Child { name: 'Lee' }

c.hello(); //hello Lee 
c.name = 'Anna';
c.hello(); //hello Anna

 

- override : 클래스 상속 멤버 변수 및 함수 오버라이딩, 추가

class Parent{
    name = 'Lee';
    hello(){
        console.log('hello',this.name);
    }
}

class Child extends Parent{
    age = 37;

    hello(){
        console.log('hello',this.name, this.age);
    }
}

const p = new Parent();
const c = new Child();

console.log(p,c); //Parent { name: 'Lee' } Child { name: 'Lee', age: 37 }
c.hello(); //hello Lee 37
c.name = 'Anna';
c.hello(); //hello Anna 37

 

-super :클래스의 상속 생성자 함수 변경

class Parent{
    name;
    constructor(name){
        this.name = name;
    }

    hello(){
        console.log('hello',this.name);
    }
}

class Child extends Parent{
    age;
    constructor(name,age){
        super(name);
        this.age = age;
    }

    hello(){
        console.log('hello',this.name,this.age);
    }
}

const p = new Parent('Mark');
const c = new Child('Mark',37);

console.log(p,c); //Parent { name: 'Mark' } Child { name: 'Mark', age: 37 }
c.hello(); //hello Mark 37

 

-static : 클래스의 상속 static 상속

class Parent{
    static age =37;
    
}

class Child extends Parent{}

console.log(Parent.age,Child.age); //37 37

 

 

부모        →        부모

Class                Instance

 

  ↓                      ↓

 

자식        →       자식

Class                Instance