2018-12-31に投稿

JavaScriptのPrototype周りの勉強

以下のようなコードを考えてみます。

function Person(f, l) {
    this.firstName = f;
    this.lastName = l;
    this.fullName = function() {
        return `${this.firstName} ${this.lastName}`;
    }
}
var a = new Person('a', 'x');
var b = new Person('b', 'y');
a.fullName(); // "a x"
b.fullName(); // "b y"

ここのfunction Personnewキーワードを使うことで新しいオブジェクトが返されるため、オブジェクトコンストラクタと呼ばれます
ここで、インスタンスはもう作られていますが、新しい関数をab、さらにこれから作られるすべてのPersonインスタンスに適用したいケースを考えます。ここでは、あいさつを表示するgreet関数を加えます。

Person.prototype.greet = function() {
    console.log(`Hello ${this.fullName()}!`);
}
a.greet(); // "Hello a x!"
b.greet(); // "Hello b y!"
// 新しいインスタンスにも適用されるかをテストする
var c = new Person('c', 'z');
c.greet(); // "Hello c z!
// greet関数の書き換えも可能。
Person.prototype.greet = function() {
    console.log(`Hello ${this.fullName()}! Have a nice day!`);
}
a.greet(); // Hello a x! Have a nice day!
b.greet(); // Hello b y! Have a nice day!
c.greet(); // Hello c z! Have a nice day!

こういうことが可能なのは、インスタンスとインスタンスの元になったPersonPerson.prototypeが指してるオブジェクトを共有しているからです。図にするとこうなります。
JS Object prototype.png

すべてのインスタンスがPerson.prototype.__proto__で参照しています。

JSはクラス構造がないかわりにオブジェクト同士を参照していくオブジェクトチェーンが存在します。これは、指定されたプロパティがない場合、.__proto__でつながってるオブジェクトを再帰的にみていく仕組みのことです。これのおかげでインスタンスにgreet関数がなくてもgreet関数を呼び出すことができました。

以下参考になったリンクを張っておきます。
図で理解するJavaScriptのプロトタイプチェーン
や...やっと理解できた!JavaScriptのプロトタイプチェー


1kohei1

駆け出しのエンジニア

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント