클래스 class
자바스크립트에서 객체를 만들면 프로토타입이 자동으로 상속이 됩니다.
(객체가 가져야할 기본적인 사항에 대한 프로토타입)
클래스란 오브젝트를 생성하기 위한 설계도 입니다.
기존 자바스크립트의 프로토 타입을 대체할 수 있으며, 클래스를 통해 정의한 오브젝트는 Array, Date 등 내장 객체와 동일하게 취급할 수 있습니다.
클래스 내부에 정의된 함수는, 객체의 멤버함수와 마찬가지로 메소드라 부릅니다.
new 연산자에 의해 실제 사용 가능한 객체를 생성하며, 생성된 객체를 통해 메소드를 호출할 수 있습니다.
생성된 객체를 통해 메소드를 호출할 수 있는 메소드 = 인스턴스 메소드
class Member{
getName(){
return "이름";
}
}
let memberObj = new Membar();
console.log(memberObj.getName());
자바 스크립트 클래스에서 메소드를 정의할 때에는 function 키워드를 생략합니다.
클래스를 선언할 때에는 참고할 사항이 있습니다.
클래스를 선언할 때는, 이름의 첫 글자를 대문자로 작성합니다.
이는 문법적으로 필수 사항은 아니지만, 개발 시 편의를 고려한 관례입니다.
this 키워드
웹문서 조작을 위해 작성된 자바스크립트에서, 전역 키워드(한정되지 않고 전역적으로 사용되는 키워드) this는 window 객체를 의미합니다.
이벤트 발생 시에 this는 이벤트가 발생한 DOM을 의미합니다. (이벤트 핸들러 안에서는 this 가 이벤트 타겟)
그러나 메소드 내에서 this는 클래스 오브젝트를 의미합니다.
아래 예제를 통해서 확인해보겠습니다.
html
<body>
<button id = "push"> 사진 요청하기 </button>
<img src ="" alt = "강아지 사진" id = "dog">
<script src="./script04.js"></script>
</body>js script
console.log(this) // 전역적으로 사용되는 this = 윈도우를 뜻함
document.querySelector("button").addEventListener("click", function(){
console.log(this) // 이벤트 핸들러 안에서는 이벤트 타겟을 뜻함
})
class Dog{
breed = "시바견"
bark (){
console.log(this)
console.log("멍멍")
}
}
const d1 = new Dog()
console.log(d1.breed)
d1.bark()
실행 화면은 다음과 같습니다.
constructor 키워드
클래스에서는 생성자 역할을 하는 함수가 존재합니다. 이는 new 연산자를 통한 클래스 오브젝트 생성 시 최초로 동작하는 메소드이며, constructor 이라는 이름을 사용합니다.
여기서의 this는 펭수의 인스턴스가 됩니다.
이렇게 주로 생성한 객체의 멤버 변수를 초기화하는 역할을 합니다.
constructor 생성자 함수 또한 함수이기 때문에 매개변수 사용이 가능하며, new 연산 시 인자를 받을 수 있습니다.
/*
클래스가 존재하는 모든 언어에서 클래스 내 생성자의 주된 목적은 멤버의 초기화다
*/
class Person {
constructor(job){
this.job=job
}
Intro(){
console.log(`내 직업은 ${this.job}!`)
}
}
static
static 선언을 하게 되면 객체 생성 전부터 멤버로 사용할 수 있습니다.
이후에 이 키워드를 사용할 일이 있다면 그 때 보다 자세하게 서술할게요.
클래스의 상속
상속은 선언을 마친 클래스로 메소드와 속성을 물려받는 것을 의미합니다.
상속 시에는 기존 클래스로부터 extend 키워드를 통해 상속받습니다.
위에서 작성한 constructor 예제의 하단에 이어서 작성하고 확인해볼게요.
/*
클래스가 존재하는 모든 언어에서 클래스 내 생성자의 주된 목적은 멤버의 초기화다
*/
class Person {
constructor(job){
this.job=job
}
Intro(){
console.log(`내 직업은 ${this.job}!`)
}
}
// 상속에는 IS-A 관계가 바람직합니다.
class Player extends Person{
constructor(){
super("축구선수") // 자바스크립트에서 자식 객체의 생성은 곧 부모 객체의 생성이다.
}
}
const a = new Player()
a.Intro()
빌트인 오브젝트 상속 (내장 생성자 상속)
내장 객체를 상속받아 기능을 확장할 수 있습니다.
Array로부터 반환을 받아서 Array로부터 상속받은 생성자를 사용할 수 있습니다.
상속받은 것을 상속 받아서 다시 사용할 수도 있습니다.
super
super 는 상속을 해 준 부모클래스를 의미하는 키워드입니다.
super 키워드를 호출하여 부모 클래스의 메소드를 호출할 수 있습니다.
super그 자체를 호출하면 생성자가 되고 super. 점을 찍고 하면 메소드 호출이 됩니다.
메소드 오버라이딩
물려받은 메소드를 자식 클래스가 재정의 할 수 있습니다.
앞서 자바에서 공부했던 클래스와 유사하므로, 앞선 공부들을 참고했습니다.
https://blue-dot.tistory.com/51
자바 기초 공부 일지 11 . ★ 클래스와 인스턴스, 삼각형의 넓이 구하기
클래스는 데이터와 기능의 집합입니다. 클래스를 만드는 목적은 프로그램의 실행부에서 가져다 쓸 데이터 또는 기능을 정의하는 것이에요. 데이터와 기능이 든 주머니라고 생각하면 좋을 것 같
blue-dot.tistory.com
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
Classes - JavaScript | MDN
Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의
developer.mozilla.org
여기까지 클래스에 대해서 알아보았습니다.
'자바스크립트 JS > JS 입문 공부일지' 카테고리의 다른 글
| 자바 스크립트(js) 입문 공부 19. 프로미스promise (0) | 2022.11.22 |
|---|---|
| 자바 스크립트(js) 입문 공부 18. ECMAScript, ES6 이후 개선된 문법들 (화살표 함수, 디폴트 파라미터, 객체 구조 분해) (0) | 2022.11.22 |
| 자바 스크립트(js) 입문 공부 17. 배열 메소드 (2) (콜백함수를 사용하는 대표 메소드) (0) | 2022.11.22 |
| 자바 스크립트(js) 입문 공부 16. JSON 제이슨, localStorage로컬스토리지 (1) | 2022.11.22 |
| 자바 스크립트(js) 입문 공부 15. 객체 리터럴 , 스프레드 연산자 (0) | 2022.11.22 |