ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

クラスチェック: "instanceof"

著者：Eve Cole 更新時間：2024-12-17 09:24:58

instanceof演算子を使用すると、オブジェクトが特定のクラスに属しているかどうかを確認できます。継承も考慮されます。

このようなチェックは多くの場合に必要となる場合があります。たとえば、型に応じて引数を異なる方法で処理する多態性関数を構築するために使用できます。

インスタンスオブ演算子

構文は次のとおりです。

 obj クラスのインスタンス

objそのClassまたはそれを継承するクラスに属している場合はtrueを返します。

例えば：

クラスウサギ {}
let Rabbit = new Rabbit();

// Rabbitクラスのオブジェクトですか？
alert( Rabbit インスタンスof Rabbit ); // 真実

コンストラクター関数でも動作します。

 // クラスの代わりに
関数 Rabbit() {}

alert( new Rabbit() インスタンスの Rabbit ); // 真実

…そしてArrayのような組み込みクラスを使用すると:

 arr = [1, 2, 3] とします。
alert( arr 配列のインスタンス ); // 真実
アラート(arr オブジェクトのインスタンス); // 真実

arrもObjectクラスに属していることに注意してください。これは、 ArrayプロトタイプとしてObjectを継承するためです。

通常、 instanceofチェックのためにプロトタイプ チェーンを調べます。静的メソッドSymbol.hasInstanceにカスタム ロジックを設定することもできます。

obj instanceof Classのアルゴリズムは、大まかに次のように動作します。

  1. 静的メソッドSymbol.hasInstanceがある場合は、それをClass[Symbol.hasInstance](obj)と呼びます。 trueまたはfalseを返すはずです。これで完了です。これが、 instanceofの動作をカスタマイズする方法です。

    例えば：

     // 以下を前提としたinstanceOfチェックを設定します。
// canEat プロパティを持つものはすべて動物です
クラス動物{
  static [Symbol.hasInstance](obj) {
    (obj.canEat) が true を返す場合。
  }
}

let obj = { canEat: true };

アラート(動物のオブジェクトインスタンス); // true: Animal[Symbol.hasInstance](obj) が呼び出されます

  2. ほとんどのクラスにはSymbol.hasInstanceがありません。その場合、標準ロジックが使用されます。obj obj instanceOf Class Class.prototype objプロトタイプ チェーン内のプロトタイプの 1 つと等しいかどうかをチェックします。

    言い換えれば、次のように次々と比較します。

     obj.__proto__ === クラス.プロトタイプ?
obj.__proto__.__proto__ === クラス.プロトタイプ?
obj.__proto__.__proto__.__proto__ === Class.prototype?
...
// いずれかの答えが true の場合、true を返します
// それ以外の場合、チェーンの最後に到達した場合は false を返します

    上の例では、 rabbit.__proto__ === Rabbit.prototypeなので、すぐに答えが得られます。

    継承の場合、照合は 2 番目のステップで行われます。

    クラス動物 {}
クラス Rabbit は Animal {} を拡張します

let Rabbit = new Rabbit();
アラート(動物のウサギのインスタンス); // 真実

// Rabbit.__proto__ === Animal.prototype (一致しません)
// Rabbit.__proto__.__proto__ === Animal.prototype (一致!)

以下は、 rabbit instanceof AnimalとAnimal.prototypeを比較する図です。

ちなみに、 objA.isPrototypeOf(objB) というメソッドもあります。これは、 objA objBのプロトタイプのチェーンのどこかにある場合にtrue返します。したがって、 obj instanceof ClassのテストはClass.prototype.isPrototypeOf(obj)と言い換えることができます。

面白いことに、 Classコンストラクター自体はチェックに参加しません。プロトタイプのチェーンとClass.prototypeのみが重要です。

これにより、オブジェクトの作成後にprototypeプロパティが変更されると、興味深い結果が生じる可能性があります。

ここのように:

関数 Rabbit() {}
let Rabbit = new Rabbit();

// プロトタイプを変更しました
Rabbit.prototype = {};

// ...もうウサギではありません!
alert( Rabbit インスタンスof Rabbit ); // 間違い

