カテゴリ

📖 カテゴリ

カリキュラムの概要

クラスは、ES 2015(ES 6)から紹介された最新の文法

です.

クラスが果たす役割は、基本的にはインスタンスを作成する役割

である.

class  Person {
// 클래스 로직
	constructor(name,age) { // 초기화 메서드
		console.log('생성되었습니다.');
		this.name  =  name;
		this.age  =  age;
	}
}

// 인스턴스를 생성했을때 constructor 안에 있는 로직이 실행된다.
const fromzoo = new  Person('joo',30)
console.log(fromzoo);

結果が渡されるパラメータnameとage値をコンソールで確認してオブジェクトを生成します.

ᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏ

userという名前のオブジェクト

を作成

const user = {name : 'fromzoo', age: 100}

ユーザー権限を管理する新しいオブジェクトadmin

を作成します.

// 기존에 user라는 속성에 role이라는 정보 추가
const admin = {name : 'fromzoo', age: 100, role:'admin' }

ただし、新しいオブジェクトadminとuserのオブジェクトコードは重複している.
これらのオブジェクトを使用する場合、重複するコードを減らす方法が必要です.
この観点からJavaScriptが指すプロトコルタイプを継承することを理解してみましょう.

adminという名前の空のオブジェクト

を作成します.

const admin = {};

重複するコードを減らすために,ユーザの情報をadminに再利用することができる.

admin.__proto__  =  user
admin.age  // 100
admin.name // fromzoo

user定義の親オブジェクトはprototypeであり、adminから継承されて使用され、상속と呼ばれます.

admin.role  =  'admin'

adminには、追加の必要なオブジェクトの情報のみが格納されます.
この観点から,オブジェクト,配列,文字列などのデータ型の属性とapiをプロトタイプ継承として用いていることがわかる.

ᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏ

const obj = { a: 10 }

クロム開発者ツールでオブジェクトを設定します.

Object.keys(obj) // ['a']
obj.hasOwnProperty('a') // true

オブジェクト関連関数が使用可能になります.
objのプロトタイプはObject(オブジェクト)であるため,Objectという上位オブジェクトが提供するメソッドや属性を用いることができる.Built-in Javascript APIまたはJavascript Native APIとも呼ばれる.
この点は,拡張オブジェクト情報だけでなく,実際に定義された機能も用いていると理解できる.

ᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏ

既存構文

function  Person(name,age) {
	this.name  =  name;
	this.age  =  age;
}
const capt = new  Person('캡틴',100);

既存の構文では,コンストラクション関数を用いてプロトタイプを用いた継承などの概念を実現することもできる.

クラス構文

class  Person {
	constructor(name,age) {

		console.log('생성되었습니다.');
		this.name  =  name;
		this.age  =  age;
	} 
}
const seho = new  Person('세호',30)
console.log(seho);

オブジェクト言語に精通している人がJavaScriptにアクセスしやすいようにクラスベースの構文を提供
-クラスをbabelなどのプログラムに変換すると、コンストラクション関数

が使用されていたことがわかります.

プロトタイプベースの言語の特性は、クラス構文を使用することによって変更されません.すなわち,既存のプロトタイプベースの継承は依然として維持されている.

したがって、クラス構文を使用しなくても、コンストラクション関数の作成を完全に続行できます.

ᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏᄏ

クラスの最上位レベルで使用される属性、メンバー変数を定義する必要があります.

class Person {
	// 멤버 변수
	name :  string;
	age :  number; 
}

の2番目の差異パラメータのタイプも、

として具体的に定義する.

class Person {
	name :  string;
	age :  number;
	
	// 파라미터 타입 정의
	constructor(name:string, age:number) {
		this.name  = name;
		this.age  = age;
	} 
}

メンバー変数の有効範囲を設定できます.

class Person {
	private name :  string;
	public age :  number;
	readonly log : string
	
	// 파라미터 타입 정의
	constructor(name:string, age:number) {
		this.name  = name;
		this.age  = age;
	} 
}

private-クラスでのみ使用する場合に定義
public-デフォルト定義(または保護)
readonly-読み取りアクセスのみ可能で、値は変更できません.
タイプスクリプトによって提供される構文は、変数へのアクセス範囲を制限します.

reactとVue。jsのクラス構文と最新構文

React

// 리액트 예전 문법 - 클래스 기반 코드
class  App  extends RTCIceCandidate.Component { }


// 리액트 최신 문법 - 훅 기반의 함수형 코드
function  App() {
	return <div>Hello World</div>
}

Vue.js

// 최근 추가될 컴포지션 api
new  Vue({
	el:'',
	setup() { // 추가적인 옵션 사용
	}
})

リアクターやビューに新しい形式の文法が現れる可能性がありますが、最近クラスの文法を見ることは多くないかもしれません.

🔍 リファレンスソース

タイプスクリプト入門-ベースから実戦へ

MDN JavaScriptタイプと継承

MDNオブジェクトドキュメント