ES5的toString的探索与学习

有一个星期没写博客了，写张toSting来划划水。
作用：

• 返回一个表示该对象的字符串
• 检测对象的类型
• 返回一个数字 对应进制（2、8、10、16）的字符串

这篇文章主要讲的是前2点，因为第3点感觉实用性不大。

一、返回一个表示该对象的字符串

Object.prototype.toString()
每个对象都有一个toString方法，默认情况下，toString方法被每个Object对象继承。
如果此方法在自定义对象中未被覆盖，toString()返回 [object type]，其中type是对象的类型。

覆盖默认的toString方法，可以自定义一个方法，来取代默认的toString方法。
该toString方法不能传入参数、并且必须返回一个字符串。
自定义的toString方法可以是任何我们需要的值，但如果它附带有关对象的信息，它将变得非常有用。

// 没有自定义toString时，调用的是Object.prototype.toString()
class Pretty {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

const person = new Pretty('小红', 18)
console.log(person.toString())  // [object Object]

// 修改Object.prototype.toString验证obj.toString调用的就是Object继承而来的toString
class Pretty {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

const person = new Pretty('小红', 18)
Object.prototype.toString = function () {
  console.log('you use me')
  return '[object Object]'
}
console.log(person.toString())

接下来，我们可以修改Pretty类中的toString，以达到用toString来更好地表示Pretty这个对象。

class Pretty {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  // 覆盖Object.prototype.toString
  toString() {
    return `Pretty{name=${this.name}, age=${this.age}}`
  }
}

const person = new Pretty('小红', 18)
console.log(person.toString())

至此，toString方法就能完美的表示Pretty这个对象了。
下面这些题的打印结果是什么？

let c = true
console.log(c.toString())

c = 100
console.log(c.toString())

c = 'hello'
console.log(c.toString())

c = { name: 'wang' }
console.log(c.toString())

c = [1, 2, 3]
console.log(c.toString())

c = new Date()
console.log(c.toString())

c = function() { console.log('111111') }
console.log(c.toString())

c = new Error('你出错了')
console.log(c.toString())

二、检测对象的类型

如果此方法在自定义对象中未被覆盖，toString()返回 [object type]，其中type是对象的类型。 还记得这句话吗？再结合上图可以看出，除了Object，其他类型的数据都对Object的toString方法进行了重写，以达到更好的表达自身数据类型的目的。那如果使用call或apply来改变Object.prototype.toString() 执行时的上下文对象，是不是就可以打到打印 [object type] 的效果，以此来实现类似于Array.isArray一样的检测对象类型的效果。

// 对象类型判断
const typeJudgment = (function() {
  const type = ['Number', 'String', 'Boolean', 'Object', 'Function', 'Array', 'Date', 'RegExp', 'Error', 'Map', 'Set', 'Promise']
  return type.reduce((accu, item) => {
    accu[`is${item}`] = (target) => Object.prototype.toString.call(target) === `[object ${item}]`
    return accu
  }, {})
})()

测试：

console.log("isNumber", typeJudgment.isNumber(1))
console.log("isString", typeJudgment.isString(1))
console.log("isBoolean", typeJudgment.isBoolean(true))
console.log("isObject", typeJudgment.isObject({}))
console.log("isFunction", typeJudgment.isFunction(1))
console.log("isArray", typeJudgment.isArray([]))
console.log("isDate", typeJudgment.isDate(new Date))
console.log("isRegExp", typeJudgment.isRegExp(new RegExp))
console.log("isError", typeJudgment.isError(new Error))
console.log("isMap", typeJudgment.isMap(new Error))
console.log("isSet", typeJudgment.isSet(new Set))
console.log("isPromise", typeJudgment.isPromise(new Promise(res => {})))

结果：

完美，没有问题。心血来潮，对toString做了一些研究，对toString感觉了解又多了一点。
下面给再来一道练习题：

const obj1 = { name: 'wang', obj: '前端' }
const obj2 = { name: 'lin', obj: '后端' }

const obj = {}
obj[obj1] = obj1

console.log(obj[obj2])

欢迎大家一起交流，感觉写的还行的，请点个赞支持一下🤗~~~