ボーナス: 型の Object.prototype.toString

プレーンオブジェクトが[object Object]として文字列に変換されることはすでにわかっています。

 obj = {} にします。

アラート(obj); // [オブジェクト オブジェクト]
アラート(obj.toString()); // 同じ

それがtoStringの実装です。しかし、 toString実際にはそれよりもはるかに強力にする隠れた機能があります。これを拡張typeofとして、また、 instanceofの代替として使用できます。

奇妙に聞こえますか？確かに。謎を解いてみましょう。

仕様により、組み込みのtoStringオブジェクトから抽出し、他の値のコンテキストで実行できます。そして、その結果はその値に依存します。

  • 数値の場合は[object Number]となります。

  • ブール値の場合、 [object Boolean]になります。

  • nullの場合: [object Null]

  • undefinedの場合: [object Undefined]

  • 配列の場合: [object Array]

  • …など（カスタマイズ可能）。

実演してみましょう:

 // 便宜上、toString メソッドを変数にコピーします
objectToString = Object.prototype.toString; にします。

// これは何の型ですか?
arr = []; とします。

alert( objectToString.call(arr) ); // [オブジェクト配列]

ここでは、「デコレータと転送」の章で説明されているように call/apply を使用して、 this=arrコンテキストで関数objectToStringを実行しました。

内部的には、 toStringアルゴリズムがthis検査し、対応する結果を返します。その他の例:

 let s = Object.prototype.toString;

アラート( s.call(123) ); // [オブジェクト番号]
アラート( s.call(null) ); // [オブジェクト Null]
アラート( s.call(アラート) ); // [オブジェクト関数]

Symbol.toStringTag

オブジェクトtoStringの動作は、特別なオブジェクト プロパティSymbol.toStringTagを使用してカスタマイズできます。

例えば：

ユーザー = { にします
  [Symbol.toStringTag]: "ユーザー"
};

アラート( {}.toString.call(user) ); // [オブジェクト ユーザー]

ほとんどの環境固有のオブジェクトには、そのようなプロパティがあります。以下にブラウザ固有の例をいくつか示します。

 // 環境固有のオブジェクトとクラスの toStringTag:
alert( window[Symbol.toStringTag]); // ウィンドウ
alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest

alert( {}.toString.call(window) ); // [オブジェクトウィンドウ]
alert( {}.toString.call(new XMLHttpRequest()) ); // [オブジェクト XMLHttpRequest]

ご覧のとおり、結果は正確にSymbol.toStringTag (存在する場合) であり、 [object ...]にラップされています。

最後に、プリミティブ データ型だけでなく、組み込みオブジェクトにも機能し、カスタマイズすることもできる「強化された typeof」があります。

単にチェックするだけではなく文字列として型を取得したい場合は、組み込みオブジェクトのinstanceofの代わりに{}.toString.callを使用できます。

まとめ

私たちが知っている型チェック方法をまとめてみましょう。


のために働く返品
typeofプリミティブ弦
{}.toStringプリミティブ、組み込みオブジェクト、 Symbol.toStringTagを持つオブジェクト弦
instanceofオブジェクト真/偽

ご覧のとおり、 {}.toString技術的には「より高度な」 typeofです。

そして、 instanceof演算子は、クラス階層を操作していて、継承を考慮してクラスをチェックしたい場合に非常に役立ちます。

タスク

奇妙なインスタンス

重要度: 5

以下のコードで、 instanceof trueを返すのはなぜですか? a B()によって作成されたものではないことが簡単にわかります。

関数 A() {}
関数 B() {}

A.プロトタイプ = B.プロトタイプ = {};

a = 新しい A(); とします。

alert( B のインスタンス); // 真実

ええ、確かに奇妙に見えます。

しかし、 instanceof関数ではなく、プロトタイプチェーンと照合するそのprototypeを考慮します。

そしてここではa.__proto__ == B.prototypeなので、 instanceof trueを返します。

そのため、 instanceofのロジックにより、 prototype実際にはコンストラクター関数ではなく型を定義します。

関連記事