JavaScript 型検出方法の例のチュートリアル

序文

JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーション制作、スクリプト制作、小規模プログラムなど多くの分野でかけがえのない位置を占めています。著者はしばらくフロントエンドを勉強してきましたが、JS の知識ポイントは非常に複雑だと感じているため、学んだ知識、考え、洞察の一部を記録しました。

JS 基本型

JavaScript の基本型は、プリミティブ基本型と参照データ型に分けられます。

プリミティブ基本型:

番号
弦
ブール値
ヌル
未定義
シンボル

参照データ型:

物体
関数
配列
日付
正規表現

注: ES5にはシンボル型はありません

タイプ検出

型検出には、次の 5 つの一般的な方法があります。

型
インスタンス
オブジェクト.プロトタイプ.toString
コンストラクタ
アヒル型

1.typeofは基本型を決定する

キーワード typeof によって返される型名には、数値、文字列、ブール値、未定義、シンボル、オブジェクト、関数の 7 つの型のみが含まれます。

null およびほとんどの参照型は typeof を使用して判断できません。

数値を32とします
str = "32" とします
ブール値を true にする
null = nullとする
undef = 未定義とする
sym = シンボル() とします。

const obj = 新しいオブジェクト()
const arr = 新しい配列()
const fun = 新しい関数()
定数date = 新しいDate()
const reg = 新しい RegExp()

console.log(typeof num) //数値
console.log(typeof str) //文字列
console.log(typeof bool) //ブール値
console.log(typeof nul) //オブジェクト
console.log(typeof undef) //未定義
console.log(typeof sym) //シンボル

console.log(typeof obj) //オブジェクト
console.log(typeof arr) //オブジェクト
console.log(typeof fun) //関数
console.log(typeof date) //オブジェクト
console.log(typeof reg) //オブジェクト

注意: typeofを使用してnull、配列、日付、正規表現などを判断する場合、結果はすべてオブジェクトになります。

2.instanceofは参照データ型を決定します

Instanceof は変数の __proto__ プロパティを使用して、型判定のためのプロトタイプの prototype プロパティを指します。基本データ型に直接代入方式を使用する場合は、__proto__ プロパティが存在しないため、コンストラクタを使用する必要があることに注意してください。

const obj = 新しいオブジェクト()
const arr = 新しい配列()
const fun = 新しい関数()
定数date = 新しいDate()
const reg = 新しい RegExp()

console.log(obj インスタンスオブオブジェクト) //true
console.log(arr 配列インスタンス) //true
console.log(fun instanceof Function) //true
console.log(date インスタンス Date) //true
console.log(reg インスタンスの RegExp) //true

num1 = 32とする
num2 = 新しい数値(32)
console.log(num1 インスタンス of Number) //false
console.log(num2 インスタンス of Number) //true

さらに、instanceof は arr が Array のインスタンスであることを判別できますが、Object のインスタンスであるとも認識するため、不明な参照型を判別するのに適していません。

const arr = 新しい配列()
console.log(arr 配列インスタンス) //true
console.log(arr インスタンスオブオブジェクト) //true

その理由は、arr.__proto__ の __proto__ プロパティが Object のプロトタイプオブジェクトを指しているためです。

この場合はコンストラクターを使用して判断を行うことができます。

注意: instanceof は、異なるウィンドウまたは iframe 間のオブジェクト検出には使用できません。

3. Object.prototype.toStringは型を決定する

toString() は Object のプロトタイプメソッドです。Object を継承するすべてのオブジェクトには toString メソッドがあります。

typeof がオブジェクトの値を返すすべてのオブジェクトには、内部プロパティ [[class]] が含まれています。このプロパティには直接アクセスすることはできず、通常は Object.prototype.toString() を介して表示されます。

toString メソッドがオーバーライドされていない場合、デフォルトでは現在のオブジェクトの [[Class]] が [object Xxx] の形式で返されます。ここで、Xxx はオブジェクトの型です。ただし、Object 型のオブジェクトを除き、他の型では toString メソッドを直接使用すると、内容を含む文字列が直接返されるため、call メソッドまたは apply メソッドを使用して toString メソッドの実行コンテキストを変更する必要があります。

