JavaScriptのプロトタイププロパティを学ぶ

以下のページでJavaScriptを体系的に学んでいます。 www.mojage.club

本記事は、JavaScriptのプロトタイププロパティについて纏めています。

Sponsored Link

プロトタイププロパティ

オブジェクトを生成した際、定義していないファンクションを使用することができる場合があります。これはプロトタイプチェーンの参照により上位のプロトタイプが持つプロパティを参照しているためです。

    var myArray = ['foo', 'bar'];
    
    console.log(myArray.join()); //'foo,bar'
    console.log(myArray.hasOwnProperty('join')); //'false'
    console.log(Array.prototype.hasOwnProperty('join')); //'ture'
    
    console.log(myArray.toLocaleString());  //'foo,bar'
    console.log(myArray.hasOwnProperty('toLocaleString')); //'false'
    console.log(Object.prototype.hasOwnProperty('toLocaleString')); //'ture'

上記では、join()Array.prototypeに、toLocaleString()Object.prototypeに存在するプロパティを参照しています。 プロトタイププロパティとは、全てのfunction()インスタンスで生成したオブジェクト全てに継承されるプロパティのことです。

デフォルトのプロトタイププロパティはObject()オブジェクト

プロトタイププロパティはfunction()コンストラクタによってオブジェクトが作成される際に、JavaScriptが裏で生成するプロパティです。この動きを手動で実行するとしたら以下のようになります。

    var myFunction = function(){};
    myFunction.protorype = {};
    console.log(myFunction.prototype);  // empty object

コンストラクタファンクションから生成されたインスタンス

これはそのコンストラクタのプロトタイププロパティにリンクされます。
Object (), Array(), Function()の様なコンストラクタから生成されたインスタンスは__prot__(IE非対応)というリンクを持ち、これにそのインスタンスを生成したコンストラクタのプロトタイププロパティがセットされます。

    Array.prototype.foo = 'foo';
    var myArray = new Array();
    console.log(myArray.__prot__.foo); // foo

プロトタイプチェーンの最終参照先はObject.prototype

プロパティを参照する際、自身のプロパティ→コンストラクタのプロトタイププロパティ→Object.prototypeの順に参照します。

    var myArray = ['foo', 'bar'];
    console.log(myArray.toLocaleString());  //'foo,bar'
    console.log(myArray.hasOwnProperty('toLocaleString')); //'false'
    console.log(Object.prototype.hasOwnProperty('toLocaleString')); //'ture'

コンストラクタプロトタイププロパティの上書き

プロトタイププロパティを新しいオブジェクトで置き換えると、デフォルトのコンストラクタプロパティを上書きします。

    var Foo = function foo(){};
    Foo.prototype = {};
    var FooInstance = new Foo();
    console.log(FooInstance.constructor === Foo);  // false
    console.log(FooInstance.constructor);  // Object(), not Foo()

新しいオブジェクトで継承したときの値を記憶する

    var Foo = function Foo(){};
    Foo.prototype.x = 1;
    var FooInstance = new Foo();
    console.log(FooInstance.x);  // 1
    
    Foo.prototype = {x:2};
    console.log(FooInstance.x);  // 1
    
    var NewFooInstance = new Foo();
    console.log(NewFooInstance);  // 2

ユーザー定義のコンストラクタ

これもプロトタイプ継承が行われます。

    var Person = function(){};
    Person.prototype.legs = 2;
    Person.prototype.arms = 2;
    Person.prototype.countLimbs = function(){return this.legs + this.arms;};
    var chuck = Person();
    console.log(chuckcountLimbs());  // 4