最近はJavaというかSpringが楽しすぎて偏っていたが「独習JavaScript 新版」という本を借りましたので、気になる章を読んでみました

ちなみにこの本の著者のYouTubeはよく見てて、さらにUdemyの講座も買ってます。JavaScriptを動画で学ぶならこの人って感じですね

今回はJavaScriptのプロトタイプについてです。プロトタイプについて知るにはそもそもJavaScriptの関数について知る必要があります。

環境

Visual Studio Codeの拡張機能”Live Server”を追加します

index.htmlを右クリックするとOpen with Live Serverの文字があるのでクリックする

ローカルサーバーが立ち上がる

実はこのLive Server知りませんでした。。

プロトタイプの前に

https://www.tohoho-web.com/js/function.htm
https://www.tohoho-web.com/js/class.htm
https://www.tohoho-web.com/js/object.htm

関数はオブジェクト

JavaScriptの関数はオブジェクトです。非常に気味が悪いというか、、、わかりづらいですよね。ただし{}のオブジェクトと違う点は()で実行可能であるところです。

const log = l => console.log(l)
const misaka = {
    name: "mikoto"
}
const sirai = function(){
    return "kuroko"
}

log(sirai()) // kuroko
log(misaka()) // Uncaught TypeError: misaka is not a function

関数がオブジェクトであれば、関数を定義することもプロパティを定義することも可能です

// 関数を定義する
function getSlip(){
    return "伝票"
}

log(getSlip) // 関数オブジェクトを表示する
log(getSlip()) // 関数オブジェクトの関数を実行した結果を表示する
// >> 伝票

// 関数オブジェクトに対してgetExSlipという新しい関数を定義する
getSlip.getExSlip = function(){
    return "拡張伝票";
}
getSlip.customer = "〇〇株式会社" // 関数オブジェクトにプロパティを設定する

log(getSlip.getExSlip) // 関数オブジェクトに定義された関数オブジェクトを表示する
log(getSlip.getExSlip()) // 関数オブジェクトに定義された関数オブジェクトの関数を実行した結果を表示する
// >> 拡張伝票
log(getSlip.customer) // 関数オブジェクトのプロパティを表示する
// >> 〇〇株式会社

実行可能であること以外、本当にオブジェクトと同じであることが確認できました。これがその大昔に関数を使ってクラスを再現していたと言われる所以でしょうか。。

コンストラクタ

関数に対してnew演算子を利用することでコンストラクタ関数にすることができます。classのconstructorと同様の動きをする。

コンストラクタは新しいオブジェクトの生成を行います

//クラスのコンストラクタ
class Slip {
    constructor(name){
        this.name = name
    }
}
//コンストラクタ関数
function SlipFunction(name){
    this.name = name
}

const accept = new SlipFunction("受注")
log(accept.name) // 受注
const sales = new Slip("売上")
log(sales.name) // 売上
// どちらのthisもオブジェクトのインスタンスを参照する
SlipFunction.temp = "ほげ"
SlipFunction.fuga = function(){
    return "fuga";
}
log(accept.temp) // undefined このインスタンスにはないプロパティを参照
log(SlipFunction.temp) // ほげ
log(SlipFunction.fuga()) // fuga
log(accept.fuga()) // error [ Uncaught TypeError: accept.fuga is not a function ] このインスタンスにはないメソッドを実行

newして新しいインスタンスを生成している
- あとから関数オブジェクトにプロパティや関数を定義しても、インスタンスからはアクセスできません

ちなみに、オブジェクトを生成する{}はnew Objectを簡略化したものです。

プロトタイプ

本題のプロトタイプについて見ていきます。

MDNにはプロトタイプについてこう書いてあります

また、Noteエリアにも重要なことが書かれています。

また後で確認していきます。

まずはプロトタイプの特徴を見ていきます。

関数オブジェクトに保持される特別なオブジェクト

// 普通のオブジェクト
const hoge = {}
// 関数オブジェクト
const func = function(){}

log("prototype" in hoge) // false
log("prototype" in func) // true

普通のオブジェクトとして定義したhogeにはprototypeがないことがわかります。関数オブジェクト特有のオブジェクトであることがわかります。

log(func.prototype)
log(func.prototype.constructor)

またconstructorという関数を持っていることがわかります。

関数をプロトタイプに定義して利用する

プロトタイプに定義された関数はインスタンス(newしたオブジェクト)から実行可能なメソッドになる

// コンストラクタのとこでも見たように、thisを設定することでインスタンスの変数として定義できる
function Slip(name){
    this.name = name
}
// プロトタイプに定義する関数はオブジェクトから実行可能
Slip.prototype.getSlipName = function(){
    return this.name
}
//　これはダメ
Slip.setSlipName = function(name){
    this.name = name
    return `新しい名前${this.name}`
}
const accept = new Slip("受注")
const sales = new Slip("売上")

