Maison >interface Web >js tutoriel >Le principe de la méthode Object.prototype.toString dans les compétences JavaScript_javascript
En JavaScript, le moyen le plus fiable de déterminer à quel type intégré appartient une valeur d'objet consiste à utiliser la méthode Object.prototype.toString.
var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]"
Ce dont cet article va parler, c'est comment la méthode toString fait cela et quel est son principe.
ECMAScript 3
Dans ES3, la spécification de la méthode Object.prototype.toString est la suivante :
15.2.4.2 Object.prototype.toString()
Lorsque la méthode toString est appelée, les étapes suivantes seront effectuées :
1. Obtenez la valeur de l'attribut [[Class]] de cet objet.
2. Calculez les trois chaînes "[objet", le résultat de l'opération Result(1) de la première étape et la nouvelle chaîne après la concaténation "]".
3. Renvoie le résultat de l'opération de la deuxième étape Résultat(2).
[[Class]] est une propriété interne que possèdent tous les objets (objets natifs et objets hôtes). Dans la spécification, [[Class]] est défini comme ceci
.
内部属性 | 描述 |
---|---|
[[Class]] | 一个字符串值,表明了该对象的类型. |
Puis il a donné une explication :
La valeur de l'attribut [[Class]] de tous les objets intégrés est définie par cette spécification. La valeur de l'attribut [[Class]] de tous les objets hôtes peut être n'importe quelle valeur, même la [[Class]. utilisé par l'attribut d'objet intégré ]. La valeur de l'attribut [[Class]] peut être utilisée pour déterminer à quel type intégré appartient un objet natif. Il convient de noter que cette spécification ne fournit aucun autre moyen. via la méthode Object.prototype.toString. Laissez le programme accéder à la valeur de la propriété (voir 15.2.4.2).
En d'autres termes, la chaîne renvoyée par la méthode Object.prototype.toString, en supprimant le "[object" fixe à l'avant et le "]" fixe à l'arrière, est la valeur de l'attribut interne [[class] ], ce qui est atteint. L'objectif de déterminer le type d'objet est utilisé pour cela.
Dans ES3, le document de spécification ne résume pas le nombre de types de propriétés internes de [[class]], mais nous pouvons compter par nous-mêmes. Il y a un total de 10 valeurs de la [[classe]. ] propriétés internes des objets natifs. Est respectivement : "Array", "Boolean", "Date", "Error", "Function", "Math", "Number", "Object", "RegExp", "String". .
ECMAScript 5
Dans ES5.1, en plus de la spécification écrite plus en détail, il y a également quelques changements dans la définition de la méthode Object.prototype.toString et les propriétés internes de la [[class]] spécification de l'objet. La méthode prototype.toString est la suivante :
15.2.4.2 Objet.prototype.toString ( )
Lorsque la méthode toString est appelée, les étapes suivantes seront effectuées :Si la valeur de ceci n'est pas définie, renvoyez "[objet non défini]".
La valeur de l'attribut [[Class]] de tous les objets intégrés est définie par cette spécification. La valeur de l'attribut [[Class]] de tous les objets hôtes peut être à l'exception de "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String". La propriété interne est le moteur utilisé en interne pour déterminer. à quel type de valeur appartient un objet. Il convient de noter que cette spécification ne fournit aucun autre moyen pour le programme d'accéder à la valeur de cette propriété sauf via la méthode Object.prototype.toString (voir 15.2.4.2 ).
Par rapport à ES3, la première différence est que [[class]] a deux valeurs d'attribut internes supplémentaires, devenant 12 types. L'une est que la [[classe]] de l'objet arguments devient "Arguments", et au lieu du précédent. "Object", il existe plusieurs objets globaux JSON, dont la valeur [[class]] est "JSON". La deuxième différence est que la valeur de la propriété interne [[class]] de l'objet hôte ne peut pas être en conflit avec ces 12. valeurs, mais dans les navigateurs prenant en charge ES3, il semble qu'aucun objet hôte n'utilise délibérément ces 10 valeurs
.
ECMAScript 6
ES6 n'est encore qu'une ébauche de travail, mais ce qui est sûr, c'est que l'attribut interne [[class]] a disparu et remplacé par un autre attribut interne [[NativeBrand]]. :
内部属性 | 属性值 | 描述 |
---|---|---|
[[NativeBrand]] | 枚举NativeBrand的一个成员. | 该属性的值对应一个标志值(tag value),可以用来区分原生对象的类型. |
[[NativeBrand]] explication de l'attribut :
Les propriétés internes [[NativeBrand]] sont utilisées pour identifier si un objet natif est un type spécifique d'objet conforme à cette spécification. La valeur de la propriété interne [[NativeBrand]] est l'une des valeurs du. les types d'énumération suivants A : NativeFunction, NativeArray, StringWrapper, BooleanWrapper, NumberWrapper, NativeMath, NativeDate, NativeRegExp, NativeError, NativeJSON, NativeArguments, NativePrivateName ; les propriétés internes sont uniquement utilisées pour distinguer des types spécifiques d'objets natifs ECMAScript uniquement dans. Tableau 10 Seuls les types d'objets explicitement spécifiés ont des propriétés internes [[NativeBrand]].
Tableau 10 — Valeurs des propriétés internes de [[NativeBrand]]
属性值 | 对应类型 |
---|---|
FonctionNative | Objets fonction |
NativeArray | Objets de tableau |
StringWrapper | Objets chaîne |
BooleanWrapper | Objets booléens |
NuméroWrapper | Numéroter les objets |
NativeMath | L'objet Math |
NativeDate | Objets de date |
NativeRegExp | Objets RegExp |
NativeErreur | Objets d'erreur |
NativeJSON | L'objet JSON |
NativeArguments | Objets Arguments |
NativePrivateName | Objets de nom privé |
On peut voir que, contrairement à [[class]], tous les objets n'ont pas [[NativeBrand]]. En même temps, la spécification de la méthode Object.prototype.toString a également été modifiée comme suit :
15.2.4.2 Objet.prototype.toString ( )
Lorsque la méthode toString est appelée, les étapes suivantes seront effectuées :
Si la valeur de ceci n'est pas définie, renvoyez "[objet non défini]".
Si la valeur de ceci est nulle, renvoyez "[object Null]".
Soit O le résultat de l'appel de ToObject(this).
Si O a l'attribut interne [[NativeBrand]], laissez tag être la valeur correspondante dans le tableau 29.
Sinon
Soit hasTag le résultat de l'appel de la méthode interne [[HasProperty]] de O, avec le paramètre @@toStringTag.
Si hasTag est faux, laissez la balise être "Object".
Sinon,
Soit tag soit le résultat de l'appel de la méthode interne [[Get]] de O, et le paramètre est @@toStringTag.
Si la balise se termine brusquement, laissez la balise devenir NormalCompletion("???").
Laissez tag être tag.[[valeur]].
Si Type(tag) n'est pas une chaîne, laissez la balise devenir "???".
Si la valeur de la balise est "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", " RegExp", ou
ou "String", puis laissez la balise devenir le résultat de la concaténation de la chaîne "~" et de la valeur actuelle de la balise.
Renvoie une nouvelle chaîne après avoir concaténé les trois chaînes "[object", tag et "]".
Tableau 29 — Valeurs des indicateurs [[NativeBrand]]
Valeur [[NativeBrand]] | Valeur du drapeau |
---|---|
FonctionNative | <font face="NSimsun">"Function"</font> |
NativeArray | <font face="NSimsun">"Array"</font> |
StringWrapper | <font face="NSimsun">"String"</font> |
BooleanWrapper | <font face="NSimsun">"Boolean"</font> |
NuméroWrapper | <font face="NSimsun">"Number"</font> |
NativeMath | <font face="NSimsun">"Math"</font> |
NativeDate | <font face="NSimsun">"Date"</font> |
NativeRegExp | <font face="NSimsun">"RegExp"</font> |
NativeErreur | <font face="NSimsun">"Error"</font> |
NativeJSON | <font face="NSimsun">"JSON"</font> |
NativeArguments | <font face="NSimsun">"Arguments"</font> |
可以看到,在规范上有了很大的变化,不过对于普通用户来说,貌似感觉不到.
也许你发现了,ES6里的新类型Map,Set等,都没有在表29中.它们在执行toString方法的时候返回的是什么?
console.log(Object.prototype.toString.call(Map())) //"[object Map]" console.log(Object.prototype.toString.call(Set())) //"[object Set]"
其中的字符串"Map"是怎么来的呢:
15.14.5.13 Map.prototype.@@toStringTag
@@toStringTag 属性的初始值为字符串"Map".
由于ES6的规范还在制定中,各种相关规定都有可能改变,所以如果想了解更多细节.看看下面这两个链接,现在只需要知道的是:[[class]]没了,使用了更复杂的机制.
以上所述是小编给大家分享的JavaScript中Object.prototype.toString方法的原理,希望对大家有所帮助!