前端百题斩之 Typeof 和 Instanceof

开发 前端
typeof方法虽然很好用,但该方法有一定的局限性:对于对象、数组、null 返回的值是 object。比如typeof(window),typeof(document),typeof(null)返回的值都是object,这是为什么呢?这就要从底层说起。

[[429896]]

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 实验

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

  1. // 字符串 
  2. console.log(typeof('lili')); // string 
  3. // 数字 
  4. console.log(typeof(1)); // number 
  5. // 布尔值 
  6. console.log(typeof(true)); // boolean 
  7. // undefined 
  8. console.log(typeof(undefined)); // undefined 
  9. // 对象 
  10. console.log(typeof({})); // object 
  11. // 数组 
  12. console.log(typeof([])); // object 
  13. // null 
  14. console.log(typeof(null)); // object 
  15. // 函数 
  16. console.log(typeof(() => {})); // function 
  17. // Symbol值 
  18. console.log(typeof(Symbol())); // symbol 

1.2 instanceof

1.2.1 基础介绍

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

  1. object instanceof constructor 

1.2.2 原理进阶

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

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

1.2.3 实验

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

  1. const arr = [1, 2]; 
  2. // 判断Object的prototype有没有在数组的原型链上 
  3. console.log(arr instanceof Object); // true 
  4. // 数组arr的原型 
  5. const proto1 = Object.getPrototypeOf(arr); 
  6. console.log(proto1); // [] 
  7. // 数组arr的原型的原型 
  8. const proto2 = Object.getPrototypeOf(proto1); 
  9. console.log(proto2); // [] 
  10. // Object的prototype 
  11. console.log(Object.prototype); 
  12. // 判断arr的原型是否与Object的prototype相等 
  13. console.log(proto1 === Object.prototype); // false 
  14. // 判断arr的原型的原型是否与Object的prototype相等 
  15. console.log(proto2 === Object.prototype); // true 

本文转载自微信公众号「前端点线面」,可以通过以下二维码关注。转载本文请联系前端点线面公众号。

 

责任编辑:武晓燕 来源: 前端点线面
相关推荐

2021-05-09 22:00:59

TypeofInstanceof运算符

2021-07-26 06:57:58

重绘回流前端

2021-05-12 07:04:55

Js变量方式

2021-06-28 07:12:28

赋值浅拷贝深拷贝

2021-05-19 07:02:42

JS对象方法

2021-07-05 07:02:33

前端跨域策略

2021-05-30 19:02:59

变量对象上下文

2021-06-09 07:01:30

前端CallApply

2015-12-24 10:05:39

JavaScripttypeofinstanceof

2021-06-11 06:54:34

原型构造函数

2021-07-08 07:01:53

浏览器安全前端

2021-11-03 06:57:41

浏览器Jsonp安全

2021-12-03 06:59:23

操作符验证点属性

2021-07-14 07:00:53

浏览器技巧前端

2021-10-18 09:01:01

前端赋值浅拷贝

2021-08-04 06:56:49

HTTP缓存前端

2021-08-02 06:49:46

HTTP网络模型

2021-06-04 07:04:29

闭包JavaScript函数

2021-11-19 09:01:09

防抖节流前端

2021-07-26 05:01:55

浏览器渲染流程
点赞
收藏

51CTO技术栈公众号