Class vs Object

18540 ワード
JavaScript object ES6 テキストリンク

Class vs Object


Class

  • template(フレーム)
  • declare once(1回のみ宣言)
  • no datain(実データなし)
  • フィールド(属性)、メソッド(動作)
    • が存在する.

    Object


    aクラスインスタンス
  • (インスタンス作成=オブジェクト)
  • 複数回作成(複数のデータから他のオブジェクトを作成可能)
  • datain(データを挿入してインスタンスを作成)

    • Classとは?


    プロトタイプベースの構文のみを追加し、新しいclassは追加しません.

    クラス宣言

    class Person {
	// constructor
	constructor(name, age) {
		// fields
		this.name = name;
		this.age = age;

		// methods
		speak() {
			console.log(`${this.name}: hello!`);
		}
	}
}

const ellie = new Person('ellie', 20);
ellie.speak();

    Getter and Setter


    ユーザーがクラスの属性を誤って使用することを防止する防御メカニズム
    class Person {
	constructor(firstName, lastName, age) {
		this.firstName = firstName ;
		this.lastName = lastName
		this.age = age;
	}
	// getter
	get age() {
		return this._age;
	}
	// setter
	set age(value) {
		this._age = value;
	}
}

const ellie = new Person('Steve','Job', -1);
console.log(user1.age); // getter age 호출

    this.ageはmemoryではなくget ageを呼び出し、ageはsetageを呼び出す.set ageではこれ無限ループでage(get age)を呼び出すとエラーが発生します.

    Public & Private


    public


    class外部からアクセスできます.

    private


    classの外部では、読み取りや変更は許可されていません.
    class Experiment {
	publicField = 2; // public
	#privateField = 0; // private
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField ); // undefined
  • は最近出てきたものではありません.
  • ブラウザは互換性がありません.(2020.04規格)

    • Static

  • オブジェクトと同じ値とメソッドがある場合に使用します.
  • メモリの使用を削減できます.
    • class Article {
	static publisher = 'Dream Coding';
	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); // Dream Coding
Article.printPublisher();
  • は最近出てきたものではありません.
  • ブラウザは互換性がありません.(2020.04規格)

    • 継承と多様性


    複数のクラスに共通のプロパティがある場合は、親クラスを作成してプロパティを再利用できます.
    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 width * this.height;
	}
}

class Rectangle extends Shape {} // 상속
class Triangle extends Shape {
	draw() {
		super.draw(); // 재정의 해도 부모의 draw() 메서드를 사용할 수 있음
		console.log('🎈'); // overwiring
	}
	getArea() {
		return (this.width * this.height) / 2; // overwirting
	}
}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle  = new Triangle (20, 20, 'red');
triangle.draw();

    InstanceOf


    クラスのインスタンスかどうかを決定します.
    console.log(rectangle instanceof Rectangle); // True
console.log(triangle instanceof Rectangle); // False
console.log(triangle instanceof Triangle); // True
console.log(triangle instanceof Shape); // True
console.log(triangle instanceof Object); // True
    公式解読Activityの1つ
    Context API