log(accept.getSlipName()) //受注
log(sales.getSlipName()) //売上

log(accept.setSlipName("受注赤")) // ncaught TypeError: accept.setSlipName is not a function

プロトタイプに定義した関数は、インスタンス化したオブジェクトからメソッドとして利用可能になっている
クラスのメソッドと一緒

protoに参照がコピーされる

オブジェクトをインスタンス化した時には、__proto__というオブジェクトに関数オブジェクトのprototypeに格納されているオブジェクトへの参照がコピーされる。また__protp__は省略可能である。

function Slip(name){
    this.name = name
}
// プロトタイプに定義する関数はオブジェクトから実行可能
Slip.prototype.getSlipName = function(){
    return this.name
}
const accept = new Slip("受注")

log(accept)
log(typeof accept.__proto__ === 'object') // true

関数オブジェクトにはprototypeというオブジェクトが付与される
インスタンスには__proto__というオブジェクトが付与され、それはprototypeへの参照である
[[Prototype]]は隠しプロパティで、この隠しプロパティへのアクセス方法が__protp__です
- そしてこれはprototypeへの参照です

クラスで定義されているメソッドの書き換え

クラスで定義されているメソッドを上書きしたり、メソッドを追加したりすることもできます。

const log = l => console.log(l)

class Human{
    constructor(name){
        this.name = name
    }
    call(){
        return `${this.name}です`
    }
}

// メソッドの上書き
Human.prototype.call = function(){
    return "BAD"
}
// メソッドの追加
Human.prototype.add = function(){
    return "追加されたメソッドです"
}

const human = new Human("JavaScript")
log(human.call()) // BAD
log(human.__proto__.call()) // BAD
log(human.add()) // 追加されたメソッドです

Humanクラスというのも関数オブジェクトであると考えれば理解できます。JavaScriptはプロトタイプベースと呼ばれ、classというのはただのシンタックスシュガーであるということですね。

継承

まずはObject.createメソッドについて確認します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create

https://qiita.com/yoshiwatanabe/items/338705a20e8475e4057e

// 既存のオブジェクト
const validation = {
    vaild(){
        return true
    },
    getMessage(){
        return "必須項目が入力されていません"
    }
}

const emailValidation = Object.create(validation)
log(emailValidation)
log(emailValidation.__proto__.getMessage()) // 必須項目が入力されていません
log(emailValidation.getMessage()) // 必須項目が入力されていません
log(emailValidation()) //　error is not a function

emailValidationのプロトタイプにはvalidationへの参照が設定されています
emailValidationはgetMessageなどのメソッドを持っていませんが、prototypeへの参照を辿ってgetMessageにアクセスします。
他のオブジェクトの機能を引き継いでいるのでこれを

プロトタイプ継承

他の関数オブジェクトのprototypeを継承することをプロトタイプ継承といいます。

function email() {}
function htmlEmail() {}

email.prototype.send = function(){
    return "メッセージを送信しました"
}
// emailのプロトタイプを継承する
htmlEmail.prototype = Object.create(email.prototype)

htmlEmail.prototype.toHtml = function(){
    return "HTMLに変換しました"
}
const htmlEmailer = new htmlEmail();
log(htmlEmailer)
log(htmlEmailer.send())

プロトタイプが他のプロトタイプを参照している形になっています。

プロトタイプチェーン

このようにプロトタイプが他のプロトタイプを参照していくことをプロトタイプチェーンといいます。

プロトタイプの動きはクラスの動きによく似ています。これこそが大昔に関数を使ってクラスを模倣していたと言われる所以なのですね。

プロトタイプを振り返る

最後に、もう一度MDNの説明を振り返ってみます。

オブジェクトの prototypeはインスタンス上のプロパティ
- newしたインスタンス側が使うプロトタイプ、つまり__proto__で参照できるプロトタイプのこと
コンストラクタ関数のprototype プロパティはコンストラクタ上のプロパティ
- 各インスタンスから参照されるプロトタイプ
- 関数オブジェクトに対して定義されるプロトタイプ

みたいな感じですかね。

通常コンストラクタとする関数にはパスカルケースを使います。ただし今回はコンストラクタ関数という特別な関数があるわけでなく、関数はオブジェクトであるということを前面に押し出すために、それに沿わずに関数を定義しています。

その他参考

JavaScriptのプロトタイプ：prototypeプロパティ
javascriptでメソッドを定義する際にprototypeを使う理由を教えて下さい
プロトタイプ継承

独習JavaScript | プロトタイプ