Sujet JavaScript 6 : Détection de type

JavaScriptSujet spécial sur la détection des types de données

Répertoire

• 1. typeof
• 2. instanceof
• 3.
• 5. Méthodes pour mettre en œuvre plusieurs détections de données
• Écrit à la fin

(recommandation d'apprentissage gratuite :

Tutoriel vidéo javascript)

Avant-propos

Dans "Types de données JavaScript", nous Le problème de détection de type simple a également été évoquée.

En tant qu'étudiants front-end, nous devrions tous savoir que typeof et instanceof peuvent être utilisés pour déterminer le type de données JavaScript au moment de l'exécution. Alors, comment le déterminent-ils ? Un millier de personnes écriront-elles mille méthodes de jugement ?

Cet article explique comment déterminer le type de données, du type général de à l'instance spécifique à l'objet, en passant par isNull, isNumber, isString et d'autres méthodes ~

.

1. typeof

typeof :

Renvoie une chaîne indiquant le type de l'opérande non calculé. 操作符Nous savons tous qu'avant ES6, JavaScript avait six types de données, à savoir :

Non défini

1. Null
2. Booléen
3. Number
4. String
5. Object
6. Cependant, lorsque nous utilisons typeof pour opérer sur les valeurs de ces types de données, le résultat est renvoyé Mais il n'y a pas de correspondance biunivoque, ils sont :

Indéfini

1. objet – ***
2. Booléen
3. Nombre
4. String
5. Object
6. a quelques surprises,

et

typeof null => 'object'typeof function(){} => 'function' donc dans la plupart des cas, nous pouvons utiliser typeof pour détecter des données de base types, Cependant, après avoir détecté le

, il est impossible de distinguer de quel type d'objet il s'agit :

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

Object Résumé

Lors de la détection du type d'origine de Js , à l'exception de

Sauf

, tous les autres renvoient les lettres minuscules du nom du type correspondant. typeof nullobject

2. instanceof

Lorsque nous déterminons le type d'objet, nous pouvons utiliser instanceof :

Si vous n'êtes pas familier avec les prototypes et les chaînes de prototypes, vous souhaiterez peut-être jeter un œil à cet article Du prototype à la chaîne de prototypes

Définition

L'opérateur instanceof est utilisé pour détecter si l'attribut prototype du constructeur apparaît dans la chaîne de prototypes d'un objet d'instance supérieur.

Instance

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

Notez que instanceof peut correspondre à la classe parent du type, donc arr instanceof Array et arr instanceof Object sont tous deux vrais, car Object est la classe parent de tableau.

Les objets qui satisfont la relation de classe parent-enfant de

et

peuvent être associés : class extends原型链规则

class

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

Chaîne de prototypes

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

Notez que si on modifie la chaîne de prototypes d'obj, le résultat de instanceof peut être changé :

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

Résumé

En fait, instanceof utilise la chaîne de prototypes pour juger. Tant que le prototype d'un type

est sur la chaîne de prototypes d'un

, alors Type est vrai, sinon c'est le cas. FAUX. 对象objobj instanceof Type

3. Constructeur

Parfois, nous ne voulons pas faire correspondre le type parent, mais voulons seulement faire correspondre le type actuel, nous pouvons alors utiliser le constructeur pour juger :

Si vous n'êtes pas familier avec les prototypes et les chaînes de prototypes, vous souhaiterez peut-être lire cet article Du prototype à la chaîne de prototypes

définition

retours. la construction

qui crée la référence de fonction de l'objet d'instance. Notez que la valeur de cette propriété est une référence à la fonction elle-même, et non une chaîne contenant le nom de la fonction.

Object

Instance

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

Le constructeur de l'objet renverra son type, et lorsque le type est défini, un attribut name en lecture seule sera créé avec la valeur étant le nom du type.

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

Question

Constructor.name est-il nécessairement correct ?

• Peut-on le modifier ?

4. Qu'est-ce que stringTag ?

4.1 stringTag - balise de type

Si vous avez vu les premières implémentations de certaines bibliothèques, vous constaterez qu'en utilisant

pour effectuer un jugement de type, elles connaissent le type de données String flag, appelé

; Object.prototype.toStringstringTag4.2 Object.prototype.toString

Definition

renvoie une représentation de la chaîne A de objets.

toString()Chaque objet a une méthode

, qui est héritée par chaque objet Object lorsque l'objet est représenté sous forme de valeur texte.

如果此方法在自定义对象中未被覆盖，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（视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!