ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript がオブジェクトのタイプを決定します

JavaScript がオブジェクトのタイプを決定します

高洛峰
リリース: 2016-11-28 11:43:44
オリジナル
1283 人が閲覧しました

要約すると、オブジェクトの型を決定するには主に 4 つの方法があります: コンストラクター属性、typeof 演算子、instanceof 演算子、および Object.prototype.toString() メソッドです。

constructor 属性

Constructor 事前定義されたコンストラクター属性は、コンストラクターそのものです。


var Foo = function(){};
Foo.prototype.constructor === Foo;//true new を通じてコン​​ストラクターを呼び出して生成されたオブジェクトは、コンストラクターの Prototype 属性をプロトタイプとして受け取ります。 JavaScript にはクラスの概念はありませんが、コンストラクターの機能は類似した名前のコンストラクターと同様であり、オブジェクトの型の識別子です。オブジェクトによって継承されたコンストラクター プロパティにアクセスすると、オブジェクトの型を表示できます。 JavaScript はアクセス時にラッパー オブジェクトを形成するため、プリミティブ型の変数もコンストラクター プロパティにアクセスできます。


1 //基本オブジェクト
2 var obj = {name: "obj"};
3 obj.constructor === Object;//true
4
5 //自己定義の「クラス」
6 var Foo = function(){};
7 var f = new Foo();
8 f.constructor === Foo;//true
9
10 //プリミティブ型
11 //数値
12 var num = 1;
13 num.constructor === 数値;//true
14 var nan = NaN;
15 nan.constructor === 数値;//true
16 //Boolean
17 var b = true;
18 b.constructor = == Boolean;//true
19 //String
20 var s = "string";
21 s.constructor === String;//true
22 //Function
23 var Fun =function(){};
24 Fun.constructor === Function;//true; ただし、コンストラクタ属性はコピーまたは上書きできるため、型判定エラーが発生します。通常、コンストラクター プロパティに意図的に値を割り当てることはありませんが、コンストラクター プロパティの値が予期した値と異なる場合があります。次の例を見てください:


varbaseClass = function(){};
varderivedClass = function(){};
derivedClass.prototype = newbaseClass();

var obj = newderivedClass();
obj .constructor ===由来Class;//false;
obj.constructor ===baseClass;//true;サブクラスのプロトタイプは親クラスのインスタンスに基づいているため、サブクラスのインスタンスを介してコンストラクターにアクセスするのは親です。クラスコンストラクター。そこで、JavaScriptのオブジェクト指向プログラミングでは、サブクラス定義時にコンストラクタ属性を修正するコードを追加します。


derivedClass.prototype.constructor =derivedClass; 変数の型を決めるのにコンストラクターを使うのは便利ですが、必ずしも安全というわけではないので注意が必要です。

クロスフレームおよびクロスウィンドウの問題:

異なるフレームまたは異なるウィンドウの変数からオブジェクトのタイプを決定する場合、コンストラクター属性は正しく機能しません。ウィンドウごとにコアのタイプが異なるためです [1]。

instanceof 演算子

instanceof 演算子を使用して、オブジェクトのプロトタイプ チェーンにコンストラクターのプロトタイプ属性があるかどうかを判断します [2]。プロトタイプチェーンの概念については、「JavaScript オブジェクト指向プログラミング (1) プロトタイプと継承」を参照してください。次のコードは、プロトタイプ チェーン obj1->derivedClass.prototype->baseClass.prototype->.​​..->Object.prototype を形成します。 Object.prototype はすべてのオブジェクトのプロトタイプであり、anyObj インスタンスの Object === true です。


varbaseClass = function(){};
varderivedClass = function(){};
derivedClass.prototype = newbaseClass();//継承を使用

var obj1 = newderivedClass();
obj1instanceofbaseClass ;//true
obj1 インスタンスオブ派生クラス;//真
obj1 オブジェクトインスタンス;//真

obj2 = Object.create(derivedClass.prototype);
obj2 インスタンスオブベースクラス;//真
obj2 インスタンスオブ派生クラス;//true
obj2 instanceof Object;//trueconstructor 属性は、null と未定義を除くプリミティブ型 (数値、文字列、ブール型) に適用できます。 Instanceof は機能しませんが、オブジェクトをパッケージ化する方法を使用して判断できます。


3instanceofNumber // false
'abc'instanceof String // false
trueinstanceof Boolean // false

new Number(3)instanceofNumber // true
new String('abc')instanceof String //true
new Boolean(true)instanceof Boolean //true ただし、instanceof は、クロスフレームおよびクロスウィンドウの状況では正しく機能しません。

Object.prototype.toString() メソッドを使用する

Object.prototype.toString() メソッドは、オブジェクトのタイプを示す文字列を返す低レベルのメソッドです。これは、null と未定義を判断するためにも使用できます。最も一般的なタイプを以下に示します。


Object.prototype.toString.call(3);//"[オブジェクト番号]"
Object.prototype.toString.call(NaN);//"[オブジェクト番号]"
Object.prototype.toString.call ([1,2,3]);//"[オブジェクト配列]"
Object.prototype.toString.call(true);//"[オブジェクト ブール値]"
Object.prototype.toString.call("abc" );//"[オブジェクト文字列]"
Object.prototype.toString.call(/[a-z]/);//"[オブジェクト RegExp]"
Object.prototype.toString.call(function(){}); //「[オブジェクト関数]」

//Chrome と Firefox では null および未定義。IE では "[object Object]"
Object.prototype.toString.call(null);//"[object Null]"
Object.prototype.toString.call(unknown) ;//"[オブジェクト未定義]"

//自己定義オブジェクト
var a = new Foo();
Object.prototype.toString.call(a);//"[オブジェクト オブジェクト]"

//型付きラッパー
var b = new Boolean(true);
Object.prototype.toString.call(b);//"[object Boolean]"
var n = new Number(1);
Object.prototype.toString.call( n);//"[object Number]"
var s = new String("abc");
Object.prototype.toString.call(s);//"[object String]" は、インターセプトするためにスライス メソッドをよく使用します。結果 媒体型情報:


Object.prototype.toString.call("abc").slice(8,-1);//"String" は typeof 演算子を使用します

MDN ドキュメントですでに非常に詳細に説明されていますこれを紹介しました[3]。 Typeof は、「未定義」、「オブジェクト」、「ブール値」、「数値」、「文字列」、「関数」、「xml」など、より少ない情報を返すことができます。

型 Result
未定義 "unknown"
Null "object"
Boolean "boolean"
Number "number"
String "string"
Host オブジェクト (JS 環境によって提供される) 実装依存
Function オブジェクト ([[Call を実装する) ]] ECMA-262 用語) "関数"
E4X XML オブジェクト "xml"
E4X XMLList オブジェクト "xml"
その他のオブジェクト "object"


// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number' // "数値ではない" にもかかわらず"
typeof Number(1) === 'number'; // ただし、この形式は決して使用しないでください!

// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof は常に文字列を返します
typeof String("abc") === 'string'; // ただし、この形式は使用しないでください!

// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // ただし、この形式は絶対に使用しないでください!

// 未定義
typeof unknown === 'unknown';
typeof blabla === 'unknown'; // 未定義の変数

// オブジェクト
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object'; // 通常のオブジェクトと配列を区別するには Array.isArray または Object.prototype.toString.call を使用します
typeof new Date() === 'object';

typeof new Boolean(true) === 'object '; // これは使用しないでください!
typeof new Number(1) === 'object' // これは使用しないでください!
typeof new String("abc") === 'object'; // これは紛らわしいので使用しないでください!

// 関数
typeof function(){} === 'function';
typeof Math.sin === 'function';

typeof unknown;//"unknown"
typeof null;//"object" これは JavaScript の初期から存在します
typeof /s/ === 'object'; // ECMAScript 5.1typeof に準拠 オブジェクトをラップした結果は 'オブジェクト」には注意が必要です。ここでは、良し悪しの評価はありません (パッケージ化されたオブジェクトとプリミティブ型を区別する必要がある場合)。ただし、typeof は堅牢な方法ではないため、使用には注意が必要です。例:

var s = "I am a string";
typeof s === "string";
//String にメソッドを追加します
String.prototype.A_String_Method = function(){
console.log( this .valueOf());
console.log(typeof this);
};
s.A_String_Method();
//私は文字列です
//object


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート