[220403] 클래스 정리

똑같은거 계속 작성해서 만들기 귀찮아! 라는 의도로 사용하고있는 함수.

그와 마찬가지로 같은 내용의 객체를 계속 선언하기 귀찮아!라는 명목으로 만들어진 객체전용함수가 클래스.

(함수와 클래스 둘다 typeof로 확인해보면 function 이라고 결과가 나오기때문)

 

클래스를 만드는 방법

클래스는 앞에 function 대신 class로 선언한다.

클래스명은 앞자리가 대문자다.

클래스 생성자 메서드인 constructor를 통해 초기값을 만들 수 있다.

초기값을 불러와서 사용할때는 new를 사용해서 생성한다.

 

 

new Ingoo('aaaa')를 호출하면 생기는 일

1. 새로운 객체가 생성된다

2. 넘겨받은 인수 'aaaa'와 함께 contructor가 자동으로 실행된다.

class Ingoo{
//Ingoo라는 이름의 함수를 만듬

    constructor(name){this.name=name}
    //constrctor에서 함수 본문을 가져옴. 없다면 내용이 없는 함수 생성됨
    //함수 내분에 한개만 존재
    
    sayHi() {console.log('실행되었습니다')
    //클래스 내에서 정의한 메서드를 Ingoo.prototype에 저장함.
}

//현재 프로토타입에는 메서드가 contructor와 sayHi 2개다.

 

 

같은 내용을 함수형태로 만들어 보기

//함수 모양
function ingoo(name){
    this.name = name
}

ingoo.prototype.sayHi = function(){
	console.log(this.name)
}

 

 

this에 관한 간단 정리

https://hancoco.tistory.com/36

 

 

 

또한 클래스는 다음 방식으로도 생성이 가능하다.

let Ingoo = class{
    sayHi(){
    	alert("aaaa")
    }
}
console.log(new Ingoo().sayHi())

 

 

동적으로도 생성이 가능하다

function make(phrase){
    return class{
        sayHi(){
            console.log(phrase)
        }
    }
}

let User1 = make("bbbb")
new User1().sayHi()

 

 

 

예제. 여러 객체를 만들어서 배열 안에 생성하기

function createObj(a,b,c,d){
    this.name = a,
    this.age = b,
    this.height = c,
    this.weight = d
}

const a = new createObj('rabbit','30','180','70')
const b = new createObj('ingoo','31','180','70')
const c = new createObj('cat','27','180','70')
const d = new createObj('doggy','29','180','70')

let arr = []
arr = [a,b,c]
arr.push(d)
console.log(arr)

 

 

참조블로그, 사이트

https://ko.javascript.info/class