instanceof
このページでは豊富な例を用いてJavaScript(js)のinstanceof演算子の使い方を学ぶことができます。
JavaScriptのinstanceof演算子は、「左側に指定した値」が「右側で指定したオブジェクトのインスタンス」であるかどうかを判定します。
「インスタンスであるかどうか」という表現ですが、より詳細には「コンストラクタのprototypeプロパティを持っているかどうか」と言い換えることできます。
instanceof演算子の「左側に指定した値」が「右側に指定したオブジェクトのコンストラクタ」のprototypeプロパティを持っていればtrue
を、
持っていなければfalse
を返り値として返します。
TL;DR
基本
// instanceofの左側の値が右側のオブジェクトインスタンスかどうかを判定する
// 配列の場合
const array1 = ['js', 'javascript'];
const returnValue1 = array1 instanceof Array;
console.log(returnValue1);
==> true
// 返り値は真偽値(boolean)です
console.log(typeof returnValue1);
==> boolean
// 異なればfalseが返る
const returnValue2 = array1 instanceof Date;
console.log(returnValue2);
==> false
// オブジェクトの場合
const object1 = { name: 'Olivia' };
console.log(object1 instanceof Object);
==> true
// 日付(Date型)の場合
const date1 = new Date();
console.log(date1 instanceof Date);
==> true
関連情報:typeof演算子の使用方法
Objectからの派生型
// いくつかのオブジェクトはObjectからの派生であるのでtrue
// Arrayオブエジェクト(配列)の場合
const array1 = ['js', 'javascript'];
console.log(array1 instanceof Array);
==> true
console.log(array1 instanceof Object);
==> true
// Dateオブジェクトの場合
const date1 = new Date();
console.log(date1 instanceof Object);
==> true
// nullは異なる
console.log(null instanceof Object);
==> false
プリミティブ型の判定
// 文字列自体はプリミティブ型
const string1 = 'JavaScript';
console.log(string1 instanceof String);
==> false
// Stringオブジェクトでチェックする
const stringObject1 = new String('JavaScript');
console.log(stringObject1 instanceof String);
==> true
// 数値
console.log(100 instanceof Number);
==> false
console.log(new Number(100) instanceof Number);
==> true
// 真偽値
console.log(true instanceof Boolean);
==> false
console.log(new Boolean(true) instanceof Boolean);
==> true
独自クラス・コンストラクタを用いた挙動の確認
// コンストラクタ関数の定義(クラス)
function Foo() {}
function Bar() {}
// instanceofはprototypeプロパティを元に判定する
const foo = new Foo();
console.log(foo instanceof Foo);
==> true
console.log(foo instanceof Bar);
==> false
// FooとBarのprototypeプロパティを同一にする
Foo.prototype = Bar.prototype;
// Barとprototypeプロパティが一緒なのでtrue
const changedFoo = new Foo();
console.log(changedFoo instanceof Foo);
==> true
console.log(changedFoo instanceof Bar);
==> true
解説
基本
instanceof演算子は「左側に指定した値」が「右側で指定したオブジェクトのインスタンス」であるかどうかを判定し、
「右側で指定したオブジェクトのインスタンス」であればtrue
を、そうでなければfalse
を返り値として返します。
返り値の型はboolean
です。
instanceof演算子を使用した「オブジェクトのインスタンスであるかどうか」という判定は、 「そのオブジェクトのprototypeプロパティを持っているかどうか」を基準にして判定されます。
// オブジェクト
const object1 = {};
const returnValue1 = object1 instanceof Object;
console.log(returnValue1);
==> true
console.log(typeof returnValue1);
==> boolean
const returnValue2 = object1 instanceof Array;
console.log(returnValue2);
==> false
// 配列
const array1 = ['js'];
console.log(array1 instanceof Array);
==> true
// Dateオブジェクトの場合
console.log(new Date() instanceof Date);
==> true
関連情報:typeof演算子の使用方法
Objectからの派生型
ArrayオブジェクトやDateオブジェクトなどはObjectから派生した型のオブジェクトなので、Objectのインスタンスと判定されます。
これは前項で説明したとおり、instanceof演算子が「指定したオブジェクトのprototypeプロパティを持っているかどうか」を判定基準にしているからです。
// Dateオブジェクト
const date1 = new Date();
console.log(date1 instanceof Date);
==> true
console.log(date1 instanceof Object);
==> true
// Arrayオブジェクト(配列)
const array1 = [];
console.log(array1 instanceof Object);
==> true
// nullの場合
console.log(null instanceof Object);
==> false
プリミティブ型の判定
プリミティブ型とそのラッパーオブジェクトをinstanceof演算子を用いて比較・判定する場合、返される結果に注意してください。
たとえば'javascript'
という文字列リテラルが存在する場合、
この文字列リテラルはプリミティブ型の文字列であり、オブジェクトではありません。
よって、instanceof演算子の右側にString
オブジェクトを指定した際の返り値はfalse
となります。
// 数値
const number1 = 3.14;
console.log(number1 instanceof Number);
==> false
// Numberオブジェクトに変換して確認する
console.log(new Number(number1) instanceof Number);
==> true
// 文字列
console.log('js' instanceof String);
==> false
console.log(new String('js') instanceof String);
==> true
独自クラス・コンストラクタを用いた挙動の確認
以下のコード例では、instanceof演算子がprototypeプロパティを基準にして判定を行っていることを表しました。
定義した独自クラス(コンストラクタ関数)から生成されたオブジェクトインスタンスの挙動の変化を確認してください。
// コンストラクタ関数の定義(クラス)
function Apple() {}
function Banana() {}
// instanceofはprototypeプロパティを元に判定する
const apple = new Apple();
console.log(apple instanceof Apple);
==> true
console.log(apple instanceof Banana);
==> false
// AppleとBananaのprototypeプロパティを同一にする
Apple.prototype = Banana.prototype;
// Bananaとprototypeプロパティが一緒なのでtrue
const changedApple = new Apple();
console.log(changedApple instanceof Apple);
==> true
console.log(changedApple instanceof Banana);
==> true
1次情報
JavaScriptのデータ型とデータ構造 - MDN web docs