클래스

SunnyMoon·2022년 7월 22일
0

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

  • 클래스를 만드는 방식
//선언적 방식

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', 27));

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

class A {
	constructor(name,age){
		this.name = name;
		this.age = age; 
		}
]

console.log(new A('mark',27));

// A{ name: 'mark' , age : 27} 출력

class B {
	name;
	age;
}

// this.name = name; 과 name; 은 같은것

console.log( new B ()); 
// 문법적인 오류가 발생 , console.log 출력이 안됌 
// node 12버젼 이상부터 오류가 안생김
// B{name:undefined , age : undefined} 
//지원하는 상황인지 늘 check해야한다 

class C {

	name:'no name';
	age : 0;

	constructor(name, age){
		this.name = name;
		this.age = age;
		}
//초기값이지만 constructor로 변수할당함
}

console.log (new C('mark',27));

// C {name : 'mark', age : 27} constructor을 통해서 새로 할당되었다

//멤버함수

class A {
	hello(){
		console.log('hello1',this);
		}
	hello2 = () => {
		console.log('hello2',this);
	};
}

new A().hello();
new A().hello2();
	
//
//멤버함수를 설정하는 방식
this라는 것은 A{ hello2: [function:hello2] }
						 A{ hello2: [function:hello2] }					

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

new B().hello();
// hello Mark 

get , set ( 게터, 세터 )

  • 다시한번 정리 필요
//get , set

class A {
	_name ='no name';
	get name() {
		retrun this._name + '@@@';
	}
	set name(value) {
		this._name = value + '!!!';
	}
}

const a = new A();
console.log(a);
// A { _name : 'no name'}
a.name = 'Mark';
//set함수가 불리우게 된다
//name이라는 set함수가 있기 때문이다
// 'Mark'가 value자리에 들어가  로 출력된다

console.log(a);
// A { _name : 'Mark!!!'}

console.log(a.name)
//get함수 호출
//mark !!! @@@@
console.log(a._name);
//mark!!!

_를 내부적으로 사용할때는 멤버변수로 나타난다.
get , set 외부에서 나타나는 퍼블릭한 접근 제어자

//readonly

static 변수, 함수

  • 객체가 아니고 클래스의 변수와 함수
class A {
	static age = 35;
	static hello( ) {
		console.log(A.age);
		//클래스 네임으로 부를 수 있음
		//클래스의 변수, 클래스의 함수 
	}
}

console.log(A,A.age);
A.hello();

// A = [function:A]  {age:37}
//A.age = 35
//35

class B {
	age = 37;
	static hello(){
		console.log(this.age)
	}
};

console.log( B, B.age);
B.hello();

// [function:B] undefined
//undefined
//this를 사용하고 있기때문에 undefined

new B().hello();
//static함수이기때문에 객체에 속해있는 함수가 아니다. 
//undefined 출력

class C {
	static name = ' 이 클래식의 이름을 c가 아니다 ';
}

console.log(C);

//c 는 [function : 이클래스의 이름을 c가 아니다 ] static name이라는 변수가 클래스의 이름을 뜻한다는 것을 알수 있다

extends (상속)

//상속 기본

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

class Child extends Parent {}

Parent를 가지고 있는 멤버함수가 child가 가져간다

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

console.log(p);
console.log(c);

// Parent {name : 'Lee'}
// Child {name : 'Lee'}

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

// hello Lee
// hello Anna

overrride ( 클래스의 상속 멤버변수 및 함수 오버라이딩 , 추가)

  • 부모에게서 구현된 함수나 변수가 자식에게서 똑같은 이름으로 구현시키면 override된다
  • 자식이 만드는 함수가 부모의 함수를 덮어 씌운다
  • 자식이 가지는 것중에 부모가 가지고 있지 않으면 추가를 시킨다
class Parent {
	naem = 'Lee';
	hello () {
		console.log('hello',this.name);
	}
}

class Child extends Parent {
	age =27;
	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에서 자식이 같은 이름의 함수를 호출하면 자식이 가지는 함수를 덮어씌워서 호출하게 된다.

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); //부모의 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 상속

class Parent {
	static age = 37;
}

class Child extends Parent{}

//static도 그대로 상송되어진다

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6425589e-ab4a-4008-9d08-f8b181cb6834/.png

  • 부모의 class를 자식 class가 상속
  • 부모의 클래서 , 자식 클래스가 new를 통해 instance가 만들어짐
  • 멤버변수, 멤버함수도 모두 상속받을 수 있는 구조로 만들어진다
profile
프론트앤드 개발을 공부하는 중입니다:)

0개의 댓글