コアJavaScript:プロパティgetterとsetter
オブジェクトのプロパティは、データプロパティとアクセス者プロパティに分けられます.

Data Property(データ属性)
これまで使用してきたすべての製品

アクセス者構成(Accessor property)
新型番組.アクセス者プログラムの本質は、値の取得と値の設定を担当する関数です.しかし、外部コードでは、関数ではなく一般的なプログラムのように見えます.

getterとsetter

アクセス者プロパティはgetterメソッドとsetterメソッドで表されます.オブジェクトテキストでは、getterメソッドとsetterメソッドをgetメソッドとsetメソッドとして表すことができます.

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};

すなわち、getterメソッドはPropertyの読み取りを試みたときに実行され、setterメソッドはPropertyに値を割り当てようとしたときに実行される.

getter

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

alert(user.fullName); // John Smith

getterメソッドで実装されたコードは、既存の値をコピーして貼り付ける必要はありません.外部コードでは、通常のpropertyのようにアクセス者propertyを使用できます.user.fullNameを使用して、通常のproperty値にアクセスするように値を取得できます.ただし、上記のコードはgetterメソッドのみを持つため、user.fullName=形式で値を割り当てるとエラーが発生します.

setter

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// 주어진 값을 사용해 set fullName이 실행됩니다.
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

setterメソッドを追加して値を割り当てることができます.

アクセス者プロパティ記述子

アクセス者propertyには、データpropertyとは異なる記述子があります.アクセス者プログラムは、valueおよびwritableではなく、getおよびsetという関数を有する.
アクセス者プロパティの記述子

get:パラメータを持たない関数は、プログラムを読み込むときに役立ちます.

set:プログラムに値を書き込むときに呼び出される引数関数.

enumerable,configurable:データエンティティと同じです.

definePropertyは記述子getおよびsetを提供し、fullNameにアクセス者のコードを生成する.

let user = {
  name: "John",
  surname: "Smith"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },

  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});

alert(user.fullName); // John Smith

for(let key in user) alert(key); // name, surname

Propertyは、アクセス者Property(get/setメソッド)またはデータProperty(value)のいずれかにのみ属します.どちらもあり得ない!

// Error: Invalid property descriptor.
Object.defineProperty({}, 'prop', {
  get() {
    return 1
  },

  value: 2
});

パッキンとして使用

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("입력하신 값이 너무 짧습니다. 네 글자 이상으로 구성된 이름을 입력하세요.");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
alert(user.name); // Pete

user.name = ""; // 너무 짧은 이름을 할당하려 함

アクセス者propertyを実際のproperty値のパッケージとして使用する場合は、上記のようにproperty値を任意に制御できます.

互換性

アクセス者コンフィギュレーションは、getterとsetterを使用して必要に応じてデータコンフィギュレーションの動作と値を調整できるため、便利です.

function User(name, age) {
  this.name = name;
  this.age = age;
}

let john = new User("John", 25);

alert( john.age ); // 25

上記のコードでは、ageではなくbirthdayを保存する必要がある場合は、次の操作を行います.

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let john = new User("John", new Date(1992, 6, 1));

これにより、既存のコードでagepropertyを使用するコードを変更する必要がある.(あ!)
既存のコードを保持し、agegetterを追加して問題を解決します.

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // age는 현재 날짜와 생일을 기준으로 계산됩니다.
  Object.defineProperty(this, "age", {
    get() {
      let todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    }
  });
}

let john = new User("John", new Date(1992, 6, 1));

alert( john.birthday ); // birthday를 사용할 수 있습니다.
alert( john.age );      // age 역시 사용할 수 있습니다.

うん...わあ...