JavaScript-Thema 6: Typerkennung

Skript 4. Was ist stringTag? Fünf. Methoden zur Implementierung mehrerer Datenerkennung

Am Ende geschrieben

(kostenlose Lernempfehlung:

Javascript-Video-Tutorial

• )
• Vorwort
• in „JavaScript Data We erwähnte auch einfache Typerkennungsprobleme in Typen.
• Als Front-End-Studenten sollten wir alle wissen, dass Typeof und Instanceof verwendet werden können, um den Typ von JavaScript-Daten zur Laufzeit zu bestimmen. Wie bestimmen sie ihn also? Werden tausend Menschen tausend Urteilsmethoden schreiben?
  In diesem Artikel wird erläutert, wie der Datentyp vom allgemeinen Typ von über die objektspezifische Instanz von bis hin zu isNull, isNumber, isString und anderen Methoden bestimmt wird typeof: Operator gibt eine Zeichenfolge zurück, die den Typ des nicht berechneten Operanden darstellt.

Wir alle wissen, dass JavaScript vor ES6 sechs Datentypen hatte, nämlich:

UndefiniertNullBooleanNumber

StringObject

Allerdings wann Wann wir Verwenden Sie typeof, um die Werte dieser Datentypen zu bearbeiten. Die zurückgegebenen Ergebnisse sind keine Eins-zu-Eins-Entsprechung:

Undefiniertes

Objekt – ***

Boolean

Number

String

Objekt

Es gibt einige Überraschungen, typeof null => 'object' und typeof function(){} => 'function'操作符返回一个字符串，表示未经计算的操作数的类型。

我们都知道，在 ES6 前，JavaScript 共六种数据类型，分别是：

1. Undefined
2. Null
3. Boolean
4. Number
5. String
6. Object

然而当我们使用 typeof 对这些数据类型的值进行操作的时候，返回的结果却不是一一对应，分别是：

1. Undefined
2. object – ***
3. Boolean
4. Number
5. String
6. Object

有一些意外，typeof null => 'object' 且 typeof function(){} => 'function'

所以在大多数情况下我们可以使用typeof来检测基本数据类型，但是，检测得到的Object后，却无法区分是哪一种Object：

typeof [] === 'object'; //truetypeof {} === 'object'; //truetypeof null === 'object'; //true

总结

在检测Js的原始类型时，除了typeof null返回object之外，其他的都返回对应类型名的小写字母。

二、instanceof

我们判断对象类型的时候，可以使用instanceof：

如果对原型及原型链不太熟悉的同学不妨看看这篇文章从原型到原型链

定义

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

实例

const arr = [];const obj = {};console.log(arr instanceof Array);   // trueconsole.log(arr instanceof Object);  // trueconsole.log(obj instanceof Array);   // falseconsole.log(obj instanceof Object);  // true

注意instanceof是能匹配类型的父类的，所以arr instanceof Array和arr instanceof Object都是true，因为Object是Array的父类。

满足class extends和原型链规则的父子类关系的对象都能被匹配：

class

class Base {}class Current extends Base {}const obj = new Current();console.log(obj instanceof Current); // trueconsole.log(obj instanceof Base); // true

原型链

function Foo() {}function Bar() {}Bar.prototype = new Foo();const obj = new Bar();console.log(obj instanceof Bar); // trueconsole.log(obj instanceof Foo); // true

注意如果我们修改obj的原型链能改变instanceof的结果：

function Other() {}obj.__proto__ = new Other();console.log(obj instanceof Other); // trueconsole.log(obj instanceof Foo); // false

总结

instanceof借助了原型链来判断的实际上，只要一个类型Type的prototype在一个对象obj的原型链上，那么obj instanceof Type就是true，否则就是false。

三、constructor

有时候我们不希望匹配父类型，只希望匹配当前类型，那么我们可以用constructor来判断：

如果对原型及原型链不太熟悉的同学不妨看看这篇文章从原型到原型链

定义

返回创建实例对象的 Object 构造函数的引用。注意，此属性的值是对函数本身的引用，而不是一个包含函数名称的字符串。

实例

