Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- meatadata
- app.post
- map
- javascript
- react
- array
- 스크롤이벤트
- reactnative
- generic
- TS
- supabase 페이지네이션
- 배열중복요소제거
- Next.js
- materialicons
- Spring
- 페이지네이션
- 타입스크립트
- interface
- set
- 이진탐색
- async
- Filter
- 상속
- 안드로이드빌드에러
- app:compiledebugkotlin
- 리액트네이티브아이콘
- 슬라이딩윈도우
- mainapplication.kt
- 글또10기
- extends
Archives
- Today
- Total
rhanziy
javascript. class 본문
'use strict';
// object-oriented programming
// class: template
// object: instance of a class
// 1.Class declations
class person {
// Constructor
constructor(name, age){
// field
this.name = name;
this.age = age;
}
//methods
speak( ){
console.log(`${this.name}: hello!`);
}
}
const rhanyi = new person('rhanyi', 29);
console.log(rhanyi.name);
console.log(rhanyi.age);
rhanyi.speak( );
// 2. Getter and Setters
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age( ) {
return this._age;
}
set age(value){
this._age = value < 0 ? 0 : value;
}
// getter와 setter를 정의하면 생성자에서
// 값을 할당하거나 불러오는게아니라 바로 getter나 setter를 호출해버린다.
// so, getter와 setter안에서 쓰여지는 변수명을 다르게 해줘야함!
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);
// 3. Fields (public, private) 최근에 추가됨
class Experiment {
publicField = 2;
#privateField = 0; // 클래스외부에서는 접근이 불가능하다.
}
const experiment = new Experiment( );
console.log(experiment.publicField);
console.log(experiment.privateField); // undefined
// 4. Static properties and methods
class Article {
static publisher = 'Dream Coding';
// 오브젝트마다 할당되어지는게 아니라 class 자체에 할당되어있다.
// 변하지않는 상수 -> 공용으로 메모리 사용
constructor(articleNumber){
this.articleNumber = articleNumber;
}
static printPublisher( ){
console.log(Article.publisher);
}
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.publisher); // undefined
console.log(Article.publisher);
Article.printPublisher( );
// 5. Inheritance
class Shape {
constructor(width, height, color){
this.width = width;
this.height = height;
this.color = color;
}
draw( ){
console.log(`drawing ${this.color} color of`);
}
getArea( ){
return this.width * this.height;
}
}
class Rectangle extends Shape { }
class Triangle extends Shape {
draw( ){ // 메서드 오버라이딩. 부모클래스의 메서드를 재정의 함
super.draw( ); // 부모클래스의 메서드도 호출하고싶다면 추가작성
console.log('★');
}
getArea( ){
return (this.width * this.height) / 2 ;
}
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw( );
console.log(rectangle.getArea( ));
const triangle = new Triangle(20, 20, 'red');
triangle.draw( );
console.log(triangle.getArea( ));
// 6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle);
// rectangle은 Rectangle의 인스턴스인가!? -> boolean형
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);
// 자바스크립트의 객체이다 true!
'Html_css_js' 카테고리의 다른 글
javascript. Object객체 (0) | 2022.01.21 |
---|---|
css. 미디어쿼리 분기점 (0) | 2022.01.20 |
js. 문서의 맨 끝에 스크롤 도달 시 이벤트 실행 (0) | 2022.01.18 |
javascript. 함수 function (0) | 2022.01.18 |
js. 스크롤 한 높이값 만큼 컨텐츠 position 이동하기 (0) | 2022.01.17 |
Comments