【JavaScript】関数とオブジェクト⑫ instanceof

はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

• 関数とオブジェクトについての理解を深める

本題

1.instanceof

どのコンストラクターから生成されたオブジェクトなのかを確認する

前提

// 関数Fをコンストラクターとして定義
function F(a,b){
    this.a = a;
    this.b = b;
}

F.prototype.c = function(){}
// インスタンス化
const instance = new F(1,2);
// F {a: 1, b: 2}と出力
console.log(instance);

これがどのコンストラクターから生成されたものなのかを確認するためにinstanceofを使用する

例1

function F(a,b){
    this.a = a;
    this.b = b;
}

F.prototype.c = function(){}
const instance = new F(1,2);
// instanceofを追加
// tureと出力される
console.log(instance instanceof F);

例2

戻り値を設定して、Fにオブジェクトが返ってくるようにするとどうなるか

function F(a,b){
    this.a = a;
    this.b = b;
    // 戻り値を設定
    return {a: 1};
}

F.prototype.c = function(){}
const instance = new F(1,2);
// Fはfalseと出力される
// つまり「関数Fから生成されたインスタンスではない」という結果になる
console.log(instance instanceof F);

例3

例1の結果と例2の結果の違いを確認する

function F(a,b){
    this.a = a;
    this.b = b;
    // 戻り値を設定
    return {a: 1};
}

F.prototype.c = function(){}
const instance = new F(1,2);
console.log(instance instanceof F);
// instanceに格納されている__proto__とFのprototypeに等価性があるか確認する
// 結果はfalse
// returnでオブジェクトが返ってきているので,instanceには{a:1}が入っている
console.log(instance.__proto__ === F.prototype);

function F(a,b){
    this.a = a;
    this.b = b;
    // return {a: 1};　これを省略せずに書くと下記のとおりとなる
    // インスタンス化してresultに格納
    const result = new Object();
    // aに１代入
    result.a = 1;
    // returnでObjectが入ったresultをFに返す
    return result;
}

F.prototype.c = function(){}
const instance = new F(1,2);
console.log(instance instanceof F);
// console.log(instance.__proto__ === F.prototype);
// コントラクター関数からFの値の中身はnew FではなくObjectとなる
// 下記の実行結果はtrueが返ってくる
console.log(instance.__proto__ === Object.prototype);

例4

このinstanceofで何ができるようになるのか

// 関数を用意
// 引数にargをもたせる
// argには配列もしくはオブジェクトが渡ってくるものとする
function fn(arg){
    // 配列として渡たす場合はpushメソッドを使用
    arg.push("value");
    // オブジェクトとして渡す場合
    arg["key"] = "value";
}

作成元のコンストラクターによってinstanceofを使用して、条件分岐を作ることができる

function fn(arg){
    if (arg instanceof Array){
        // 条件分岐でArrayが配列の場合
        arg.push("value");
    } else {
        // 条件分岐で配列以外の場合（オブジェクト）
        arg["key"] = "value";
    }
    // argの結果が返ってくるように設定
    console.log(arg);
}
// 配列の場合：['value']と出力され0番にvalueが入っている
fn([]);
// オブジェクトの場合：{key: 'value'}と実行されオブジェクトにkey: "value"と値が入っている
fn({});

今日はここまで！

参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム