• 【JS】typeof和instanceof的区别是什么?


    简介:typeof和instanceof的区别是:typeof的返回值是一个字符串,用来说明变量的数据类型;instanceof的返回值是布尔值,用于判断一个变量是否属于某个对象的实例。


     

    比较typeof与instanceof

    相同点:

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空, 或者是什么类型的。

    不同点:

    typeof:

    1、返回值是一个字符串, 用来说明变量的数据类型。

    typeof 操作符返回一个字符串,表示未经计算的操作数的类型

    2、typeof 一般只能返回如下几个结果: number, boolean, string, function, object, undefined。

    1. if (typeof a != "undefined") {
    2. console.log("ok");
    3. } eles {
    4. console.log("not ok");
    5. }
    6. //下面的代码是错误的
    7. // if (a) //因为如果 a 不存在( 未声明) 则会出错。
    8. // if (a) {
    9. // console.log("ok");
    10. // } else {
    11. // console.log('cc');
    12. // }

    对于 Array, Null 等特殊对象使用 typeof 一律返回 object, 这正是 typeof 的局限性。

    instanceof:

    1、返回值为布尔值

    2、instanceof 用于判断一个变量是否属于某个对象的实例。

    instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

    使用如下:
     

    ​object instanceof constructor

    object为实例对象,constructor为构造函数


    构造函数通过new可以实例对象,instanceof能判断这个对象是否是之前那个构造函数生成的对象
     

    分析:instance的意思是实例,因此可以知道instanceof的作用就是判断该对象是谁的实例,我们也就知道了instanceof是对象运算符。

    这就牵扯到了对象的继承,他的判断就是根据原型链进行搜寻,在对象obj1的原型链上如果存在另一个对象obj2的原型属性,那么表达式(obj1 instanceof obj2)返回值为true,(判断obj1是否为obj2的实例),否则为false。

    ⏬ 示例: 

    1. var a = new Array();
    2. alert(a instanceof Array); // true
    3. alert(a instanceof Object) // true
    4. //如上, 会返回 true, 同时 alert(a instanceof Object) 也会返回 true;
    5. // 这是因为 Array 是 object 的子类。
    6. alert(b instanceof Array) // b is not defined
    7. function Test() {};
    8. var a = new test();
    9. alert(a instanceof test) // true

    ⏬ 示例:  

    1. // 定义构建函数
    2. let Car = function() {}
    3. let benz = new Car()
    4. benz instanceof Car // true
    5. let car = new String('xxx')
    6. car instanceof String // true
    7. let str = 'xxx'
    8. str instanceof String // fals

    总结:typeof与instanceof都是判断数据类型的方法,区别如下:

    typeof返回值是一个字符串,instanceof返回的是一个布尔值

    1、 typeof对于丰富的对象实例,只能返回object,导致有时候得不到真实的数据类型。

    typeof用于数据类型的判断,返回值有number、string、boolean、function、undefined、object 六个。但是,在其中你会发现,typeof判断null、array、object以及函数的实例(new + 函数)时,它返回的都是object。这就导致在判断这些数据类型的时候得不到真实的数据类型。所以,typeof 存在的弊端——它虽然可以判断基本数据类型(null 除外),但是引用数据类型中,除了function 类型以外,其他的也无法判断。由此引出instanceof。 

    2、instanceof 可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型。

    instanceof用来判断对象,可以对不同的实例对象进行判断,判断方法是根据对象的原型链依次向下查询,如果obj2的原型属性存在于obj1的原型链上,代码形式(obj1 instanceof obj2)(判断obj1是否为obj2的实例),obj2必须为对象,否则会报错。返回的是布尔值。

    可以看到,上述两种方法都有弊端,并不能满足所有场景的需求

    如果需要通用检测数据类型,可以采用Object.prototype.toString,调用该方法,统一返回格式“[object Xxx]”的字符串,代码形式,如下:

    1. Object.prototype.toString({})       // "[object Object]"
    2. Object.prototype.toString.call({})  // 同上结果,加上call也ok
    3. Object.prototype.toString.call(1)    // "[object Number]"
    4. Object.prototype.toString.call('1')  // "[object String]"
    5. Object.prototype.toString.call(true)  // "[object Boolean]"
    6. Object.prototype.toString.call(function(){})  // "[object Function]"
    7. Object.prototype.toString.call(null)   //"[object Null]"
    8. Object.prototype.toString.call(undefined) //"[object Undefined]"
    9. Object.prototype.toString.call(/123/g)    //"[object RegExp]"
    10. Object.prototype.toString.call(new Date()) //"[object Date]"
    11. Object.prototype.toString.call([])       //"[object Array]"
    12. Object.prototype.toString.call(document)  //"[object HTMLDocument]"
    13. Object.prototype.toString.call(window)   //"[object Window]"

    了解了toString的基本用法,下面就实现一个全局通用的数据类型判断方法

    1. function getType(obj){
    2.   let type  = typeof obj;
    3.   if (type !== "object") { // 先进行typeof判断,如果是基础数据类型,直接返回
    4.     return type;
    5.   }
    6.   // 对于typeof返回结果是object的,再进行如下的判断,正则返回结果
    7.   return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
    8. }


    代码形式,使用如下:

    1. getType([])     // "Array" typeof []是object,因此toString返回
    2. getType('123')  // "string" typeof 直接返回
    3. getType(window) // "Window" toString返回
    4. getType(null)   // "Null"首字母大写,typeof null是object,需toString来判断
    5. getType(undefined)   // "undefined" typeof 直接返回
    6. getType()            // "undefined" typeof 直接返回
    7. getType(function(){}) // "function" typeof能判断,因此首字母小写
    8. getType(/123/g)      //"RegExp" toString返回

    总之,instanceof和typeof是两个运算符,在程序设计中用到,常用来判断一个变量是否为空,或者是什么类型的。

    instanceof和typeof的区别:

    ◼️ typeof

    typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。 返回值是一个字符串,该字符串说明运算数的类型。

    typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined。

    一般可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出错,对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 typeof 的局限性。

    ◼️ instanceof

    instance:实例,例子

    a instanceof b?alert("true"):alert("false"); // a是b的实例?真:假

    instanceof 用于判断一个变量是否某个对象的实例,如 var a=new Array();alert(a instanceof Array); 会返回 true,同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。

  • 相关阅读:
    java70-GUL图形用户界面初识
    【C语言案例】——三子棋
    【Java】运算符以及JShell脚本工具
    vulhub中GitLab 任意文件读取漏洞复现(CVE-2016-9086)
    CIE A-Level化学Paper 1真题讲解(5)
    由前端接口入门学习后端的controller层
    【老生谈算法】matlab实现基本遗传算法应用实例——遗传算法
    Java 接口的学习笔记
    Spring Boot面试必问:启动流程
    如何使用Python和Matplotlib创建双Y轴动态风格折线图 | 数据可视化教程
  • 原文地址:https://blog.csdn.net/sunyctf/article/details/125661704