BLOG

コンストラクター関数とprototype

復習がてらメモメモ・・・

コンストラクター関数とは

新しくオブジェクトを作成するための雛形となる関数
コンストラクター関数は一般の関数の呼び出しとは異なり専用のnew演算子というものを使う。
コンストラクター関数を呼び出す際、newを先頭に付けてコンストラクター関数を実行する。


const obj = new A();

newのコンストラクター関数として呼ばれた際、オブジェクトが生成される
newを使ってオブジェクトを生成する処理をインスタンス化という。
そしてnewで作成したオブジェクトをインスタンスという。


const obj = new A();
↑インスタンス ↑インスタンス化

コード例


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

const bob = new Person('bob', 18);
const tom = new Person('Tom', 33);
const sun = new Person('Sun', 28);



bob

Person {name: "bob", age: 18}
age: 18
name: "bob"
__proto__: Object

tom

Person {name: "Tom", age: 33}
age: 33
name: "Tom"
__proto__: Object

sun

Person {name: "Sun", age: 28}
age: 28
name: "Sun"
__proto__: Object

重要なキーワード

コンストラクター関数
オブジェクトを生成するための関数

インスタンス化
オブジェクトを生成するためにはnew演算子というものを使ってインスタンス化という作業を行う

インスタンス
それによってできたオブジェクトのことをインスタンス、もしくはインスタンスオブジェクトという

prototypeとは

オブジェクトに存在する特別なプロパティー
コンストラクター関数を合わせて使用する


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

Person.prototype.hello = function(){
    console.log('hello' + this.name);
}

const bob = new Person('Bob', 18);

bob.hello();


helloBob

このようにメソッドとして追加したいプロパティをprototypeオブジェクトに格納しておくと、インスタンスごとにメソッドを実行できることとなる。

また、上記のコードはこう書ける


function Person(name, age) {
    this.name = name;
    this.age = age;
    this.hello =  function(){
        console.log('hello' + this.name);
    }

}

// Person.prototype.hello = function(){
//     console.log('hello' + this.name);
// }

const bob = new Person('Bob', 18);
const tom = new Person('Tom', 33);
const sun = new Person('Sun', 20);

bob.hello();


helloBob

メモリの効率化が関係している

インスタンス化した際にはprototypeの参照が__proto__にコピーされる