数値を32とします
str = "32" とします
ブール値を true にする
null = nullとする
undef = 未定義とする
sym = シンボル() とします。

const obj = 新しいオブジェクト()
const arr = 新しい配列()
const fun = 新しい関数()
定数date = 新しいDate()
const reg = 新しい RpgExp()

console.log(Object.prototype.toString.apply(num)) //"[オブジェクト番号]"
console.log(Object.prototype.toString.apply(str)) //"[オブジェクト String]"
console.log(Object.prototype.toString.apply(bool)) //"[オブジェクト ブール値]"
console.log(Object.prototype.toString.apply(nul)) //"[オブジェクト Null"
console.log(Object.prototype.toString.apply(undef)) //"[オブジェクトが未定義です]"
console.log(Object.prototype.toString.apply(sym) //"[オブジェクト シンボル]"

console.log(Object.prototype.toString.call(obj)) //"[オブジェクト オブジェクト]"
console.log(Object.prototype.toString.call(arr)) //"[オブジェクト配列]"
console.log(Object.prototype.toString.call(fun)) //"[オブジェクト関数]"
console.log(Object.prototype.toString.call(date)) //"[オブジェクト Date]"
console.log(Object.prototype.toString.call(reg) //"[オブジェクト RegExp]"

Object.prototype.toString は null を判定できますが、通常は null===null を使用して null かどうかを判定します。

4. コンストラクタが型を決定する

コンストラクタープロパティは、変数のコンストラクターを返します。もちろん、文字列インターセプションを使用して、判断のためのコンストラクター名を取得し、" ".constructor === String のようにブール値を取得することもできます。

数値を32とします
str = "32" とします
ブール値を true にする
null = nullとする
undef = 未定義とする
sym = シンボル() とします。

定数オブジェクト = 新しいオブジェクト()
const arr = 新しい配列()
const fun = 新しい関数()
定数date = 新しいDate()
const reg = 新しい RegExp()

console.log(num.constructor) //ƒ Number() { [ネイティブコード] }
console.log(str.constructor) //ƒ String() { [ネイティブコード] }
console.log(bool.constructor) //ƒ Boolean() { [ネイティブコード] }
console.log(nul.constructor) // キャッチされない TypeError: null のプロパティ 'constructor' を読み取ることができません
console.log(undef.constructor) // キャッチされない TypeError: 未定義のプロパティ 'constructor' を読み取ることができません
console.log(sym.constructor) //ƒ Symbol() { [ネイティブコード] }

console.log(obj.constructor === Object) //true
console.log(arr.constructor === 配列) //true
console.log(fun.constructor === Function) //true
console.log(date.constructor === 日付) //true
console.log(reg.constructor === RegExp) //true

コンストラクターは null および undefined を判断するために使用できませんが、instanceof を使用すると回避できます。arr のプロトタイプオブジェクトは、Array または Object のいずれかになります。

5. アヒルのタイプは特徴を利用してタイプを決定します

プログラミングにおいて、ダックタイピングは動的型付けのスタイルです。このスタイルでは、オブジェクトの有効なセマンティクスは、特定のクラスからの継承や特定のインターフェースの実装によってではなく、「現在のメソッドとプロパティのセット」によって決定されます。

「アヒルのように歩き、アヒルのように泳ぎ、アヒルのように鳴く鳥を見たら、その鳥はアヒルと呼ぶことができます。」

ダックタイピングでは、オブジェクトの型ではなく、オブジェクトの動作、つまりオブジェクトが何ができるかに重点が置かれます。

たとえば、ダックタイピングを使用しない言語では、「duck」型のオブジェクトを受け取り、その「walk」メソッドと「quack」メソッドを呼び出す関数を記述できます。

その後、ダックタイピングを使用する関数では、任意のタイプのオブジェクトを受け入れ、その「walk」メソッドと「quack」メソッドを呼び出すことができます。呼び出す必要のあるメソッドが存在しない場合は、ランタイムエラーが発生します。正しい「go」および「call」メソッドを持つすべてのオブジェクトがこの関数によって受け入れられます。

たとえば、オブジェクトが配列であるかどうかを判断するには、オブジェクトに push() などのメソッドがあるかどうかを確認します。

要約する

JavaScript 型検出に関するこの記事はこれで終わりです。JavaScript 型検出に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: