JSEssential:属性とメソッド

この投稿は、図書「モダンjavascript Deep Dive」とクイックキャンパス講座「キム・ミンテのフロントアカデミー:JavaScriptとType Script Essential」を参考に書いたものです.
属性とメソッドの表示
Javascriptにはオブジェクトというデータ型があるのはご存知でしょうか?オブジェクトには、プロパティとメソッドの2つのデータが含まれます.

コンテンツが純粋なデータの場合はプロパティと呼び、コンテンツが関数の場合はメソッドと呼びます.
プロパティをより直接表示するために、オブジェクトの例を作成しました.

const obj = {
  name: "Minsu",
  age: 20,
  getFamilyName: function() {
    return "Park"
  }
  getBloodType() {
    return "AB"
  }
}

obj.name   // "Minsu"
obj.age    // 20
obj.getFamilyName();    // "Park"

コードブロックでご覧のように、オブジェクト内のプロパティにアクセスする方法は、オブジェクト変数名の後にポイントを追加し、キー値を追加します.
もちろん、誰もが「Kim」と20という数字を値として返します.
オブジェクトの3番目の項目にはキーに関数が含まれていますよね?これが方法です.
メソッドは、プロパティと同じ構文を使用してアクセスすることもできます.前のレッスンで説明したように、関数も値を持つと見なされるため、アクセス可能な属性と見なすことができます.
最後のプロジェクトも同様の方法で、ご覧のようにサムネイル形式で作成されます.見ると最後の方法で書かれたコードがもっと少ないことがわかりますよね?
実際、オブジェクト内メソッドを作成するとき、私はほとんど4つ目の方法で作成しました.

コードブロックにはいくつかの方法がありますが、ES 6の矢印関数を使用して方法を定義できます.
特に、矢印関数は、カッコを省略したり、値を返したりするときにreturnキーワードを省略したりできるため、非常に効果的な作成方法です.
Getter/Setter
プロパティのageは、上記の例に従って操作します.

const obj = {
  name: "Minsu",
  age: 20,
  getFamilyName: function() {
    return "Park"
  }
  getBloodType() {
    return "AB"
  }
}

obj.age = 21;
obj.age = -20;

アクセス方法を知っているので、簡単に修正できます.
うん.でも21歳に変えても何の問題もありませんでもなぜマイナス20になったの?年齢がマイナスになるわけがないでしょう.だから私はこれを止めることを想像します
残念なことに、変数によって作成されたオブジェクトはそれを阻止できません.
しかし、オブジェクトを作成する方法はもう一つあります.これがclass構文を使用してインスタンスオブジェクトを作成する方法です.

class Person {
  bloodType: string;
  
  constructor() {
    this.bloodType = bloodType;
  }
}

const p1 = new Person('B')

p1.bloodType   // 'B'

bloodTypeをclassでstringとして定義します.したがって、Personというクラスで作成されたインスタンスオブジェクトは、bloodTypeの値として文字列のみを受信します.
例は血液型になっていますが、ageの場合も同様に数字のみを受け入れるように定義できます.
同様に、メソッドは、入力パラメータにデータ型を指定することもできます.
ただし、setを使用してメソッド名にアクセスできます.関数のようにメソッド名にアクセスするわけではありません.次のブロックを参照してください.
(関数名と属性を区別するために属性bloodTypeの前に追加しました.)

class Person {
  _bloodType: string;
  age: number; 
  
  constructor() {
    this._bloodType = bloodType;
  }

  set bloodType(btype: string) {
  	this._bloodType = bType;
  }
}

const p1 = new Person('B')

p1.bloodType = 'A'  

setキーを使用すると、アクセスプロパティのようにオブジェクトメソッドを呼び出すことができます(メソッドですが).
一番下にBだった血液型をAに変換するコードが確認できます
これをsetterメソッドと呼び、値を変更できますが、元の値は取得できません.
ここで使う方法はgetterです.

class Person {
  _bloodType: string;
  age: number; 
  
  constructor() {
    this._bloodType = bloodType;
  }

  set bloodType(btype: string) {
  	this._bloodType = bType;
  }

  get bloodType() {
  	return this._bloodType
  }
}

const p1 = new Person('B')

p1.bloodType   // 'B'

setではなくgetでメソッドを追加すると、プロパティのように値にアクセスして取得できます.
属性の追加/削除
JavaScriptには、ダイナミックバインドの概念があり、オブジェクトにプロパティを簡単に追加および削除できます.

const obj = {
  name: "Minsu",
  age: 20,
}

obj.bloodType = 'B'
obj.isMarried = false
delete obj.age;

例を見るだけで理解できるでしょう.そのまま.属性名に値を指定すると、オブジェクトに属性が追加されます.
(もちろん昔は存在しなかった属性名ですよね?)
deleteキーを使用して特定のプロパティをクリアすることもできます.
したがって、objという名前のオブジェクトはageを持たず、bloodTypeとismarriedという属性が追加されます.