ホームページ ウェブフロントエンド jsチュートリアル JavaScript_javascript スキルにおける Object.prototype.toString メソッドの原理

JavaScript_javascript スキルにおける Object.prototype.toString メソッドの原理

May 16, 2016 pm 03:13 PM

In JavaScript, the most reliable way to determine which built-in type an object value belongs to is through the Object.prototype.toString method.

var arr = [];
console.log(Object.prototype.toString.call(arr)) //"[object Array]"
ログイン後にコピー

What this article is going to talk about is how the toString method does this and what the principle is.

ECMAScript 3

In ES3, the specification of the Object.prototype.toString method is as follows:

15.2.4.2 Object.prototype.toString()
ログイン後にコピー

When the toString method is called, the following steps will be performed:

1. Get the value of the [[Class]] attribute of this object.

2. Calculate the three strings "[object", the operation result Result(1) of the first step, and the new string after "]" concatenation.

3. Return the operation result of the second step Result(2).

[[Class]] is an internal property that all objects (native objects and host objects) have. In the specification, [[Class]] is defined like this

内部属性 描述
[[Class]] 一个字符串值,表明了该对象的类型.
<🎜>Internal properties<🎜> <🎜>Description<🎜> <🎜> <🎜> <🎜> [[Class]] A string value indicating the type of the object. <🎜>

それから彼は次のように説明しました。

すべての組み込みオブジェクトの [[Class]] 属性の値は、この仕様によって定義されます。すべてのホスト オブジェクトの [[Class]] 属性の値は、[[Class] であっても) 任意の値にすることができます。組み込みオブジェクト ] 属性によって使用される [[Class]] 属性の値は、ネイティブ オブジェクトがどの組み込み型に属するかを決定するために使用できます。この仕様は、それ以外の方法を提供しないことに注意してください。 Object.prototype.toString メソッドを通じて、プログラムがプロパティの値にアクセスできるようにします (15.2.4.2 を参照)。

言い換えると、Object.prototype.toString メソッドによって返される文字列は、前部の固定「[object」と後部の固定「]」を削除したもので、内部属性 [[class] の値になります。 ]、オブジェクトの型を決定する目的は達成されます。これには、jQuery のツール メソッド $.type() が使用されます。

ES3 では、[[クラス]] の内部プロパティが何種類あるかは仕様書にまとめられていませんが、[[クラス]] の値は合計 10 個あると自分で数えることができます。 ] ネイティブ オブジェクトの内部プロパティはそれぞれ「Array」、「Boolean」、「Date」、「Error」、「Function」、「Math」、「Number」、「Object」、「RegExp」、「String」です。 .

ECMAScript 5

ES5.1 では、仕様がより詳細に記述されることに加えて、Object.prototype.toString メソッドとオブジェクトの [[class]] 内部プロパティの定義にもいくつかの変更があります。 prototype.toString メソッドは次のとおりです:

15.2.4.2 Object.prototype.toString ()

toString メソッドが呼び出されると、次の手順が実行されます。

この値が未定義の場合は、「[オブジェクト未定義]」を返します。


this の値が null の場合、「[object Null]」を返します。


ToObject(this) を呼び出した結果を O とします。


クラスを O の内部プロパティ [[Class]] の値とします。


3 つの文字列「[object "、class、および "]」を連結した後の新しい文字列を返します。


ステップ 1 と 2 は ES3 よりも 1、2、3 ステップ増えていることがわかります。ステップ 1 とステップ 2 は、「未定義」と「Null」が ES3 の値に属さないため、非常に特殊です。 [[class]] 属性は、厳密モードとは関係がないことに注意してください (ほとんどの関数では、この値は厳密モードでのみ未定義または null のままになり、非定義モードでは自動的にグローバル オブジェクトになります)。 ES3 エンジンでは、このステップで 3 つのプリミティブ値タイプが対応するパッケージング オブジェクトに変換されますが、ES5 では [[Class. ]] 属性について詳しく説明します:

すべての組み込みオブジェクトの [[Class]] 属性の値は、この仕様によって定義されます。すべてのホスト オブジェクトの [[Class]] 属性の値は、「Arguments」、「Array」、 「Boolean」、「Date」、「Error」、「Function」、「JSON」、「Math」、「Number」、「Object」、「RegExp」、「String」は、内部プロパティを決定するために内部的に使用されるエンジンです。オブジェクトが属する値のタイプ。この仕様では、 Object.prototype.toString メソッドを介する以外に、プログラムがこのプロパティの値にアクセスする他の方法を提供していないことに注意してください (15.2.4.2 を参照)。 >

