【JavaScript】関数とオブジェクト㉒ チェーンメソッド

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 関数とオブジェクトについての理解を深める

#本題
###1.チェーンメソッド

メソッドチェーンともいう？？？？
その名の通りメソッドを繋げて処理が書ける

####前提

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
// それぞれメソッドを追加し、、consoleに出力できるように設定
	hello(person) {
		console.log(`${this.name} says hello ${person.name}`);
	}

	introduce() {
		console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
	}

	shakeHands(person) {
		console.log(`${this.name} shake hands with ${person.name}.`);
	}

	bye(person) {
		console.log(`Goodbye, ${person.name}.`);
	}
}

const bob = new Person('Bob', 23);
const tim = new Person('Tim', 33);

bob.hello(tim);
bob.introduce();
bob.shakeHands(tim);
bob.bye(tim);;

####例1

チェーンメソッドは１つのインスタンスに対して連続で処理が行えるように設定できるもの

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

	hello(person) {
		console.log(`${this.name} says hello ${person.name}`);
		// returnでthisを設定
		// このthisにはコンストラクター関数から作成したオブジェクトとなる
		return this;
	}

	introduce() {
		console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
		return this;
	}

	shakeHands(person) {
		console.log(`${this.name} shake hands with ${person.name}.`);
		return this;
	}

	bye(person) {
		console.log(`Goodbye, ${person.name}.`);
		return this;
	}
}

const bob = new Person('Bob', 23);
const tim = new Person('Tim', 33);

// return thisを設定すると,
// introduceが格納されているオブジェクトのインスタンスをメソッドで返してやることによって続けて書くことができる
bob.hello(tim)
.introduce()
.shakeHands(tim)
.bye(tim);;

出力結果

Bob says hello Tim
Hi, I'm Bob, 23 years old.
Bob shake hands with Tim.
Goodbye, Tim.

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム
• 【JavaScript】 メソッドチェーンを本質的に理解する