【面试题】为什么Object.prototype.toString.call() 可以准确判断对象类型？

为什么Object.prototype.toString.call() 可以准确判断对象类型？

点击打开视频讲解

typeof 与 Object.prototype.toString.call()的对比

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

.toString()方法

返回这个对象的字符串表现

console.log("末晨曦吖".toString());//末晨曦吖  返回的是字符串对象的字符串表现
console.log((1).toString());//1
console.log([1,2].toString());//1,2  返回的是数组对象的字符串表现
console.log(new Date().toString());//Wed Dec 15 2021 17:08:24 GMT+0800 (中国标准时间)
console.log(function(){}.toString());//function (){}
console.log(null.toString());//error
console.log(undefined.toString());//error

总结：

.toString()返回这个对象的字符串表现
比如：[1,2].toString()  =》 返回的是数组对象的字符串表现
Array、function等类型作为Object的实例，都各自重写了自己的toString方法；
原型     	    obj
实例       Array     fn   都各自重写了自己的toString方法；
我们要得到对象的具体类型，需要调用Object的原型的未被重写的toString()方法；
delete属性用与删除对象的某个属性
hasOwnProperty()方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性；

为什么要加 .call（）

Object.prototype.toString([])	//'[object Object]'

总结：

Object.prototype返回的是原型的字符串的表现
原型       Obj
实例  Object.prototype
如果不加call()的话返回的就是原型obj的字符串的表现，
加call()其实就是把call中的参数传入原型obj中，指向被call的对象；
所以我们在使用时要加call()

<template>
  <div id="app">
    <button @click="getToString">toString()</button>
    <button @click="deleteToString">delete</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      
    }
  },
  methods:{
    getToString(){
      console.log("末晨曦吖".toString());   //末晨曦吖
      console.log((1).toString());    //1
      console.log([1,2].toString());    //1,2
      console.log(new Date().toString());   //Wed Dec 15 2021 17:08:24 GMT+0800 (中国标准时间)
      console.log(function(){}.toString());   //function (){}
      console.log(null.toString());   //error
      console.log(undefined.toString());    //error
    },
    deleteToString(){
      // 例
      delete Array.prototype.toString
      console.log([1,2].toString())     //[object Array]
      console.log(Array.prototype.hasOwnProperty('toString'))   //false
    }
  }
}
</script>

<style scoped>
 
</style>

点击打开视频讲解原型与原型链