第二篇 JS数据类型之检测篇

目录
文章目录隐藏
  1. 1. typeof 是否能正确判断类型?
  2. 2. instanceof 能否判断基本数据类型?
  3. 3. 能不能手动实现一下 instanceof 的功能?
  4. 4. Object.is 和===的区别?
  5. 更多相关文章推荐:

1. typeof 是否能正确判断类型?

对于原始类型来说,除了 null 都可以调用 typeof 显示正确的类型。

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'

但对于引用数据类型,除了函数之外,都会显示”object”。

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

因此采用 typeof 判断对象数据类型是不合适的,采用 instanceof 会更好,instanceof 的原理是基于原型链的查询,只要处于原型链中,判断永远为 true

const Person = function() {}
const p1 = new Person()
p1 instanceof Person // true

var str1 = 'hello world'
str1 instanceof String // false

var str2 = new String('hello world')
str2 instanceof String // true

2. instanceof 能否判断基本数据类型?

能。比如下面这种方式:

class PrimitiveNumber {
  static [Symbol.hasInstance](x) {
    return typeof x === 'number'
  }
}
console.log(111 instanceof PrimitiveNumber) // true

Symbol.hasInstance 用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个类上的行为。

更多解释可以看看MDN 上关于 hasInstance 的解释

其实就是自定义 instanceof 行为的一种方式,这里将原有的 instanceof 方法重定义,换成了 typeof,因此能够判断基本数据类型。

3. 能不能手动实现一下 instanceof 的功能?

核心: 原型链的向上查找。

function myInstanceof(left, right) {
    //基本数据类型直接返回 false
    if(typeof left !== 'object' || left === null) return false;
    //getProtypeOf 是 Object 对象自带的一个方法,能够拿到参数的原型对象
    let proto = Object.getPrototypeOf(left);
    while(true) {
        //查找到尽头,还没找到
        if(proto == null) return false;
        //找到相同的原型对象
        if(proto == right.prototype) return true;
        proto = Object.getPrototypeOf(proto);
    }
}

测试:

console.log(myInstanceof("111", String)); //false
console.log(myInstanceof(new String("111"), String));//true

4. Object.is 和===的区别?

Object 在严格等于的基础上修复了一些特殊情况下的失误,具体来说就是+0 和-0,NaN 和 NaN。 源码如下:

function is(x, y) {
  if (x === y) {
    //运行到 1/x === 1/y 的时候 x 和 y 都为 0,但是 1/+0 = +Infinity, 1/-0 = -Infinity, 是不一样的
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    //NaN===NaN 是 false,这是不对的,我们在这里做一个拦截,x !== x,那么一定是 NaN, y 同理
    //两个都是 NaN 的时候返回 true
    return x !== x && y !== y;
  }
}

更多相关文章推荐:

(建议收藏)原生 JS 知识系统整理

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 第二篇 JS数据类型之检测篇

发表回复