学ぶメソッド内でのプロパティの使用 | JavaScriptオブジェクトの基礎

メニューを表示するにはスワイプしてください

オブジェクトメソッドの使用方法をさらに深く掘り下げ、メソッドが this キーワードを使ってオブジェクトのプロパティへアクセスする方法を解説。

メソッド内でのオブジェクトプロパティへのアクセス

メソッド内では、this を利用してオブジェクトのプロパティを読み書き可能。

const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",
  getInfo() {
    console.log(this);
  },
};

// Method call
furniture.getInfo(); // Output: {type: 'wardrobe', manufacturer: 'Belgium', color: 'wenge magic', getInfo: ƒ}

getInfo メソッド内での this は furniture オブジェクトを指し、オブジェクト全体の内部内容を表す。

実用例

メソッド内では、this を通じてオブジェクトのプロパティにアクセスし、通常通りドット記法で特定のプロパティを参照できる。

以下の例では、getColor、addProperty、modifyProperty の各メソッドが this を使って furniture のプロパティにアクセスし、さまざまな操作を行う。

getColor は、this を用いてオブジェクトのプロパティを参照し、ワードローブの色をコンソールに出力する；
addProperty は、furniture オブジェクトに新しいプロパティを追加する。2つのパラメータ、propertyName（新しいプロパティ名）と propertyValue（新しいプロパティに割り当てる値）を受け取る；
modifyProperty は、furniture オブジェクト内の既存プロパティの値を変更する。2つのパラメータ、propertyName（変更するプロパティ名）と propertyValue（新しい値）を受け取る。


              12345678910111213141516171819202122232425262728
            
const furniture = {
  type: "wardrobe",
  manufacturer: "Belgium",
  color: "wenge magic",

  getColor() {
    console.log(this.color);
  },

  addProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },

  modifyProperty(propertyName, propertyValue) {
    this[propertyName] = propertyValue;
  },
};

// Access the `color` property of the `furniture` and log it to the console.
furniture.getColor(); // Output: wenge magic

// Add a new property to the `furniture` object using the `addProperty` method.
furniture.addProperty("material", "wood");
console.log(furniture.material); // Output: wood

// Modify an existing property using the `modifyProperty` method.
furniture.modifyProperty("color", "oak");
console.log(furniture.color); // Output: oak