JavaScript中typeof与instanceof之间的区别介绍(代码示例)

本篇文章给大家带来的内容是关于javascript中typeof与instanceof之间的区别介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

JavaScript 中typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的。但它们之间还是有区别的:

typeof

typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。

它返回值是一个字符串,该字符串说明运算数的类型。(typeof 运算符返回一个用来表示表达式的数据类型的字符串。 )

typeof其实就是判断参数是什么类型的实例,就一个参数

立即学习“Java免费学习笔记(深入)”;

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

运算数为数字 typeof(x) = “number”

字符串 typeof(x) = “string”

布尔值 typeof(x) = “boolean”

对象,数组和null typeof(x) = “object”

函数 typeof(x) = “function”

console.log(typeof (123));//typeof(123)返回"number" console.log(typeof ("123"));//typeof("123")返回"string"var param1 = "string";var param2 = new Object();var param3 = 10;console.log(typeof(param1)+""+typeof(param2)+""+typeof(param3));      // string object  number

登录后复制

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

经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组.

    if(document.mylist.length != "undefined" ) {} //这个用法有误.    正确的是 `if( typeof(document.mylist.length) != "undefined" ) {}`      或 `if( !isNaN(document.mylist.length) ) {}`

登录后复制

typeof的运算数未定义,返回的就是 “undefined”.

在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。这就需要用到instanceof来检测某个对象是不是另一个对象的实例。

instanceof

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

语法:object instanceof constructor
参数:object(要检测的对象.)constructor(某个构造函数)
描述:instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

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 的子类。再如:function test(){};var a=new test();alert(a instanceof test) 会返回truealert(a==b);  //flase

登录后复制

案例:

另外,更重的一点是 `instanceof` 可以在继承关系中用来判断一个实例是否属于它的父类型。例如:function Foo(){} Foo.prototype = new Aoo();//JavaScript 原型继承 var foo = new Foo(); console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true上面的代码中是判断了一层继承关系中的父类,在多层继承关系中,instanceof 运算符同样适用。又如:console.log(Object instanceof Object);//true console.log(Function instanceof Function);//true console.log(Number instanceof Number);//false console.log(String instanceof String);//false  console.log(Function instanceof Object);//true  console.log(Foo instanceof Function);//true console.log(Foo instanceof Foo);//false

登录后复制

// 定义构造函数function C(){} function D(){} var o = new C();// true,因为 Object.getPrototypeOf(o) === C.prototypeo instanceof C; // false,因为 D.prototype不在o的原型链上o instanceof D; o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回trueC.prototype instanceof Object // true,同上C.prototype = {};var o2 = new C();o2 instanceof C; // trueo instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.D.prototype = new C(); // 继承var o3 = new D();o3 instanceof D; // trueo3 instanceof C; // true

登录后复制

谈到 instanceof 我们要多插入一个问题,就是 function 的 arguments,我们大家也许都认为 arguments 是一个 Array,但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象,尽管看起来很像。

另外:

测试 var a=new Array();if (a instanceof Object) alert(‘Y’);else alert(‘N’);

得’Y’

但 if (window instanceof Object) alert(‘Y’);else alert(‘N’);

得’N’

所以,这里的 instanceof 测试的 object 是指 js 语法中的 object,不是指 dom 模型对象。

使用 typeof 会有些区别

alert(typeof(window)) 会得 object

需要注意的是,如果表达式 obj instanceof Foo 返回true,则并不意味着该表达式会永远返回ture,因为Foo.prototype属性的值有可能会改变,改变之后的值很有可能不存在于obj的原型链上,这时原表达式的值就会成为false。另外一种情况下,原表达式的值也会改变,就是改变对象obj的原型链的情况,虽然在目前的ES规范中,我们只能读取对象的原型而不能改变它,但借助于非标准的__proto__魔法属性,是可以实现的。比如执行obj.__proto__ = {}之后,obj instanceof Foo就会返回false了。

例子: 表明String对象和Date对象都属于Object类型
下面的代码使用了instanceof来证明:String和Date对象同时也属于Object类型。

例子: 表明String对象和Date对象都属于Object类型下面的代码使用了instanceof来证明:String和Date对象同时也属于Object类型。var simpleStr = "This is a simple string"; var myString  = new String();var newStr    = new String("String created with constructor");var myDate    = new Date();var myObj     = {};simpleStr instanceof String; // returns false, 检查原型链会找到 undefinedmyString  instanceof String; // returns truenewStr    instanceof String; // returns truemyString  instanceof Object; // returns truemyObj instanceof Object;    // returns true, despite an undefined prototype({})  instanceof Object;    // returns true, 同上myString instanceof Date;   // returns falsemyDate instanceof Date;     // returns truemyDate instanceof Object;   // returns truemyDate instanceof String;   // returns false

登录后复制

以上就是JavaScript中typeof与instanceof之间的区别介绍(代码示例)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2732879.html

(0)
上一篇 2025年3月8日 00:49:54
下一篇 2025年3月1日 05:04:10

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript module导出和导入的介绍(详解)

    本篇文章给大家带来的内容是关于javascript module导出和导入的介绍(详解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近看了些Vue框架写的程序,发现自己的前端知识还停留在几年以前,发现现在Javasc…

    编程技术 2025年3月8日
    200
  • JavaScript中比较两个对象是否相等的方法

    本篇文章给大家带来的内容是关于JavaScript中比较两个对象是否相等的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 这是我在一次面试中,被面试官所提问的一道题 在这次面试题中 相等:指的是对象的属性个数值相等 有…

    编程技术 2025年3月8日
    200
  • javascript能做什么

    javascript能做的有:1、使网页更具交互性,给站点的用户提供更好体验;2、可以创建活跃的用户界面;3、确保用户以表单形式输入有效的信息;4、可以创建定制的HTML页面;5、可以处理表单,设置cookie。 一:什么是js JavaS…

    2025年3月8日
    200
  • Javascript中编码规范的介绍(代码示例)

    本篇文章给大家带来的内容是关于javascript中编码规范的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 命名规范 标准变量采用驼峰式命名 ‘ID’在变量名中全大写 常量全大写,用下划线连接构造函数,大…

    编程技术 2025年3月8日
    200
  • import提升导致Fundebug报错的解决方法(详细)

    本篇文章给大家带来的内容是关于import提升导致fundebug报错的解决方法(详细),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 摘要: 解释一下“请配置apikey”报错的原因。 部分Fundebug用户使用imp…

    编程技术 2025年3月8日
    200
  • Vue2.6中的nextTick方法分析

    本篇文章给大家带来的内容是关于vue2.6中的nexttick方法分析),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 浅析 Vue 2.6 中的 nextTick 方法。 事件循环 JS 的 事件循环 和 任务队列 其实…

    编程技术 2025年3月8日
    200
  • JavaScript基础数据的梳理

    本篇文章给大家带来的内容是关于javascript基础数据的梳理,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 看了一些资料,结合ES6、高程和MDN,对JS核心知识点进行了梳理。由于篇幅有限,这里只对我认为重要的知识做了…

    编程技术 2025年3月8日
    200
  • JavaScript中作用域链与执行环境的介绍(图文)

    本篇文章给大家带来的内容是关于JavaScript中作用域链与执行环境的介绍(图文),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 每一个函数存在一个[[Scope]]内部属性,包含了一个函数被创建得作用域中对象得集合,这…

    2025年3月8日
    200
  • nodejs实现webservice的问题分析

    本篇文章给大家带来的内容是关于nodejs实现webservice的问题分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 库,工具 node-soapsoapui 创建 注意args里参数顺序 const soap = …

    2025年3月8日 编程技术
    200
  • react路由的简单用法(代码示例)

    本篇文章给大家带来的内容是关于react路由的简单用法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 我要的是简单粗暴的路由 习惯了 vue-router 路由的用法,再用react-router总感觉挺麻烦的…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论