Vergleich der Typbeurteilungsmethoden:

[js-Grundlagen] Beurteilung des Variablentyps

Wenn Sie mehr wissen möchten, lesen Sie bitte unten:

Hinweis: Kopieren Sie die Sicherung intakt, um ein Löschen zu verhindern von Beiträgen.

In JavaScript gibt es 5 grundlegende Datentypen und 1 komplexen Datentyp: Undefiniert, Null, Boolean, Zahl und Zeichenfolge. Der komplexe Datentyp ist Objekt auch unterteilt Viele spezifische Typen, wie zum Beispiel: Array, Funktion, Datum usw. Heute besprechen wir, wie man den Typ einer Variablen bestimmt.

Bevor wir verschiedene Methoden erklären, definieren wir zunächst einige Testvariablen, um zu sehen, wie die nachfolgenden Methoden die Variablentypen analysieren können. Die folgenden Variablen umfassen fast die von uns in der tatsächlichen Codierung verwendeten häufig verwendeten Typen.

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();

Nach dem Login kopieren

1. Verwenden Sie typeof zum Erkennen
Was wir normalerweise am häufigsten verwenden, ist typeof zum Erkennen von Variablentypen. Dieses Mal verwenden wir auch typeof, um den Typ der Variablen zu erkennen:

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

Nach dem Login kopieren

Aus den Ausgabeergebnissen werden arr, json, nul, date, reg, error alle als Objekttypen erkannt. Andere Variablen können korrekt erkannt werden. Wenn Sie wissen müssen, ob eine Variable vom Typ Zahl, Zeichenfolge, Boolescher Wert, Funktion, Undefiniert oder JSON ist, können Sie zur Beurteilung typeof verwenden. Der Typ anderer Variablen, einschließlich Null, kann nicht bestimmt werden.

Außerdem kann typeof nicht zwischen Array- und JSON-Typen unterscheiden. Denn bei Verwendung der Variable typeof geben sowohl Array- als auch JSON-Typen Objekte aus.

Instanzerkennung verwenden
Um in JavaScript den Typ einer Variablen zu bestimmen, versuchen Sie, den Operator „typeof“ zu verwenden. Bei Verwendung des Operators „typeof“ tritt ein Problem bei der Verwendung von Referenzen auf Typen zum Speichern von Werten verwenden, wird „Objekt“ zurückgegeben, unabhängig davon, auf welchen Objekttyp verwiesen wird. ECMAScript führt eine weitere Java-Operatorinstanz ein, um dieses Problem zu lösen. Der Instanz-Operator ähnelt dem Typ-Operator und wird verwendet, um den Typ des verarbeiteten Objekts zu identifizieren. Im Gegensatz zur Methode „typeof“ muss der Entwickler bei der Methode „instanceof“ explizit bestätigen, dass das Objekt von einem bestimmten Typ ist. Zum Beispiel:

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

Nach dem Login kopieren

Schauen wir uns das folgende Beispiel an:

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

Nach dem Login kopieren

Aus den obigen Laufergebnissen können wir sehen, dass num , str und bool haben ihren Typ nicht erkannt, aber wenn wir num auf die folgende Weise erstellen, kann der Typ erkannt werden:

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

Nach dem Login kopieren

Gleichzeitig müssen wir das auch sehen und und nul ist der erkannte Objekttyp und true wird ausgegeben, da es in js keine globalen Typen wie Undefiniert und Null gibt. Sowohl und als auch nul gehören zum Objekttyp, daher wird true ausgegeben.

Konstruktor zum Erkennen verwenden
Bei Verwendung von „instanceof“ zum Erkennen von Variablentypen können wir die Typen „Zahl“, „Zeichenfolge“ und „Bool“ nicht erkennen. Deshalb müssen wir einen anderen Weg finden, dieses Problem zu lösen.

Konstruktor ist ursprünglich eine Eigenschaft des Prototypobjekts, die auf den Konstruktor verweist. Wenn jedoch kein Instanzattribut oder keine Instanzmethode für das Instanzobjekt vorhanden ist, wird entsprechend der Reihenfolge, in der das Instanzobjekt nach Attributen sucht, in der Prototypenkette gesucht. Daher kann das Instanzobjekt auch das Konstruktorattribut verwenden.

Lassen Sie uns zunächst den Inhalt von num.constructor ausgeben, also wie der Konstruktor einer numerischen Typvariablen aussieht:

function Number() { [native code] }
Wir Sie können sehen, dass es auf den Konstruktor von Number verweist. Daher können wir num.constructor==Number verwenden, um zu bestimmen, ob num vom Typ Number ist:

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 );

Nach dem Login kopieren

// Alle Die Ergebnisse sind alle wahr
Aus den Ausgabeergebnissen können wir ersehen, dass außer undefiniert und null der Typ anderer Variablentypen mithilfe des Konstruktors bestimmt werden kann.

Die Verwendung des Konstruktors ist jedoch nicht sicher, da das Konstruktorattribut geändert werden kann, was dazu führen kann, dass die erkannten Ergebnisse falsch sind, zum Beispiel:

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

Nach dem Login kopieren

im Im obigen Beispiel wird der Konstruktor im Student-Prototyp so geändert, dass er auf Person zeigt, was dazu führt, dass der tatsächliche Konstruktor des Instanzobjekts John nicht erkannt werden kann.

Gleichzeitig muss bei Verwendung von „instanceof“ und „construcor“ das zu beurteilende Array auf der aktuellen Seite deklariert werden! Beispielsweise verfügt eine Seite (übergeordnete Seite) über einen Frame, und in diesem Frame wird auf eine Seite (untergeordnete Seite) verwiesen, die einer Variablen der übergeordneten Seite zugewiesen wird wird beurteilt, Array == object.constructor; gibt false zurück:
1.
2. Die vom Array-nativen Objekt jeder Seite referenzierte Adresse ist unterschiedlich. Der entsprechende Konstruktor des auf der Unterseite deklarierten Arrays ist das Array-Objekt der übergeordneten Seite Array ist nicht gleich dem Array der Unterseiten; sonst wird es schwierig, das Problem zu verfolgen!

Verwenden Sie Object.prototype.toString.call
Kümmern wir uns nicht darum, was das ist, werfen wir zunächst einen Blick darauf, wie es den Variablentyp erkennt:

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) 
);

Nach dem Login kopieren

// ‘[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]]，然后把类型检测转化为字符串比较，以达到我们的目的。

jquery中
.type的接口，来让我们检测变量的类型：

console.log( 
.type(str), 
.type(arr), 
.type(func), 
.type(nul), 
.type(reg), 
    $.type(error) );

Nach dem Login kopieren

// number string boolean array object function undefined null date regexp error
看到输出结果，有没有一种熟悉的感觉？对，他就是上面使用 Object.prototype.toString.call(变量)输出的结果的第二个参数呀。

我们这里先来对比一下上面所有方法检测出的结果，横排是使用的检测方法，竖排是各个变量：

类型判断 typeof instanceof constructor 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”) ? 
        (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(); });

Nach dem Login kopieren

我们先来看看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’ 
}

Nach dem Login kopieren

再来看看 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”) ? 

        (class2type[ toString.call(obj) ] || “object”) : 

        typeof obj; 
}

Nach dem Login kopieren

当 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即可。

本文讲解了【js基础】变量类型判断更多相关内容请关注php中文网。