const arr = [];console.log(arr.constructor === Array); // trueconsole.log(arr.constructor === Object); // false

对象的constructor会返回它的类型，而类型在定义的时候，会创建一个name只读属性，值为类型的名字。

class Foo {}console.log(Foo.name); // Fooconst foo = new Foo();console.log(foo.constructor === Foo); // trueconsole.log(foo.constructor.name === 'Foo'); // true

疑问

• constructor.name 一定就是正确的吗？
• 我们可以修改它吗？

四、stringTag是什么？

4.1 stringTag——类型标签

如果你看过一些库的早期实现，你会发现使用Object.prototype.toString来做类型判断的方式，他们会数据类型的字符串标志，被称作stringTag；

4.2 Object.prototype.toString

定义

toString()方法返回一个表示该对象的字符串。

每个对象都有一个 toString() 方法，当该对象被表示为一个文本值时，默认情况下，toString()

Also In den meisten Fällen können wir typeof verwenden, um grundlegende Datentypen zu erkennen. Nach der Erkennung des Objekts können wir jedoch nicht unterscheiden, um welchen Objekttyp es sich handelt: 🎜

var ostring = Object.prototype.toString;function isArray(it) {
  return ostring.call(it) === '[object Array]';}

🎜🎜Zusammenfassung🎜🎜🎜Bei der Erkennung von Js Bei primitiven Typen, mit Ausnahme von typeof null, der object zurückgibt, geben alle anderen die Kleinbuchstaben des entsprechenden Typnamens zurück. 🎜🎜🎜 2. Instanz von🎜🎜🎜Wenn wir den Objekttyp bestimmen, können wir Instanz von verwenden: 🎜🎜Wenn Sie mit Prototypen und Prototypenketten nicht vertraut sind, möchten Sie vielleicht diesen Artikel lesen: Vom Prototyp zur Prototypenkette🎜🎜🎜Definition 🎜🎜 Der 🎜instanceof-Operator wird verwendet, um zu erkennen, ob das Prototypattribut des Konstruktors in der Prototypenkette eines Instanzobjekts erscheint. 🎜🎜🎜Instance🎜🎜

function isObject(value) {
    const type = typeof value;
    return value != null && (type === 'object' || type === 'function');}

🎜Beachten Sie, dass „instanceof“ mit der übergeordneten Klasse des Typs übereinstimmen kann, sodass „arr-Instanz von Array“ und „arr-Instanz von Objekt“ beide wahr sind, da „Objekt“ die übergeordnete Klasse von „Array“ ist.
🎜🎜Objekte, die die Eltern-Kind-Klassenbeziehung von Klassenerweiterungen und Prototyp-Kettenregeln erfüllen, können abgeglichen werden: 🎜🎜🎜Klasse🎜🎜

function isNull(value) {
    return value === null;}

🎜🎜Prototyp Kette🎜 🎜

function isFunction(value) {
    return typeof value === 'function';}

🎜Beachten Sie, dass sich das Ergebnis von „instanceof“ ändern kann, wenn wir die Prototypenkette von obj ändern:
🎜

var isArray = Array.isArray || function( value ) {
    return type(value) === "array";}

🎜🎜Zusammenfassung🎜🎜🎜Instanceof verwendet die Prototypenkette zur Beurteilung Der Prototyp eines Typs Type befindet sich in der Prototypenkette eines object obj, dann ist obj instanceof Type wahr, andernfalls ist er falsch. 🎜🎜🎜3. Konstruktor🎜🎜🎜Manchmal möchten wir nicht mit dem übergeordneten Typ übereinstimmen, sondern nur mit dem aktuellen Typ. Dann können wir den Konstruktor zur Beurteilung verwenden: 🎜🎜Wenn Sie mit Prototypen und Prototypenketten nicht vertraut sind , vielleicht möchten Sie diesen Artikel lesen: Artikel Vom Prototyp zur Prototypenkette🎜🎜🎜Definition🎜🎜🎜 Gibt einen Verweis auf den Object-Konstruktor zurück, der das Instanzobjekt erstellt. Beachten Sie, dass der Wert dieser Eigenschaft eine Referenz auf die Funktion selbst ist und keine Zeichenfolge, die den Funktionsnamen enthält. Der Konstruktor des Objekts 🎜🎜🎜 Instanz🎜🎜

