详解JavaScript中typeof与instanceof用法


Posted in Javascript onOctober 24, 2018

今天写JS代码,遇到动态生成多个名称相同的input复选按钮

需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefined")

以前用得少,就顺便查了一下关于typeof的那些事

 typeof用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果:

number,boolean,string,function(函数),object(NULL,数组,对象),undefined。

如:

alert(typeof (123));//typeof(123)返回"number" 
alert(typeof ("123"));//typeof("123")返回"string"

我们可以使用typeof来获取一个变量是否存在,如if(typeof a!="undefined"){},而不要去使用if(a)因为如果a不存在(未声明)则会出错,

正因为typeof遇到null,数组,对象时都会返回object类型,所以当我们要判断一个对象是否是数组时

或者判断某个变量是否是某个对象的实例则要选择使用另一个关键语法instanceof

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)会返回true。

<script>
  var str = new String();
  function show(str1){
  if(str1 instanceof String){
    alert('1');
  }else{
    alert('0');
  }
  }
  show(str);
  str = "abccddd";
  if(typeof str=='string'){alert(str);}
  else{alert('0');}
 </script>

  关于typeof

typeof一元运算符,用来返回操作数类型的字符串。

typeof几乎不可能得到它们想要的结果。typeof只有一个实际应用场景,就是用来检测一个对象是否已经定义或者是否已经赋值。而这个应用却不是来检查对象的类型。

Value Class Type
"foo" String string
new String("foo") String object
1.2 Number number
new Number(1.2) Number object
true Boolean boolean
new Boolean(true) Boolean object
new Date() Date object
new Error() Error object
[1,2,3] Array object
new Array(1, 2, 3) Array object
new Function("") Function function
/abc/g RegExp object (function in Nitro/V8)
new RegExp("meow") RegExp object (function in Nitro/V8)
{} Object object
new Object() Object object

上面表格中,Type 一列表示 typeof 操作符的运算结果。可以看到,这个值在大多数情况下都返回 "object"。

Class 一列表示对象的内部属性 [[Class]] 的值。

JavaScript 标准文档中定义: [[Class]] 的值只可能是下面字符串中的一个: Arguments, Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String.

为了获取对象的 [[Class]],我们需要使用定义在 Object.prototype 上的方法 toString。

对象的类定义

JavaScript 标准文档只给出了一种获取 [[Class]] 值的方法,那就是使用 Object.prototype.toString。

function is(type, obj) {
  var clas = Object.prototype.toString.call(obj).slice(8, -1);
  return obj !== undefined && obj !== null && clas === type;
}
is('String', 'test'); // true
is('String', new String('test')); // true

上面例子中,Object.prototype.toString 方法被调用,this 被设置为了需要获取 [[Class]] 值的对象。

注:Object.prototype.toString 返回一种标准格式字符串,所以上例可以通过 slice 截取指定位置的字符串,如下所示:

Object.prototype.toString.call([])  // "[object Array]"
Object.prototype.toString.call({})  // "[object Object]"
Object.prototype.toString.call(2)  // "[object Number]"

注:这种变化可以从 IE8 和 Firefox 4 中看出区别,如下所示:

// IE8
Object.prototype.toString.call(null)  // "[object Object]"
Object.prototype.toString.call(undefined)  // "[object Object]"

// Firefox 4
Object.prototype.toString.call(null)  // "[object Null]"
Object.prototype.toString.call(undefined)  // "[object Undefined]"

测试为定义变量

typeof foo !== 'undefined'

上面代码会检测 foo 是否已经定义;如果没有定义而直接使用会导致 ReferenceError 的异常。 这是 typeof 唯一有用的地方。

结论

为了检测一个对象的类型,强烈推荐使用 Object.prototype.toString 方法; 因为这是唯一一个可依赖的方式。正如上面表格所示,typeof 的一些返回值在标准文档中并未定义, 因此不同的引擎实现可能不同。

除非为了检测一个变量是否已经定义,我们应尽量避免使用 typeof 操作符。

x typeof x
undefined "undefined"
true 或false "boolean"
任意数字或者NaN "number"
任意字符串 "string"
函数对象(在ECMA-262术语中,指的是实现了[[Call]] 的对象) "function"
任意内置对象(非函数) "object"
数组 "obeject"
null "object"
宿主对象(JS引擎内置对象,而不是DOM或者其他提供的) 由编译器各自实现的字符串,但不是"undefined","number","boolean","number","string"。
正则表达式 各浏览器表现不一

