详细说明ECMAScript7规范中ToPrimitive抽象设置的知识（示例）

'' + [1, 2, 3] // "1,2,3"

根据规范中的加法操作，对于操作x + y，会调用ToPrimitive(x)和ToPrimitive(y)把x和y转化为原始数据类型。上面的例子中''本身就是原始数据类型了，所以返回''自身。[1, 2, 3]是对象类型，并且数组没有定义@@toPrimitive属性。因为没有提供PreferredType，所以在ToPrimitive操作的步骤6中，hint变为"number"，所以OrdinaryToPrimitive中的methodNames是? "valueOf", "toString" ?。

var a = [1, 2, 3]
a.valueOf() // [1, 2, 3]，数组a本身
a.toString() // "1,2,3"
因为valueOf返回的是数组a本身，还是对象类型，所以会继续调用toString方法，返回了字符串"1,2,3"，所以
'' + [1, 2, 3] // => '' + '1,2,3' => '1,2,3'
那么，如果我们覆盖数组原型上的valueOf方法，使得该方法返回一个原始数据类型，那么结果会是什么呢？
var a = [1, 2, 3]
a.valueOf = function () {
    console.log('trigger valueOf')
    return 'hello'
}
'' + a //  => '' + 'hello' => 'hello'
覆盖默认的valueOf之后，调用valueOf会返回原始数据类型。根据OrdinaryToPrimitive的3.2.2，这个时候就直接返回了，不会再调用toString方法。同时在控制台会log出"trigger valueOf"，也就是说valueOf确实是调用了。
那么，如果我们覆盖数组默认的toString方法，使得该方法返回对象类型，那么结果会是什么呢？
var a = [1, 2, 3]
a.toString = function () {
    console.log('trigger toString')
    return this
}
'' + a // Uncaught TypeError: Cannot convert object to primitive value
因为数组原型上的valueOf方法返回对象类型，在上面的例子中，我们把toString覆盖了，使它也返回对象类型，那么就会直接走到OrdinaryToPrimitive的第4步，也就是抛出类型错误的异常，不能把对象转化为原始数据类型。
在上面我们提到过可以通过@@toPrimitive方法来自定义ToPrimitive的行为，比如下面的例子：
var a = [1, 2, 3]
a[Symbol.toPrimitive] = function () {
    return 'custom'
}
'' + a // => '' + 'custom' => 'custom'
相加操作在调用ToPrimitive的时候没有提供PreferredType，接下来讲一个会优先使用hint String作为PreferredType的例子：
var a = [1, 2, 3]
a.valueOf = function () {
    console.log('trigger valueOf')
    return 'hello'
}
a.valueOf() // "hello"
a.toString() // "1,2,3"
var obj = {}
obj[a] = 'hello' // obj是{1,2,3: "hello"}
在把变量作为键值使用的时候，会调用ToPrimitive把键值转化为原始数据类型，并且PreferredType的值是hint String。通过上面的例子也可以看出来，a.valueOf和a.toString的结果都是字符串，但是使用了'1,2,3'，也就是使用了a.toString的结果。当然，如果我们重新定义toString方法，并且返回对象，那么就会使用valueOf的值了：
var a = [1, 2, 3]
a.valueOf = function () {
    console.log('trigger valueOf')
    return 'hello'
}
a.toString = function () {
    console.log('trigger toString')
    return this
}
var obj = {}
obj[a] = 'hello' // obj是{hello: "hello"}
并且会在控制台先log出"trigger toString"，后log出"trigger valueOf"。当然，如果这两个都返回对象，那么还是会报错：
var a = [1, 2, 3] // 使用原型链上的valueOf方法
a.toString = function () {
    console.log('trigger toString')
    return this
}
var obj = {}
obj[a] = 'hello' // Uncaught TypeError: Cannot convert object to primitive value
Date
在上面讲ToPrimitive的时候，提到Date对象和Symbol对象在原型上定义了@@toPrimitive方法。在ToPrimitive的第6步的操作中，我们可以看到当没有提供PreferredType的时候，优先调用valueOf方法。Date原型上的@@toPrimitive做的事情非常简单：当没有提供PreferredType的时候，优先调用toString方法。所以对于上面的操作，Date对象的行为是不一样的：
var a = [1, 2, 3]
a.valueOf = function () {
    return 'hello'
}
a.valueOf() // "hello"
a.toString() // "1,2,3"
'' + a // "hello"
var date = new Date()
date.valueOf() // 1536416960724
date.toString() // "Sat Sep 08 2018 22:29:20 GMT+0800 (中国标准时间)"
'' + date // "Sat Sep 08 2018 22:29:20 GMT+0800 (中国标准时间)"
我们可以看到date的valueOf方法和toString方法都返回原始数据类型，但是优先使用了toString方法。
总结
本文主要讲解了ToPrimitive抽象操作，以及一些相关的例子，希望大家能有所收获。
以上就是详解ECMAScript7规范中ToPrimitive抽象操作的知识（示例）的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：详细说明ECMAScript7规范中ToPrimitive抽象设置的知识（示例）