const toString = Object.prototype.toString;function getTag(value) {
    // if (value === null) return '[object Null]';
    // if (value == null) return '[object Undefined]'
    if (value == null) {
        return value === undefined ? '[object Undefined]' : '[object Null]'
    }
    return toString.call(value)}

🎜 gibt seinen Typ zurück, und wenn der Typ definiert ist, wird ein schreibgeschütztes Namensattribut erstellt, dessen Wert der Name des Typs ist.
🎜rrreee🎜🎜Frage🎜🎜🎜🎜Ist „constructor.name“ unbedingt korrekt? 🎜🎜Können wir es ändern? 🎜🎜🎜🎜4. Was ist stringTag? 🎜🎜

4.1 stringTag - Typ-Tag

🎜Wenn Sie die frühe Implementierung einiger Bibliotheken gesehen haben, werden Sie feststellen, dass sie Object.prototype.toString zur Typbeurteilung verwenden String-Tag, das den Datentyp kennt, heißt stringTag; 🎜

4.2 Object.prototype.toString

🎜🎜Definition🎜🎜🎜toString() Die Methode gibt eine Zeichenfolge zurück, die das Objekt darstellt. 🎜🎜Jedes Objekt verfügt über eine toString()-Methode. Wenn das Objekt als Textwert dargestellt wird, wird standardmäßig die toString()-Methode von jeder Objektvererbung verwendet . 🎜

如果此方法在自定义对象中未被覆盖，toString() 返回 “[object type]”，其中 type 是对象的类型。以下代码说明了这一点：

实例

比如这是requirejs里面的代码片段。

var ostring = Object.prototype.toString;function isArray(it) {
  return ostring.call(it) === '[object Array]';}

toString时都做了什么？

这里直接将冴羽大大的总结搬了过来:

When the toString method is called, the following steps are taken:

1. If the this value is undefined, return “[object Undefined]”.
2. If the this value is null, return “[object Null]”.
3. Let O be the result of calling ToObject passing the this value as the argument.
4. Let class be the value of the [[Class]] internal property of O.
5. Return the String value that is the result of concatenating the three Strings "[object ", class, and “]”.

当 toString 方法被调用的时候，下面的步骤会被执行：

1. 如果 this 值是 undefined，就返回 [object Undefined]
2. 如果 this 的值是 null，就返回 [object Null]
3. 让 O 成为 ToObject(this) 的结果
4. 让 class 成为 O 的内部属性 [[Class]] 的值
5. 最后返回由 "[object " 和 class 和 “]” 三个部分组成的字符串

注意

有几点我们需要注意：

• toString无法区分原始类型及其构造对象；
  • 我们认为Number、Boolean这种类型在被构造器构造出来后的类型应该是对象；
  • 但toString都会返回[object number]等原始类型；
• toString方法是可以自定义的；

五、实现几个数据检测的方法

好了看了几款常用的类型判断方法后，我们可不可以实现自己的类型判断工具？就利用上述提到的一个或多个方法。我们自己动手丰衣足食～

5.1 isObject

注意，我们认为null不是一个对象，它就是null～

function isObject(value) {
    const type = typeof value;
    return value != null && (type === 'object' || type === 'function');}

5.2 isNull

function isNull(value) {
    return value === null;}

5.3 isFunction

function isFunction(value) {
    return typeof value === 'function';}

5.4 isArray

var isArray = Array.isArray || function( value ) {
    return type(value) === "array";}

5.5 stringTag

const toString = Object.prototype.toString;function getTag(value) {
    // if (value === null) return '[object Null]';
    // if (value == null) return '[object Undefined]'
    if (value == null) {
        return value === undefined ? '[object Undefined]' : '[object Null]'
    }
    return toString.call(value)}

好了到最后，大家平时对类型检测的态度是什么样的呢？

相关免费学习推荐：javascript（视频）

Das obige ist der detaillierte Inhalt vonJavaScript-Thema 6: Typerkennung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!