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

Tutoriel vidéo javascript)

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 ~

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 :

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 :

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

retours. la construction

Object

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

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

• Peut-on le modifier ?

4.1 stringTag - balise de type

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

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

toString()Chaque objet a une méthode

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