JavaScript专题之类型判断(上) about blog HOT 57 OPEN

看来我还是没懂原型链 。。。
Object.toString是将Object作为一个对象访问，Object自身没有属性toString，toString在Object的原型链上，Object.proto===Funtion.prototype，toString是Function.prototype的一个属性

MDN中说，Function 对象覆盖了从 Object 继承来的 Object.prototype.toString 方法。函数的 toString 方法会返回一个表示函数源代码的字符串。具体来说，包括 function关键字，形参列表，大括号，以及函数体中的内容。若 this 不是 Function 对象，则 toString() 方法将抛出 TypeError异常

不知道有没有对楼上的问题有一点帮助，如果有不对的地方，欢迎指出~

from blog.

@cp-apple Array.isArray 是一个判断，意思是如果有 Array.isArray 这个方法，isArray 就等于这个方法，如果没有才使用后面这个函数，注意，这里的 isArray 是一个函数，如果加上 Array.isArray(obj)，如果 obj 不是数组，isArray 的值就等于 false 了

from blog.

看了类型判断的下一篇，里面讲到window的时候，大佬用了一段obj === obj.window。直接让我惊呆了，js的对象居然还能用===来判断的？然后去测试了下，很震惊的发现，诸如window、location、history这样的浏览器相关的对象，Object.prototype.toString.call方法都是单独识别出来。。。这还是头一次发现orz而且它们全都能通过===来和自身相等，当然这一点应该是因为内存中这些浏览器相关对象都只有一份。
由此也学到了一个知识点：js中的===并非对所有引用类型的数据进行判断时都为false，对于那些接近“单例”形式的对象，是可以和自身全等的。（知识点get）

from blog.

@DoubleMingZMM 有一点是用typeof判断效率更高一点；

from blog.

博主，这句哈撒意思？ES6 是新增了 Symbol 类型，博主是否写错了？
" 然而当我们使用 typeof 对这些数据类型的值进行操作的时候，返回的结果却不是一一对应，分别是：
undefined、object、boolean、number、string、object "

加油写，我会一直看的。

from blog.

@wangdabaoqq 正常调用 Object.prototype.toString.call(obj) 的时候，以 obj 为一个日期类型为例的话，结果会是 [object Date]，不是全大写，而是首字母大写，需求是希望结果是 "date"

from blog.

console.log(typeof Null);  // undefined

的结果应该是 undefined，而不是 object 吧？

哦是我搞错了，应该是

console.log(typeof null);  // object

from blog.

   Object.toString === Object.__proto__.toString // true
   Object.__proto__.toString === Function.prototype.toString // true
   Object.toString === Function.prototype.toString // true
   Function.prototype.toString.call('')
   // Uncaught TypeError: Function.prototype.toString requires that 'this' be a Function
   Function.prototype.toString.call(function () { a = 1 }) === "function () { a = 1 }" // true

from blog.

function checkType(target) {
    return Object.prototype.toString.call(target).slice(8, -1)
}

from blog.

from blog.

Object.prototype.toString.call(window)
"[object Window]"
Object.prototype.toString.call(document);
"[object HTMLDocument]"

from blog.

@HerryBin 感谢支持~ 正在努力撰写中……

想表达的意思就是对上面六种数据类型的值进行 typeof 运算，结果分别对应下面的值

typeof undefined // "undefined"
typeof null // "object"
typeof true // "boolean"
typeof 1 // "number"
typeof "s" // "string"
typeof {} // "object"

from blog.

我想问下这里 或 后面的object在什么情况下会发生
class2type[Object.prototype.toString.call(obj)] || 'object'

from blog.

@WittyBob 比如说 ES6 新增的 Symbol、Map、Set 等类型，它们并不在 class2type 列表中，所以使用 type 函数，返回的结果会是 object

from blog.

@mqyqingfeng 酷炫屌炸天

from blog.

关于结果是小写哪里如果不写这段

"Boolean Number String Function Array Date RegExp Object Error Null Undefined".split(" ").map(function(item, index) {
    class2type["[object " + item + "]"] = item.toLowerCase();
})

如数组打印出来它会是大写的吗？

from blog.

function detectType(val){
	return Object.prototype.toString.call(val).split(' ')[1].split(']')[0].toLowerCase();
}

