JavaScript类型检查与内部属性[[Class]]-js教程-PHP中文网

JavaScript类型检查与内部属性[[Class]]

黄舟

发布： 2017-02-28 14:53:14

原创

1413人浏览过

所有对象都包含有一个内部属性[[Class]]

我们不能直接访问这个属性，但是我们可以通过一种方法访问
这种方法就是object.prototype.tostring.call(...)
这也是比较靠谱的检查类型的方法（instanceof、constructor等等不靠谱）

比如说我们检测一个数组

Object.prototype.toString.call([1,2,3]);

登录后复制

控制台打印"[object Array]"
这里面的“Array”实际上就是调用了原生函数Array()内部的[[Class]]属性
我们可以封装一个检测类型的函数

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

登录后复制

函数很简单，单纯地调用了Object原型上的toString方法然后截取对我们有用的信息
我们可以来试试这个函数

console.log(classOf({'a':1}));
console.log(classOf([1,2,3]));
console.log(classOf(function a(){}));
console.log(classOf(/a/));
console.log(classOf(123));
console.log(classOf('abc'));
console.log(classOf(true));
console.log(classOf(Symbol()));
console.log(classOf(undefined));
console.log(classOf(null));

登录后复制

控制台打印

立即学习“Java免费学习笔记（深入）”；

可是我们发现不仅仅是对象，就连基本类型值string、number、boolean都可以打印
这是因为JavaScript为基本类型值包装了一个封装对象
使它们变成了对象，而String()、Number()、Boolean()上有属性[[Class]]
这里虽然undefined、null没有对应的原生函数Undefined()和Null()，但仍然有内部属性返回

通过这个函数我们可以进行精准的判断类型
甚至可以判断参数列表

function demo(){
    console.log(classOf(arguments));
}
demo();//"Arguments"

登录后复制

回到Object.prototype.toString.call(…)为什么要通过这么麻烦的一串来判断类型呢
我们可以看看直接调用toString()会发生什么

console.log({'a':1}.toString());
console.log([1,2,3].toString());
console.log(function a(){}.toString());
console.log(/a/.toString());
console.log(123..toString());
// 只写一个点会被当成小数点，所以再写一个点代表方法调用console.log('abc'.toString());
console.log(true.toString());
console.log(Symbol().toString());
// 基本类型调用方法，会自动封装为对象
// 不能使用undefined.toString()或null.toString()会报错，因为没有对应的封装对象

登录后复制

可以看到只有普通的对象返回了我们想要的，
这是因为普通对象直接调用了顶级原型Object上的toString方法
而数组、函数以及这些基本包装对象它们继承了Obejct的同时
重写了一些方法
在查找toString方法的时候，一定是自己原型链上的方法优先被找到
所以我们就需要利用call调用顶级原型Object.prototype上d的toString方法

以上就是JavaScript类型检查与内部属性[[Class]]的内容，更多相关内容请关注PHP中文网（www.php.cn）！