01 / 05
同じ形をまとめて作る(クラス)
INPUT · スライド
作るときに値を渡す
02 / 05
コンストラクタに引数を書く
constructor(name, power) のように、かっこの中に引数(受け取る値の置き場)を書く。渡すのは new Robot("がしゃん", 10) のように new のかっこの中だよ。
関数で覚えた引数とまったく同じ仕組み。渡した順に受け取るよ。
class Robot { constructor(name, power) { this.name = name; this.power = power; }}const r = new Robot("がしゃん", 10);console.log(r.name);console.log(r.power);実行結果
がしゃん 10
03 / 05
渡す値を変えれば別ものになる
設計図は1つのまま、中身の違う実物をいくつでも作れるようになったよ。
これがクラスの本領。形は同じ、中身は別。まさに「量産するための設計図」だね。
class Robot { constructor(name, power) { this.name = name; this.power = power; }}const a = new Robot("がしゃん", 10);const b = new Robot("ぴこ", 18);console.log(a.name);console.log(b.name);実行結果
がしゃん ぴこ
04 / 05
左と右で同じ名前でもいい
this.name = name; は左右で名前が同じでちょっと不思議に見えるけど、意味はきっぱり分かれているよ。
- 左の
this.name… これから作る実物のプロパティ - 右の
name… いま受け取った引数
「受け取った値を、実物のプロパティに写す」と読めばいいよ。
05 / 05
受け取った値で計算してもいい
コンストラクタの中はふつうの処理が書ける場所。受け取った値から別のプロパティを作ることもできるよ。
作った瞬間に合計まで用意されている、というわけだね。ここから書いてみよう。
class Order { constructor(price, count) { this.price = price; this.count = count; this.total = price * count; }}const o = new Order(160, 3);console.log(o.total);実行結果
480