class , 생성자 함수 , 프로토타입 메서드

사실 class는 두개 담은 바구니다.

생성자 함수 = 변수만드는 함수(constructor) 

+

프로토타입 메서드 = 만든 변수 가지고 할 함수(protoype method)

 

 

생성자함수 : 자바스크립트에서 객체를 만들고 초기화하는 특별한 함수다.

생성자함수는 일종의 템플릿으로 , 여러개의 유사한 객체를 쉽게 만들 수 있게 해준다.

즉 , "변수집합을 만드는 함수"인 것이다.

 

생성자 함수 사용법 1

 

1.대문자로 시작하는 이름 (파스칼케이스)

생성자 함수의 이름은 보통 대문자로 시작한다.

 

2.this 키워드 사용

생성자 함수 안에서 'this'라는 키워드는 개로 생성된 객체를 가르킨다.

 

3.new 키워드와 함께 사용

생성자 함수는 'new'키워드와 함께 호출되어야 한다.

'new' 키워드를 사용하면 새로운 객체가 생성되고, 생성자 내부의 'this'가 이 새로운 객체를 가리키게 된다.

 

function Person(name,age){
	this.name = name;
    this.age = age;
    
    this.sayHello = function(){
    	console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`)
    	}
}

const person1 = new Person('Allice' , 30)
const person2 = new Person('Bob' , 25)

person1.sayHello() // 결과 : Hello, my name is Alice and I am 30 years old.
person2.sayHello() // 결과 : Hello, my name is Bob and I am 25 years old.

 

fuction Person(name ,age ){}

Person 함수 정의한다.

name , age가 매개변수로 들어올 것이다.

 

this.name , this.age : this키워드를 사용해 생성된 객체에 'name' 속성을 추가 -> 전달된 'name'을 매개변수에 할당한다.

 

const person1 = new Person('Alice', 30);:

-'new'라는 키워드를 사용해 , 'person' 생성자 함수를 호출하면 새로운 'person'객체가 생성되고,

'person1' 변수에 저장한다.

 

person1.sayHello();:

- 'person1' 객체의 'sayHello' 메서드를 호출한다.

 

 

생성자 함수 사용법 2 (class)

class funcClass {
  constructor(x) {
    this.name = x;
  }
  nameConsole() {
    return console.log(this.name);
  }
}

const funcClass1 = new funcClass("이름 뽑아보자잉");
console.log(funcClass1);

 

풀버전
class "함수이름"{constructor(매개변수){this.변수 = 변수값}함수(){}}

간소화버전
class 이름 {constructor(){변수} 함수(){}}

 

나는 공부하다가 의문이 든 게 , "이렇게 쓸거면 그냥 함수 선언식이나 표현식이 낫지 않나?" 였다.

 

근데 쓰는 이유는 다 있더라.

class는 코드가독성 및 구좌,상속,캡슐화(데이터 보호)를 위해서 쓴다고 한다.

 

나는 체감이 아직 안되지만 쓸 수 있는 카드가 늘어나서 좋은 거 같다.