typeof和instanceof的区分和实现原理

、typeof

typeof是一个操作符而不是函数，用来检测给定变量的数据类型常用于检测如下类型：

string,number,boolean,undefined,symbol

typeof原理：

不同的对象在底层都表示为二进制，在Javascript中二进制前（低）三位存储其类型信息。

000: 对象
010: 浮点数
100：字符串
110：布尔
1：整数

typeof null 为什么为object？

答：不同的对象在底层都表示为二进制，在Javascript中二进制前（低）三位都为0的话会被判断为Object类型，null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回"object"。

2、instanceof

判断引用数据类型

一个对象是否为某一个构造函数的实例；或者说判断一个实例是否属于某种类型

console.log({} instanceof Object) // true
// 也可以判断一个实例是否是其父类型或者祖先类型的实例
console.log([] instanceof Object) // true
console.log([] instanceof Array)  // true


function Foo() {}
let f = new Foo()
console.log(f instanceof Foo) //true

instanceof的实现原理

function instanceof2(L, R) { //L是表达式左边，R是表达式右边
    const O = R.prototype;
    L = L.__proto__;
    while(true) {
        if (L === null)
            return false;
        if (L === O) // 这里重点：当 L 严格等于 0 时，返回 true 
            return true;
        L = L.__proto__;
    }
}

instanceof2([],Object) //true

3、Object.prototype.toString.call()

一般利用原型属性来判断数据类型

击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

首先，我们知道在ECMAScript中有5种基本数据类型（undefined，Null，Boolean，Number和String）。还有一种复杂的数据类型（Object）。鉴于ECMAScript是松散类型，因此需要有一种手段来检测给定变量的数据类型，然而，typeof就是负责提供这方面信息的操作符。

对一个值使用typeof操作符可能返回下列某个字符串：

"undefined" - 如果这个值未定义
"boolean" - 如果这个值布尔值
"string" - 如果这个值是字符串
"number" - 如果这个值是数值
"object" -如果这个值是对象或null
"function" -如果这个值是函数

知道了上面这些知识点之后，下面，进入今天要讲的重点内容。

在工作中，我们时常需要去检测一个值是否是一个对象，通过上面分析，如果直接使用typeof会存在一些缺陷。然而，如何才能让这个判断代码输出结果符合我的意愿呢？需要考虑三个点。

从最基本的这个判断函数开始：

第一个点，Null类型需要排除

null值表示的是一个空对象指针，也就是说：

console.log(isObject(null))

输出：true

这不是我们需要的，所以我们将代码改成下面这样子：

这样的话，就将str为null判断成object的情况过滤掉了。

第二个点，function需要考虑成object

函数通过typeo返回的是一个字符串function。如下所示：

大多数情况下，可能这是我们期望的情况，但有时候我们希望将函数考虑成输出ture的情况。我们的代码可以这么改：

最加了一个typeof(str)全等于function。

第三个点，Array不需要考虑成object

数组通过typeof返回的是一个字符串object。如下所示：

因为数组确实也是一个对象呀，同样在大多数情况下，这也是我们期望的情况，但是，有时候我需要将数组考虑输出false的情况，可以往isObject函数里再加一行代码：

为什么要分上面这三点来讲一下了？这样一来，我们可以根据自己的实际情况来考虑需要过虑哪种类型，自由组合代码。

如果同时需要对空值，数组，函数返回false，只让对象返回true，下面这么搞，会更简单。

没错，利用contructor指向来判断。

总结一下：

对于一些这样的判断，在应用层面，也可以使用一些现有库封装好的函数，或者新标准提供的函数。

从新增了css3一些新属性后，给很多前端开发者在制作网页效果方面带来了很大的方便！增强了炫酷的用户体验！下面来说说css3属性选择器input下的radio定制效果，感兴趣的小伙伴可以看看！

效果是这样的：

模拟一个方向盘指示效果，当你点击上下左右，方向指针就会指向到那个位置！

实现代码如下：

html结构：

css样式部分：

附上项目中用到的图标：

在线咨询

上一篇：HTML基础总结
下一篇：VC/MFC将cmd的执行结果显示在rich-edit控件上

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商