javascript_javascript スキルで変数の型を決定する方法

JavaScript には、5 つの基本データ型と 1 つの複合データ型があります。基本データ型は、未定義、Null、Boolean、Number、および String です。複合データ型は Object であり、Object は多くの特定の型にも細分されます。タイプ: 配列、関数、日付など。今日は変数の型を決定する方法について説明します。

さまざまなメソッドを説明する前に、後続のメソッドが変数の型をどのように解析できるかを確認するために、最初にいくつかのテスト変数を定義します。以下の変数には、実際のコーディングでよく使用される型がほぼ含まれています。

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = {name:'wenzi', age:25};
var func = function(){ console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error= new Error();

1. 検出タイプを使用します

私たちが通常最もよく使用するのは、typeof を使用して変数の型を検出することです。今回は、変数の型を検出するために typeof も使用します:

console.log(
	typeof num, 
	typeof str, 
	typeof bool, 
	typeof arr, 
	typeof json, 
	typeof func, 
	typeof und, 
	typeof nul, 
	typeof date, 
	typeof reg, 
	typeof error
);
// number string boolean object	object function undefined object object object object

出力結果から判断すると、arr、json、nul、date、reg、errorはすべてオブジェクトタイプとして検出されており、その他の変数も正しく検出できています。変数の型が数値、文字列、ブール型、関数、未定義、または json であるかどうかを判断する必要がある場合は、typeof を使用して判断できます。 null を含む他の変数の型は決定できません。
また、typeof は配列型と json 型を区別できません。 typeof 変数を使用すると、配列型と json 型の両方がオブジェクトを出力するためです。

2. インスタンス検出を使用する

JavaScript では、変数の型を決定するために typeof 演算子がよく使用されます。typeof 演算子を使用すると、参照されるオブジェクトの型に関係なく、値を格納するときに問題が発生します。 「」。 ECMAScript では、この問題を解決するために別の Java 演算子 instanceof が導入されています。 instanceof 演算子は typeof 演算子に似ており、処理されるオブジェクトのタイプを識別するために使用されます。 typeof メソッドとは異なり、instanceof メソッドでは、開発者はオブジェクトが特定の型であることを明示的に確認する必要があります。例:

function Person(){

}
var Tom = new Person();
console.log(Tom instanceof Person); // true

もう一度次の例を見てみましょう:

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // true
console.log(John instancdof Person); // true

また、instanceof はマルチレベルの継承関係を検出することもできます。
さて、instanceof を使用して上記の変数を検出しましょう:

console.log(
	num instanceof Number,
	str instanceof String,
	bool instanceof Boolean,
	arr instanceof Array,
	json instanceof Object,
	func instanceof Function,
	und instanceof Object,
	nul instanceof Object,
	date instanceof Date,
	reg instanceof RegExp,
	error instanceof Error
)
// num : false 
// str : false 
// bool : false 
// arr : true 
// json : true 
// func : true 
// und : false 
// nul : false 
// date : true 
// reg : true 
// error : true

上記の実行結果から、num、str、bool の型が検出されていないことがわかりますが、次のメソッドを使用して num を作成すると、型が検出できます。

var num = new Number(123);
var str = new String('abcdef');
var boolean = new Boolean(true);

同時に、und と nul がオブジェクト タイプとして検出され、true を出力することも確認する必要があります。これは、js には Unknown と Null のグローバル タイプがないためです。und と nul は両方とも Object タイプに属します。したがって、それらは true として出力されます。

3. コンストラクターを使用して を検出します

instanceof を使用して変数の型を検出する場合、数値、「文字列」、およびブールの型を検出できません。したがって、この問題を解決する別の方法を見つける必要があります。

コンストラクターはもともとプロトタイプ オブジェクトのプロパティであり、コンストラクターを指します。ただし、インスタンス オブジェクトが属性を検索する順序に従って、インスタンス オブジェクトにインスタンス属性またはメソッドがない場合は、プロトタイプ チェーン上で検索されるため、インスタンス オブジェクトはコンストラクター属性を使用することもできます。
まず num.constructor の内容、つまり数値型変数のコンストラクターがどのようなものであるかを出力しましょう:

関数 Number() { [ネイティブ コード] }

これは Number のコンストラクターを指していることがわかります。したがって、num.constructor==Number を使用して、num が Number 型であるかどうかを判断できます。

function Person(){

}
var Tom = new Person();

// undefined和null没有constructor属性
console.log(
	Tom.constructor==Person,
	num.constructor==Number,
	str.constructor==String,
	bool.constructor==Boolean,
	arr.constructor==Array,
	json.constructor==Object,
	func.constructor==Function,
	date.constructor==Date,
	reg.constructor==RegExp,
	error.constructor==Error
);
// 所有结果均为true

出力結果から、unknown と null を除いて、他の型の変数の型はコンストラクターを使用して決定できることがわかります。

ただし、コンストラクターの属性は変更される可能性があり、検出結果が不正確になる可能性があるため、コンストラクターの使用は安全ではありません。例:

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true

上記の例では、Student プロトタイプのコンストラクターが person を指すように変更されており、その結果、インスタンス オブジェクト John の実際のコンストラクターを検出できなくなります。

同時に、instanceof と construcor を使用する場合、判定対象の配列は現在のページで宣言する必要があります。たとえば、ページ（親ページ）にはフレームがあり、そのフレーム内でページ（子ページ）が参照されます。このとき、子ページ内で配列が宣言され、親ページの変数に代入されます。と判断された場合、Array == object.constructor は false を返します。 理由:
1. 配列は参照データです。転送処理中は参照アドレスの転送のみです。
2. 各ページの Array ネイティブ オブジェクトが参照するアドレスは異なります。サブページで宣言された配列の対応するコンストラクターは、親ページが判断し、使用される Array は次のとおりです。サブページの配列と等しくないことを覚えておいてください。そうしないと、問題を追跡するのが難しくなります。

4. Object.prototype.toString.call を使用する

これが何であるかは気にしないで、まず変数の型をどのように検出するかを見てみましょう:

console.log(
	Object.prototype.toString.call(num),
	Object.prototype.toString.call(str),
	Object.prototype.toString.call(bool),
	Object.prototype.toString.call(arr),
	Object.prototype.toString.call(json),
	Object.prototype.toString.call(func),
	Object.prototype.toString.call(und),
	Object.prototype.toString.call(nul),
	Object.prototype.toString.call(date),
	Object.prototype.toString.call(reg),
	Object.prototype.toString.call(error)
);
// '[object Number]' '[object String]' '[object Boolean]' '[object Array]' '[object Object]'
// '[object Function]' '[object Undefined]' '[object Null]' '[object Date]' '[object RegExp]' '[object Error]'

从输出的结果来看，Object.prototype.toString.call(变量)输出的是一个字符串，字符串里有一个数组，第一个参数是Object，第二个参数就是这个变量的类型，而且，所有变量的类型都检测出来了，我们只需要取出第二个参数即可。或者可以使用Object.prototype.toString.call(arr)=="object Array"来检测变量arr是不是数组。
我们现在再来看看ECMA里是是怎么定义Object.prototype.toString.call的：

复制代码 代码如下:

Object.prototype.toString( ) When the toString method is called, the following steps are taken:
1. Get the [[Class]] property of this object.
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
3. Return Result (2)

上面的规范定义了Object.prototype.toString的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于”[object Array]”的字符串作为结果（看过ECMA标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。
5. jquery中$.type的实现

在jquery中提供了一个$.type的接口，来让我们检测变量的类型：

console.log(
	$.type(num),
	$.type(str),
	$.type(bool),
	$.type(arr),
	$.type(json),
	$.type(func),
	$.type(und),
	$.type(nul),
	$.type(date),
	$.type(reg),
	$.type(error)
);
// number string boolean array object function undefined null date regexp error

出力を見ると、見覚えがあると思いますか?はい、上記の Object.prototype.toString.call (変数) を使用して出力された結果の 2 番目のパラメーターです。
まず、上記のすべての方法の検出結果を比較してみましょう。横の行は使用した検出方法、縦の行は各変数です。

のインスタンス

タイプ判断	タイプ		コンストラクター	toString.call	$.type
番号	番号	偽	本当	[オブジェクト番号]	番号
str	文字列	偽	本当	[オブジェクト文字列]	文字列
ブール	ブール値	偽	本当	[オブジェクト ブール値]	ブール値
到着	オブジェクト	本当	本当	[オブジェクト配列]	配列
json	オブジェクト	本当	本当	[オブジェクト オブジェクト]	オブジェクト
機能	関数	本当	本当	[オブジェクト関数]	関数
と	未定義	偽	-	[オブジェクトが未定義]	未定義
ヌル	オブジェクト	偽	-	[オブジェクト Null]	ヌル
日付	オブジェクト	本当	本当	[オブジェクトの日付]	日付
登録	オブジェクト	本当	本当	[オブジェクト RegExp]	正規表現
エラー	オブジェクト	本当	本当	[オブジェクトエラー]	エラー
メリット	使いやすく、結果を直接出力できます	複合型を検出できます	基本的にすべてのタイプを検出できます	すべてのタイプを検出	-
デメリット	検出されたタイプが少なすぎます	基本タイプは検出できず、iframe を越えることもできません	iframe をまたぐことはできず、コンストラクターは簡単に変更されます	IE6 では、未定義と null は両方ともオブジェクトです	-

这样对比一下，就更能看到各个方法之间的区别了，而且Object.prototype.toString.call和$type输出的结果真的很像。我们来看看jquery（2.1.2版本）内部是怎么实现$.type方法的：

// 实例对象是能直接使用原型链上的方法的
var class2type = {};
var toString = class2type.toString;

// 省略部分代码...

type: function( obj ) {
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	return (typeof obj === "object" || typeof obj === "function") &#63;
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
},

// 省略部分代码... 

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

我们先来看看jQuery.each的这部分：

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//循环之后，`class2type`的值是： 
class2type = {
	'[object Boolean]' : 'boolean', 
	'[object Number]' : 'number',
	'[object String]' : 'string',
	'[object Function]': 'function',
	'[object Array]'  : 'array',
	'[object Date]'  : 'date',
	'[object RegExp]' : 'regExp',
	'[object Object]' : 'object',
	'[object Error]'  : 'error'
}

再来看看type方法：

// type的实现
type: function( obj ) {
	// 若传入的是null或undefined，则直接返回这个对象的字符串
	// 即若传入的对象obj是undefined，则返回"undefined"
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	// 低版本regExp返回function类型；高版本已修正，返回object类型
	// 若使用typeof检测出的obj类型是object或function，则返回class2type的值，否则返回typeof检测的类型
	return (typeof obj === "object" || typeof obj === "function") &#63;
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
}

当typeof obj === "object" || typeof obj === "function"时，就返回class2type[ toString.call(obj)。到这儿，我们就应该明白为什么Object.prototype.toString.call和$.type那么像了吧，其实jquery中就是用Object.prototype.toString.call实现的，把'[object Boolean]'类型转成'boolean'类型并返回。若class2type存储的没有这个变量的类型，那就返回”object”。
除了”object”和”function”类型，其他的类型则使用typeof进行检测。即number, string, boolean类型的变量，使用typeof即可。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。