如果想将null和对象区分开,则必须针对特殊值显式检测。如:my_value===null。对于宿主对象来说,typeof有可能并不返回‘object',而返回字符串。但实际上客户端js中的大多数宿主对象都是‘object'类型。对于所有内置可执行对象进行typeof运算都将返回“function”。

// Numbers
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"
typeof Number(1) === 'number'; // 不要这样使用!
// Strings
typeof "" === 'string';
typeof "bla" === 'string';
typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串
typeof String("abc") === 'string'; // 不要这样使用!
// Booleans
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean'; // 不要这样使用!
// Undefined
typeof undefined === 'undefined';
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量
// Objects
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object'; 
// 使用Array.isArray或者Object.prototype.toString.call方法
//可以分辨出一个数组和真实的对象
typeof new Date() === 'object';
typeof new Boolean(true) === 'object' // 令人困惑.不要这样使用
typeof new Number(1) === 'object' // 令人困惑.不要这样使用
typeof new String("abc") === 'object'; // 令人困惑.不要这样使用
// Functions
typeof function(){} === 'function';
typeof Math.sin === 'function';

关于instanceof

instanceof 左操作数是一个类,右操作数是标识对象的类。如果左侧的对象是右侧类的实例,则返回true.而js中对象的类是通过初始化它们的构造函数来定义的。即instanceof的右操作数应当是一个函数。所有的对象都是object的实例。如果左操作数不是对象,则返回false,如果右操作数不是函数,则抛出typeError。

instanceof 运算符是用来测试一个对象是否在其原型链原型构造函数的属性。其语法是object instanceof constructor

instanceof 操作符用来比较两个操作数的构造函数。只有在比较自定义的对象时才有意义。 如果用来比较内置类型,将会和 typeof 操作符 一样用处不大。

比较自定义对象

function Foo() {}
function Bar() {}
Bar.prototype = new Foo();
new Bar() instanceof Bar; // true
new Bar() instanceof Foo; // true
// 如果仅仅设置 Bar.prototype 为函数 Foo 本身,而不是 Foo 构造函数的一个实例
Bar.prototype = Foo;
new Bar() instanceof Foo; // false

instanceof 比较内置类型

new String('foo') instanceof String; // true
new String('foo') instanceof Object; // true
'foo' instanceof String; // false
'foo' instanceof Object; // false

有一点需要注意,instanceof 用来比较属于不同 JavaScript 上下文的对象(比如,浏览器中不同的文档结构)时将会出错, 因为它们的构造函数不会是同一个对象。

结论:instanceof 操作符应该仅仅用来比较来自同一个 JavaScript 上下文的自定义对象。 正如 typeof 操作符一样,任何其它的用法都应该是避免的。

function C(){} // defining a constructor
function D(){} // defining another constructor
var o = new C();
o instanceof C; // true, because: Object.getPrototypeOf(o) === C.prototype
o instanceof D; // false, because D.prototype is nowhere in o's prototype chain
o instanceof Object; // true, because:
C.prototype instanceof Object // true
C.prototype = {};
var o2 = new C();
o2 instanceof C; // true
o instanceof C; // false, because C.prototype is nowhere in o's prototype chain anymore
D.prototype = new C(); // use inheritance
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true
var myString = new String();
var myDate = new Date();
myString instanceof String; // returns true
myString instanceof Object; // returns true
myString instanceof Date;  // returns false
myDate instanceof Date;   // returns true
myDate instanceof Object;  // returns true
myDate instanceof String;  // returns false
function Car(make, model, year) {
 this.make = make;
 this.model = model;
 this.year = year;
}
var mycar = new Car("Honda", "Accord", 1998);
var a = mycar instanceof Car;  // returns true
var b = mycar instanceof Object; // returns true

总结

以上所述是小编给大家介绍的JavaScript中typeof与instanceof用法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 #Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 #Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 #Javascript
vue中的router-view组件的使用教程
Oct 23 #Javascript
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 #Javascript
You might like
PHP 上传文件的方法(类)
2009/07/30 PHP
用php解析html的实现代码
2011/08/08 PHP
php实现的http请求封装示例
2016/11/08 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Pandas数据离散化原理及实例解析
2019/11/16 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
会计辞职信范文
2014/01/15 职场文书
英语简历自我评价
2014/01/26 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
作文评语大全
2014/04/23 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
大学四年个人总结
2015/03/03 职场文书
感恩主题班会教案
2015/08/12 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS