JavaScriptでオブジェクトの種類を判断する方法_基礎知識

最近、私は John Resig の傑作「Pro JavaScript Techniques」を読んでいました。そこには JavaScript の種類を判断する方法について書かれていました。この記事では、typeof を使用する方法とコンストラクターを使用する 2 つの方法を紹介します。 jqueryの作者としてはjqueryで使われている型判定方法を全く紹介していないのが残念です。でも、それは問題ではないので、ここで皆さんのためにまとめておきます。

ここで私はまず皆さんに非常に便利なオンライン エディターをお勧めします: http://jsfiddle.net/。 jquery、mootools、prototype、YUI という 3 つの主流の js フレームワークのさまざまなバージョンが提供されており、単純な js テスト プログラムを作成する必要がある場合に直接使用できます。これにより、編集ソフトウェアを開いてさまざまな種類のファイルを作成する必要がなくなります。コード編集後、[実行]ボタンをクリックすれば完了です。

1.typeof

Typeof は、型判定を行うときに最も一般的に使用されるメソッドです。その利点は、シンプルで覚えやすいことです。欠点は、オブジェクト、null、配列、正規表現、およびカスタム オブジェクトを適切に判定できないことです。

以下は私のテスト コードです:

コードをコピーしますコードは次のとおりです:

var str ='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj={name: 'テスト'} ;
var nullObj=null;
var unknownObj=unknown;
var reg=/reg/;

function fn(){
alert('これは関数です');
}

function User(name){
this.name=name;
}
var user=new User('user');

console.log(typeof str);
console.log(typeof arr);
console.log(typeof num);
console.log(typeof bool);
console.log (obj の種類);
console.log(nullObj の種類);
console.log(未定義オブジェクトの種類);
console.log(reg の種類);
console.log(fn の種類);
console.log(typeof user);

コードの実行結果:

2.コンストラクター

次に、一般的には使用されないメソッド、オブジェクト コンストラクター コンストラクターを紹介します。その利点は、ほとんどのオブジェクト タイプの判定、特にカスタム オブジェクトの判定をサポートしていることです。欠点は、null および unknown に対して使用できないことです。

テスト コードは前のコードと似ていますが、typeof の代わりに XXX.constructor が使用される点が異なります。

コードをコピー コードは次のとおりです:

var str='str';
var arr =['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj= null;
var unknownObj=unknown;
var reg=/reg/;
function fn(){
alert('これは関数です');
}
function ユーザー(名前) {
this.name=name;
}
var user=new User('user');

console.log(str.constructor);
console.log(arr.constructor);
console.log(num.constructor);
console.log(bool.constructor);
console.log(obj.constructor);
console.log(reg.constructor);
console.log(fn.constructor);
console.log(user.constructor);

console.log(nullObj.constructor);
console.log(unknownObj.constructor);

実行結果:

console.log(nullObj.constructor); を実行すると、ブラウザはエラーを報告します: Uncaught TypeError: null のプロパティ 'constructor' を読み取れません。同様の問題が上記の console.log(unknownObj.constructor); でも発生します: Uncaught TypeError: unknown のプロパティ 'constructor' を読み取れません。

3.Object.prototype.toString.call()

最後に紹介するのは、jquery で使用されるメソッド、Object.prototype.toString.call() です。利点は、ほとんどの種類の判定をサポートしていることですが、唯一の欠点は、カスタム オブジェクトの判定をサポートしていないことです。

テスト コードは次のとおりです:

コードをコピーします コードは次のとおりです:

var str='str';
var arr=['1','2'];
var num=1;
var bool=true;
var obj ={name:'test'};
var nullObj=null;
var unfineedObj=unknown;
var reg=/reg/;
function fn(){
alert('thisは関数です');
}
function User(name){
this.name=name;
}
var user=new User('user');

var toString=Object.prototype.toString;

console.log(toString.call(str));
console.log(toString.call(arr));
console.log(toString.call(num));
コンソール。 log(toString.call(bool));
console.log(toString.call(obj));
console.log(toString.call(reg));
console.log(toString.call (fn));
console.log(toString.call(user));
console.log(toString.call(nullObj));
console.log(toString.call(unknownObj));

运行結果：

console.log(toString.call(user)); 返された結果は: [オブジェクト Object] であり、これ以上判断することはできません。

总结

JavaScript で頻繁に使用されるオブジェクト判定方式には、typeof、constructor、Object.prototype.toString.call() が含まれます。typeof は JavaScript 自体がサポートするメソッドであることをよく理解してください。constructor はほとんど使用されませんが、相信大家はこれを使用しています。デモでは、代表的な意思表示も確認できます。 Object.prototype.toString.call() に関しては、XXX.toString() を直接使用できないため、他と XXX.toString() には何らかの問題がある可能性があります。 ？

我们在浏览器中运行下面代码：查看运行結果：

null と unknown は toString() メソッドが存在しないため、問題が発生するため、カウンタを削除しません。その他のオブジェクトについては、toString() によって返される内容と、Object.prototype.toString.call() によって返される内容が使用されます。これは、Object.prototype.toString() メソッドがオブジェクトの型を返すように設計されているためです。String、Array、Boolean、Regexp、Number、Function はいずれも Object から継承されており、同時に Object の原型メソッドも継承されています。 xxx.toString() を実行するときに使用される再書き込み後のメソッドであり、返される結果は自然に Object.prototype.toString.call() の結果と一致しません。

上の例から、この 3 つの方法は、多くの場合、より厳密に承認され、利点が理解され、必要に応じて適切な方法を選択できます。この方法では、大部分の状況を判断できるため、[object Object] が返されたときに、コンストラクターを再度使用して、独自のオブジェクトかどうかを判断します。

复制代码代码如下:

var str='str';

var arr=['1','2'];
var num=1;
var bool=true;
var obj={name:'test'};
var nullObj=null;
var unknownObj=unknown;
var reg =/reg/;
function fn(){
alert('これは関数です');
}
function User(name){
this.name=name;
}
var user=new User('user');

console.log(str.toString());console.log(arr.toString());

console.log(num.toString());
console.log(bool) .toString());
console.log(obj.toString());
console.log(reg.toString());
console.log(fn.toString());
console.log(user.toString());
console.log(nullObj.toString());
console.log(unknownObj.toString());