JavaScript instanceof 演算子

概要: このチュートリアルでは、JavaScript のinstanceof演算子を使用して、コンストラクタのプロトタイプがオブジェクトのプロトタイプチェーンに表示されるかどうかを判断する方法を学習します。

JavaScript instanceof 演算子の紹介

instanceof演算子は、コンストラクタのプロトタイプ（constructor.prototype）がオブジェクトのプロトタイプチェーンに表示される場合にtrueを返します。

instanceof演算子の構文を以下に示します。

object instanceof contructorCode language: JavaScript (javascript)

この構文において

object はテストするオブジェクトです。
constructor はテスト対象の関数です。

JavaScript instanceof 演算子の例

次の例では、Person型を定義し、instanceof演算子を使用してオブジェクトがその型のインスタンスかどうかを確認します。

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

let p1 = new Person('John');

console.log(p1 instanceof Person); // trueCode language: JavaScript (javascript)

動作方法。

まず、コンストラクタ関数パターンを使用してPerson型を定義します。

function Person(name) {
  this.name = name;
}Code language: JavaScript (javascript)

次に、Person型の新しいオブジェクトを作成します。

let p1 = new Person('John Doe');Code language: JavaScript (javascript)

次に、personがPerson型のインスタンスかどうかを確認します。

console.log(p1 instanceof Person); // trueCode language: JavaScript (javascript)

Person.prototypeがp1オブジェクトのプロトタイプチェーンに表示されるため、trueを返します。p1のプロトタイプチェーンは、p1、Person.prototype、およびObject.prototype間のリンクです。

Object.prototypeがp1オブジェクトのプロトタイプチェーンに表示されるため、これもtrueを返します。

console.log(p1 instanceof Object); // trueCode language: JavaScript (javascript)

ES6 クラスと instanceof 演算子

次の例では、Personクラスを定義し、instanceof演算子を使用してオブジェクトがクラスのインスタンスかどうかを確認します。

class Person {
  constructor(name) {
    this.name = name;
  }
}

let p1 = new Person('John');

console.log(p1 instanceof Person); // true
Code language: JavaScript (javascript)

動作方法。

まず、Personクラスを定義します。

class Person {
  constructor(name) {
    this.name = name;
  }
}Code language: JavaScript (javascript)

次に、Personクラスの新しいインスタンスを作成します。

let p1 = new Person('John');Code language: JavaScript (javascript)

次に、p1がPersonクラスのインスタンスかどうかを確認します。

console.log(p1 instanceof Person); // trueCode language: JavaScript (javascript)

instanceof 演算子と継承

次の例では、Personクラスを拡張するEmployeeクラスを定義します。

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Employee extends Person {
  constructor(name, title) {
    super(name);
    this.title = title;
  }
}

let e1 = new Employee();

console.log(e1 instanceof Employee); // true
console.log(e1 instanceof Person); // true
console.log(e1 instanceof Object); // trueCode language: JavaScript (javascript)

e1はEmployeeクラスのインスタンスであるため、PersonクラスとObjectクラス（基底クラス）のインスタンスでもあります。

Symbol.hasInstance

ES6では、instanceof演算子はSymbol.hasInstance関数を使用して関係を確認します。Symbol.hasInstance()はオブジェクトを受け取り、型がそのオブジェクトをインスタンスとして持つ場合にtrueを返します。例えば

class Person {
  constructor(name) {
    this.name = name;
  }
}

let p1 = new Person('John');

console.log(Person[Symbol.hasInstance](p1)); // trueCode language: JavaScript (javascript)

Symbol.hasInstanceはFunctionプロトタイプで定義されているため、デフォルトですべての関数とクラスで自動的に使用できます。

サブクラスでSymbol.hasInstanceを静的メソッドとして再定義できます。例えば

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Android extends Person {
  static [Symbol.hasInstance]() {
    return false;
  }
}

let a1 = new Android('Sonny');

console.log(a1 instanceof Android); // false
console.log(a1 instanceof Person); // falseCode language: JavaScript (javascript)

まとめ

オブジェクトのプロトタイプチェーン内のconstructor.prototypeを確認するには、instanceof演算子を使用します。

このチュートリアルは役に立ちましたか？