乐趣区

关于前端:前端百题斩001typeof和instanceof

思虑好久,终于要动笔写“前端百题斩”了,尽管是百题斩,但目前仅“js、浏览器和网络 ”局部就确定了 100 个高能知识点与敌人们分享。写该系列文章的初衷是“ 让每位前端工程师把握高频知识点,为工作助力 ”。心愿爱学习的敌人们关注公众号“ 执鸢者”,用常识武装本人的头脑。

1.1 typeof

1.1.1 根底介绍

typeof是一个运算符,其有两种应用形式:(1)typeof(表达式);(2)typeof 变量名;返回值是一个字符串,用来阐明变量的数据类型;所以能够用此来判断number, string, object, boolean, function, undefined, symbol 这七种类型,每种状况返回的内容如下表所示:

类型 后果
String ‘string’
Number ‘number’
Boolean ‘boolean’
Undefined ‘undefined’
Object ‘object’
function 函数 ‘function’
Symbol ‘symbol’

1.1.2 原理进阶

typeof办法尽管很好用,但该办法有肯定的局限性:对于对象、数组、null 返回的值是 object 。比方 typeof(window)typeof(document)typeof(null) 返回的值都是object,这是为什么呢?这就要从底层说起。js 在底层存储变量的时候,会在变量的机器码的低位 1 - 3 位存储其类型信息:

  1. 000:对象;
  2. 010:浮点数;
  3. 100:字符串;
  4. 110:布尔值;
  5. 1:整数;
  6. 特例:

    (1)null所有机器码均为0

    (2)undefined:用 −2^30 整数来示意

typeof就是通过机器码判断类型,因为 null 的所有机器码均为 0,该机器码和对象一样,因而间接被当作对象来对待,所以通过 typeof 就不可能判断辨别对象还有 null 了。

1.1.3 试验

说了这么多,还没有进行验证,上面就逐个验证一下:

// 字符串
console.log(typeof('lili')); // string
// 数字
console.log(typeof(1)); // number
// 布尔值
console.log(typeof(true)); // boolean
// undefined
console.log(typeof(undefined)); // undefined
// 对象
console.log(typeof({})); // object
// 数组
console.log(typeof([])); // object
// null
console.log(typeof(null)); // object
// 函数
console.log(typeof(() => {})); // function
// Symbol 值
console.log(typeof(Symbol())); // symbol

1.2 instanceof

1.2.1 根底介绍

instanceof运算符用于检测构造函数的 prototype 属性是否呈现在某个实例对象的原型链上, 返回值为布尔值,用于批示一个变量是否属于某个对象的实例。其语法如下所示:

object instanceof constructor

1.2.2 原理进阶

instanceof 次要的实现原理就是只有左边变量的 prototype 在右边变量的原型链上即可。因而,instanceof 在查找的过程中会遍历右边变量的原型链,直到找到左边变量的 prototype,如果查找失败,则会返回 false. 步骤如下所示:

  1. 获取右边变量的隐式原型(即:__ proto __ , 可通过 Object.getPrototypeOf()获取);
  2. 获取左边变量的显示原型(即:prototype);
  3. 进行判断,比拟 leftVal. proto . proto …… === rightVal.prototype,相等则返回 true,否则返回 false。

1.2.3 试验

下面讲述了 instanceof 的简略应用和其原理,上面简略应用一下并验证一下该原理:

const arr = [1, 2];
// 判断 Object 的 prototype 有没有在数组的原型链上
console.log(arr instanceof Object); // true
// 数组 arr 的原型
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); // []
// 数组 arr 的原型的原型
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); // []
// Object 的 prototype
console.log(Object.prototype);
// 判断 arr 的原型是否与 Object 的 prototype 相等
console.log(proto1 === Object.prototype); // false
// 判断 arr 的原型的原型是否与 Object 的 prototype 相等
console.log(proto2 === Object.prototype); // true

1. 如果感觉这篇文章还不错,来个分享、点赞吧,让更多的人也看到

2. 关注公众号执鸢者,与号主一起斩杀前端百题。

退出移动版