Class 6

TS - Class

1. constructor - 프로퍼티 초기화 자바스크립트에서 처럼 this.X = X 형태의 문법은 더이상 사용하지 않는다. 타입스크립트에서는 constructor에서 한 번에 선언할 수 있다. 접근 제한자도 붙여줄 수 있다. class Player { constructor( private firstName: string, protected lastName: string, public nickName: string ){} } 1-1. 프로퍼티 메뉴얼 초기화 클래스의 프로퍼티가 constructor에 의해 바로 초기화 되지 않도록 할 수 있다. type Words = { [key: string]: string; }; class Dict { private words: Words; constructor() ..

Frontend/TS 2022.07.18

class - 내장 class의 특성

1. 내장 클래스 확장하기 class PowerArray extends Array { isEmpty() { return this.length === 0; } } let arr = new PowerArray(1, 2, 5, 10, 50); console.log(arr.isEmpty()); // false let filteredArr = arr.filter(item => item >= 10) //filter 내장 메소드로 새로운 배열 리턴 console.log(filteredArr); // [10, 50] 새로운 배열의 값 console.log(filteredArr.isEmpty()); // false // 새롭게 리턴된 배열에서도 PowerArray의 메소드를 사용할 수 있다. PowerArray 클래스로..

class - private, protected

1. 객체 지향의 캡슐화 객체 지향 프로그래밍의 중요한 원리 중 하나는 내부 인터페이스와 외부 인터페이스를 구분 짓는 것, 즉 캡슐화 입니다. 객체 지향 프로그래밍에서 프로퍼티와 메서드는 2개의 그룹으로 분류됩니다. 내부 인터페이스 - 동일한 클래스 내의 다른 메서드에서는 접근할 수 있지만, 클래스 밖에서는 접근 할 수 없는 프로퍼티와 메서드 외부 인터페이스 - 클래스 밖에서도 접근 가능한 프로퍼티와 메서드 커피 머신으로 예를 들자면 외형에는 커피를 뽑는 버튼 몇 개, 구멍 몇 개, 화면 하나 정도가 있습니다. 내부에는 디테일한 장치들과 부품들이 전부 들어있습니다. 하지만 내부의 것을 알지 못해도 사용자는 간단한 조작으로 커피 머신을 사용할 수 있습니다. 커피 머신의 내부를 가려주는 보호 커버를 제거하면..

class - class extends (상속)

1. 클래스 상속 ( extends ) 클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있습니다. extends 키워드로 상속을 구현할 수 있습니다. class Animal { constructor(name){ this.name = name; this.speed = 0; } run(speed){ this.speed = speed; console.log(`${this.name} 달리는 중 속도 : ${this.speed}`) } } class Human extends Animal { think(){ console.log(`${this.name} 생각하는 중`) } } let human = new Human('Bob') human.run(100) // Bob 달리는 중 속도 : 100 human.t..

class - class 기본 문법

1. class Class를 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용 할 수 있습니다. class User { constructor({name}){ this.name = name; } welcome(){ console.log(`Welcome ${this.name}`) } } let user1 = new User({name : 'Bob'}); user1.welcome(); // 'Welcome Bob' 클래스를 new 와 함께 호출하면 다음과 같은 일이 일어납니다. 1. 새로운 객체가 생성됩니다. 2. 넘겨받은 인수와 함께 constructor가 자동 실행됩니다. constructor() 는 new에 의해 자동 호출되므로, 별다른 동작없이 객체를 초기화 할 수 있습니..

자바스크립트 - class, getter, setter 란 ?

여태 class가 뭔지 몰랐던것을 반성하며 포스팅합니다잇 ! 1. class란? ES6에서 새롭게 추가된 'class' 기존에 존재하던 prototype을 베이스로 문법만 추가된 것이라고 합니다! (나중에... 꼭.. 알아보쟈..) 클래스는 연관있는 데이터를 한 곳에 묶어놓는 일종의 컨테이너 인데유~ 속성(fields) 과 행동(methods)이 정의되어 있습니다! class는 일종의 틀인데요~ 이것을 이용해서 데이터를 넣어 찍어내면? object를 만들 수 있습니다~ class는 한번만 선언하면 되고 여러번 재사용 할 수 있습니다~~~ 백문이 불여일견 만들면서 이해해 봅시댜잇! 1-1. class 선언하기! class 키워드로 시작해서 Person 이라는 class 를 만들겠슴다. constructor..

Frontend/JS 2021.11.04