ES3 と比較すると、最初の違いは、[[class]] の内部属性値が 2 つ増えて 12 種類になったことです。1 つは、引数オブジェクトの [[class]] が「Arguments」になり、以前の値に代わったことです。 「オブジェクト」には、[[クラス]] 値が「JSON」である複数のグローバル オブジェクト JSON が存在します。2 番目の違いは、ホスト オブジェクトの [[クラス]] 内部プロパティの値がこれら 12 つと競合できないことです。ただし、ES3 をサポートするブラウザでは、これらの 10 個の値を意図的に使用しているホスト オブジェクトはないようです。

ECMAScript 6

ES6 はまだ作業中のドラフトにすぎませんが、確かなことは、[[class]] 内部属性がなくなり、別の内部属性 [[NativeBrand]] に置き換えられたことです。 [[NativeBrand]] 属性は次のように定義されています。 :

内部属性 属性值 描述
[[NativeBrand]] 枚举NativeBrand的一个成员. 该属性的值对应一个标志值(tag value),可以用来区分原生对象的类型.

[[NativeBrand]]屬性的解釋:

[[NativeBrand]]內部屬性用來識別某個原生物件是否為符合本規範的某一種特定類型的物件.[[NativeBrand]]內部屬性的值為下面這些枚舉類型的值中的一個:NativeFunction, NativeArray, StringWrapper, BooleanWrapper, NumberWrapper, NativeMath, NativeDate, NativeRegExp, NativeError, NativeJSON, NativeArguments, NativePrivateName.[[NativeBrand]]內部屬性僅用來區分特定類型的ECMAScript10.明確指出的物件類型才有[[NativeBrand]]內部屬性.

表10 — [[NativeBrand]]內部屬性的值

屬性值 對應類型
原生函數 函數物件
NativeArray 數組物件
字串包裝器 字串物件
布爾包裝器 布林物件
數位包裝器 數位物件
NativeMath The Math object
NativeDate Date objects
NativeRegExp RegExp objects
NativeError Error objects
NativeJSON The JSON object
NativeArguments Arguments objects
NativePrivateName Private Name objects

It can be seen that, unlike [[class]], not every object has [[NativeBrand]]. At the same time, the specification of the Object.prototype.toString method has also been changed to the following:

15.2.4.2 Object.prototype.toString ( )

When the toString method is called, the following steps will be performed:

If the value of this is undefined, return "[object Undefined]".

If the value of this is null, return "[object Null]".

Let O be the result of calling ToObject(this).

If O has the [[NativeBrand]] internal attribute, let tag be the corresponding value in Table 29.

Otherwise

Let hasTag be the result of calling O’s [[HasProperty]] internal method, with the parameter @@toStringTag.

If hasTag is false, let the tag be "Object".

Otherwise,

Let tag be the result of calling O’s [[Get]] internal method, and the parameter is @@toStringTag.

If tag is an abrupt completion, let tag become NormalCompletion("???").

Let tag be tag.[[value]].

If Type(tag) is not a string, let tag become "???".

If the value of tag is "Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp ", or

or "String", then let the tag become the result of concatenating the string "~" and the current value of the tag.

Returns a new string after concatenating the three strings "[object ", tag, and "]".

Table 29 — [[NativeBrand]] Flag Values

[[NativeBrand]] value Flag value
NativeFunction <font face="NSimsun">"Function"</font>
NativeArray <font face="NSimsun">"Array"</font>
StringWrapper <font face="NSimsun">"String"</font>
BooleanWrapper <font face="NSimsun">"Boolean"</font>
NumberWrapper <font face="NSimsun">"Number"</font>
NativeMath <font face="NSimsun">"Math"</font>
NativeDate <font face="NSimsun">"Date"</font>
NativeRegExp <font face="NSimsun">"RegExp"</font>
NativeError <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方法的原理,希望对大家有所帮助!

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

Javaのコレクションフレームワークを効果的に使用するにはどうすればよいですか? Javaのコレクションフレームワークを効果的に使用するにはどうすればよいですか? Mar 13, 2025 pm 12:28 PM

この記事では、Javaのコレクションフレームワークの効果的な使用について説明します。 データ構造、パフォーマンスのニーズ、スレッドの安全性に基づいて、適切なコレクション(リスト、セット、マップ、キュー)の選択を強調しています。 コレクションの使用を効率的に最適化します

初心者向けのタイプスクリプト、パート2:基本データ型 初心者向けのタイプスクリプト、パート2:基本データ型 Mar 19, 2025 am 09:10 AM

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル(ES6によって導入)とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull

chart.js:パイ、ドーナツ、バブルチャートを始めます chart.js:パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js:ラインチャートとバーチャート(チュートリアル2)、およびレーダーチャートと極地域チャート(チュートリアル3)を学びました。 パイとリングチャートを作成します パイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。 パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します

See all articles