谈谈 Object.prototype.toString 。

原创 2017年05月13日 20:41:42

原文链接我的blog

前几日看到一个比较熟悉的面试题,判断一个变量是不是数组?
以下几种方法供参考:

var arr = [1, 2, 3]
Array.isArray(arr)
arr instanceof Array
arr.constructor === Array
Object.prototype.toString.call(arr) === '[object Array]'
...

这篇文章主要是谈谈 Object.prototype.toString

ECMAScript 5

在ECMAScript 5中,Object.prototype.toString()被调用时,会进行如下步骤:
- 如果 thisundefined ,返回 [object Undefined]
- 如果 thisnull , 返回 [object Null]
- 令 O 为以 this 作为参数调用 ToObject 的结果;
- 令 classO 的内部属性 [[Class]] 的值;
- 返回三个字符串 "[object", class, 以及"]" 拼接而成的字符串。

[[Class]]

[[Class]]是一个内部属性,值为一个类型字符串,可以用来判断值的类型。

有这么一段详细的解释:

本规范的每种内置对象都定义了 [[Class]] 内部属性的值。宿主对象的 [[Class]] 内部属性的值可以是除了 “Arguments”, “Array”, “Boolean”, “Date”, “Error”, “Function”, “JSON”, “Math”, “Number”, “Object”, “RegExp”, “String” 的任何字符串。[[Class]] 内部属性的值用于内部区分对象的种类。注,本规范中除了通过 Object.prototype.toString ( 见 15.2.4.2) 没有提供任何手段使程序访问此值。

在JavaScript代码里,唯一可以访问该属性的方法就是通过 Object.prototype.toString ,通常方法如下:

Object.prototype.toString.call(value)

举例:

> Object.prototype.toString.call(null)
'[object Null]'

> Object.prototype.toString.call(undefined)
'[object Undefined]'

> Object.prototype.toString.call(Math)
'[object Math]'

> Object.prototype.toString.call({})
'[object Object]'

> Object.prototype.toString.call([])
'[object Array]'

因此,可以用下列函数,来获取任意变量的[[Class]]属性:

function getClass (a) {
  const str = Object.prototype.toString.call(a)
  return /^\[object (.*)\]$/.exec(str)[1]
}

运行即可得

> getClass(null)
'Null'

> getClass(undefined)
'Undefined'

> getClass(Math)
'Math'

> getClass({})
'Object'

> getClass([])
'Array'

ECMAScript 6

在ES6,调用 Object.prototype.toString 时,会进行如下步骤:
- 如果 thisundefined ,返回 '[object Undefined]' ;
- 如果 thisnull , 返回 '[object Null]'
- 令 O 为以 this 作为参数调用 ToObject 的结果;
- 令 isArrayIsArray(O)
- ReturnIfAbrupt(isArray) (如果 isArray 不是一个正常值,比如抛出一个错误,中断执行);
- 如果 isArraytrue , 令 builtinTag'Array' ;
- else ,如果 O is an exotic String object , 令 builtinTag'String'
- else ,如果 O 含有 [[ParameterMap]] internal slot, , 令 builtinTag'Arguments'
- else ,如果 O 含有 [[Call]] internal method , 令 builtinTagFunction
- else ,如果 O 含有 [[ErrorData]] internal slot , 令 builtinTagError
- else ,如果 O 含有 [[BooleanData]] internal slot , 令 builtinTagBoolean
- else ,如果 O 含有 [[NumberData]] internal slot , 令 builtinTagNumber
- else ,如果 O 含有 [[DateValue]] internal slot , 令 builtinTagDate
- else ,如果 O 含有 [[RegExpMatcher]] internal slot , 令 builtinTagRegExp
- else , 令 builtinTagObject
- 令 tagGet(O, @@toStringTag) 的返回值( Get(O, @@toStringTag) 方法,既是在 O 是一个对象,并且具有 @@toStringTag 属性时,返回 O[Symbol.toStringTag] );
- ReturnIfAbrupt(tag) ,如果 tag 是正常值,继续执行下一步;
- 如果 Type(tag) 不是一个字符串,let tag be builtinTag
- 返回由三个字符串 "[object", tag, and "]" 拼接而成的一个字符串。

在ES6里,之前的 [[Class]] 不再使用,取而代之的是一系列的 internal slot ,有一个比较完整的解释:

Internal slots correspond to internal state that is associated with objects and used by various ECMAScript specification algorithms. Internal slots are not object properties and they are not inherited. Depending upon the specific internal slot specification, such state may consist of values of any ECMAScript language type or of specific ECMAScript specification type values

大概的意思是:Internal slots 对应于与对象相关联并由各种ECMAScript规范算法使用的内部状态,它们没有对象属性,也不能被继承,根据具体的 Internal slot 规范,这种状态可以由任何ECMAScript语言类型或特定ECMAScript规范类型值的值组成。

此外,通过对 Object.prototype.toString 在ES6的实现步骤分析,我们其实可以很容易改变 Object.prototype.toString.call 的结果,像下面一样:

let obj = {}

Object.defineProperty(obj, Symbol.toStringTag, {
    get: function() {
        return "newClass"
    }
})

console.log(Object.prototype.toString.call(obj)) // "[object newClass]"

ECMAScript 7

ES7目前还是工作草案,到目前为止,就 Object.prototype.toString 的实现步骤来说, 只是移除了ES6其中的 ReturnIfAbrupt

参考

  1. http://www.ecma-international.org/ecma-262/5.1
  2. http://www.adobe.com/devnet/archive/html5/articles/categorizing-values-in-javascript.html
  3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
  4. http://www.ecma-international.org/ecma-262/6.0/
  5. http://es6.ruanyifeng.com/#docs/symbol
  6. https://tc39.github.io/ecma262/#sec-object.prototype.tostring

完。

ES6学习——新的语法:Symbols——Symbol.toPrimitive,Symbol.hasInstance,Symbol.toStringTag,Symbol.species

这节讲的这四个没有Symbol.iterator常见,但可能也会用到,由于浏览器对这些well-known symbols不是都支持,所以我们需要用Kinoma来测试这些特性。 先看比较简单...
  • kittyjie
  • kittyjie
  • 2016年01月06日 15:03
  • 1772

谈谈 Object.prototype.toString 。

原文链接我的blog。 前几日看到一个比较熟悉的面试题,判断一个变量是不是数组? 以下几种方法供参考:var arr = [1, 2, 3] Array.isArray(arr) arr insta...
  • github_36978270
  • github_36978270
  • 2017年05月13日 20:41
  • 158

Object.prototype.toString

1.判断基本类型: Object.prototype.toString.call(null);//”[object Null]” Object.prototype.toString.call(und...
  • qq_30923455
  • qq_30923455
  • 2016年11月07日 14:23
  • 65

js中通过Object.prototype.toString方法----精确判断对象的类型

在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种。 对于数...
  • icanlove
  • icanlove
  • 2015年02月10日 14:31
  • 14018

TypeScript学习(3)-新类型Symbols的使用

Symbols是ECMAScript 2015的新的原生类型。 1.symbol类型的值是通过Symbol构造函数创建的。 let sym1 = Symbol(); let sym2 = Symbo...
  • u012426959
  • u012426959
  • 2017年11月23日 08:45
  • 117

ES6学习系列目录

ES6学习系列目录
  • kittyjie
  • kittyjie
  • 2015年12月14日 08:46
  • 1486

关于javascript中Object.prototype.toString 可以被改变指向的问题

问题 今天同事问了一个问题:为什么Object.prototype.toString()为什么可以改变指向?例如: var obj = new Object(); console.log( ...
  • fly_zxy
  • fly_zxy
  • 2016年06月02日 16:40
  • 456

typeof、instanceof、Object.prototype.toString.call() 区分对象类型

转自:http://mangguo.org/object-prototype-tostring-call-distinguish-between-the-type-of-object/ 在 Ja...
  • chelen_jak
  • chelen_jak
  • 2015年11月24日 10:53
  • 1262

TypeScript Symbols 介绍

Symbols 介绍自ECMAScript 2015起,symbol成为了一种新的原生类型,就像number和string一样。symbol类型的值是通过Symbol构造函数创建的。let sym1...
  • xiejunna
  • xiejunna
  • 2016年12月12日 19:42
  • 897

TypeScript Symbols和迭代器

一、Symbols 1.介绍 自ECMScript2015起,symbol成为一种新的原生类型,就像number和string一样。symbol类型的值通过Symbol构造函数创建的。 Symb...
  • u011127019
  • u011127019
  • 2017年07月01日 14:35
  • 505
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:谈谈 Object.prototype.toString 。
举报原因:
原因补充:

(最多只允许输入30个字)