不考虑兼容性的话，这样写有其他的问题吗？

from blog.

@xu824332362 可以呀，你也可以用正则匹配出来~

from blog.

var isArray = Array.isArray || function( obj ) {
return type(obj) === "array";
}
Array.isArray是不是少带了一个参数... Array.isArray(obj)

from blog.

@mqyqingfeng 噢噢，这样啊，谢谢。o.o

from blog.

Object.prototype.toString 标题和第一行 Object 拼错啦~ up 主 ~ (-c-

from blog.

@merzoo 哈哈，感谢细心的 merzoo 指出~ o(￣▽￣)ｄ

from blog.

记忆中还有一种判定方法是 instanceof
网上查了一下原来还有 constructor
一共4 种.

from blog.

@ClarenceC 确实的，基本是四种方法：

1. typeof
2. constructor
3. instanceof
4. Object.prototype.toString

对于数组类型，还有 Array.isArray 可以用于判断~

from blog.

@Tan90Qian 厉害了，我也才发现，原来：

Object.prototype.toString.call(location)
// "[object Location]"
Object.prototype.toString.call(history)
// "[object History]"

而且他们跟自身相等是因为引用是相同的吧，就像：

var obj = {};
console.log(obj === obj) // true

from blog.

@mqyqingfeng 对，是因为“自身和自身的引用相同”，但其实这个思路其实在写逻辑判断的时候非常少用吧？正常的情况是，基本不会在对引用类型进行逻辑判断的时候直接对数据本身使用===，而是借助于某些特性（比如type、length），所以之前看到那段代码的时候吃了一惊。毕竟window肯定是引用类型的，没想起自身相等这回事（遇到这种场景的次数太少了）。

PS：博主大大有空去看下bind的那一篇，感觉有些问题。

from blog.

@Tan90Qian bind 那篇有回复，确实是有问题的，我也发现了这一点，不过想到既然 MDN 实现如此，那我也讲到这种程度吧……完整的实现确实会更繁琐一点

from blog.

@mqyqingfeng 看到了，之前邮箱一直没有邮件提醒，我还以为dalao最近没空。从月初开始，每天看2、3篇博客，顺便“找茬”，收获非常大～

from blog.

@Tan90Qian 哈哈，欢迎接着“找茬”~

from blog.

看来我还是没懂原型链 。。。

from blog.

看来我还是没懂原型链 。。。
Object.toString是将Object作为一个对象访问，Object自身没有属性toString，toString在Object的原型链上，Object.proto===Funtion.prototype，toString是Function.prototype的一个属性

MDN中说，Function 对象覆盖了从 Object 继承来的 Object.prototype.toString 方法。函数的 toString 方法会返回一个表示函数源代码的字符串。具体来说，包括 function关键字，形参列表，大括号，以及函数体中的内容。若 this 不是 Function 对象，则 toString() 方法将抛出 TypeError异常

不知道有没有对楼上的问题有一点帮助，如果有不对的地方，欢迎指出~

虽然我已经查过了，但是你的回答还是非常棒的。

from blog.

那 Object.protototype.toString 究竟是一个什么样的方法呢？
单词错了~

from blog.

看来我还是没懂原型链 。。。
Object.toString是将Object作为一个对象访问，Object自身没有属性toString，toString在Object的原型链上，Object.proto===Funtion.prototype，toString是Function.prototype的一个属性

MDN中说，Function 对象覆盖了从 Object 继承来的 Object.prototype.toString 方法。函数的 toString 方法会返回一个表示函数源代码的字符串。具体来说，包括 function关键字，形参列表，大括号，以及函数体中的内容。若 this 不是 Function 对象，则 toString() 方法将抛出 TypeError异常

不知道有没有对楼上的问题有一点帮助，如果有不对的地方，欢迎指出~

虽然我已经查过了，但是你的回答还是非常棒的。

大神，我还是看不懂，能不能请教一下你的理解

from blog.

@hncsjxxxx
关于原型和原型链，可以查看这篇文章

from blog.

请问第一版中的 class2type[Object.prototype.toString.call(obj)] || "object" 后面这个"object"应该不需要吧，||前面的应该都包含所有情况了

from blog.

看到评论有人提这个了，知道啦

from blog.

实现type方法的时候为什么不直接用Object.prototype.toString.call()的形式判断所有类型，而是将基本数据类型使用typeof呢？是有什么问题吗？

from blog.

typeof BigInt(1)
"bigint"

Object.prototype.toString.call(BigInt(1))
"[object BigInt]"

from blog.

我想问下Object的valueOf和toString的区别在哪

from blog.

把map换成forEach是否更合理一些？ @mqyqingfeng

from blog.

请问下如何识别Proxy类型

from blog.

请问下如何识别Proxy类型

代理的值类型就是代理的那个值的类型

from blog.

试了一下新增的其他类型：

var symb = Symbol('test'); // [object Symbol]
var set = new Set();       // [object Set]
var map = new Map();       // [object Map]
var bigI = BigInt(1);      // [object BigInt]

加起来有 15 种了，乖乖~

from blog.

function type(obj) {
let toString = Object.prototype.toString
if(obj == null) {
return String(obj)
}
return typeof obj === 'object' ?
toString.call(obj).slice(8,toString.call(obj).length - 1).toLowerCase() : typeof obj
}
一种简便的写法

from blog.

var promise = new Promise(
function() {}
) // [object Promise]

from blog.

个人感觉jQuery这里做的不太好的就是，判断数据类型的type函数的扩展性不太好
类似像window location navigator document都会返回object啦 就不够精确
这里给出另外一个实现哈

const type = (obj?: any) => {
    if (typeof obj !== 'object' || typeof obj === 'function') {
        return typeof obj
    } else {
        return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase() 
    }
}

这个方法取Object.prototype.toString.call(obj)的构造函数名称的部分 然后直接转换成小写 就可以针对各种各样的构造函数啦

from blog.

@WittyBob 比如说 ES6 新增的 Symbol、Map、Set 等类型，它们并不在 class2type 列表中，所以使用 type 函数，返回的结果会是 object

symbol 不是基础类型吗？应该会走typeof 那一个吧

from blog.

from blog.

type API 个人感觉这么写更好些~

const typeMap = "Symbol Boolean Number String Function Array Date RegExp Object Error"
  .split(" ")
  .reduce((prev, item) => {
    prev[`[object ${item}]`] = item.toLowerCase();
    return prev;
  }, {});

function type(obj) {
  //解决IE6 中的兼容
  if(null == obj) return '' + obj;

  return typeof obj !== "object" 
    ? typeof obj
    : typeMap[Object.prototype.toString.call(obj)] || 'object';
}

from blog.

文中"那Object.protototype.toString 究竟是一个什么样的方法呢"，这里多写了个to

from blog.

请问一下怎么理解 typeof 函数 = function 而不是 object

from blog.

function type(obj) {
    // 一箭双雕
    if (obj == null) {
        return obj + "";
    }
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[Object.prototype.toString.call(obj)] || "object" :
        typeof obj;
}

这个地方有点疑惑，typeOf不是能直接检测出来为function类型吗？而且自己测试了在ie8+中是没有兼容问题的。那么为什么还需要通过Object.prototype.toString.call(obj)这一段进行function的类型检测呢？楼主。。。。是有什么其他的原因吗？

from blog.

大佬，我想问下明明Object.prototype.toString.call()已经可以检测出来所有这些类型了（包括基本类型），为什么还要去区分基本类型然后使用typeof呢？直接都是用Object.prototype.toString.call()不就好了吗

from blog.

function type(obj) {
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}

from blog.

"嗯，看起来很完美的样子~~ 但是注意，在 IE6 中，null 和 undefined 会被 Object.prototype.toString 识别成 [object Object]！
" 这句话是不对的， Object.prototype.toString.call(undefined) 返回的不是[object Object]，建议修正一下

from blog.

大佬，我想问下明明Object.prototype.toString.call()已经可以检测出来所有这些类型了（包括基本类型），为什么还要去区分基本类型然后使用typeof呢？直接都是用Object.prototype.toString.call()不就好了吗

typeof 效率更高

from blog.

学习的时候，得留下印记，不然今后如何感慨岁月如梭呢，转眼间，已经关注大佬博客3年了

from blog.