<meta name="keywords" content="华夏棋牌,变量类型" />
华夏棋牌 > web前端 > js教程 > 注释

javascript中对变量类型的断定措施_javascript手艺

原创 2016-05-16 15:46:07 0 158
赞助会员专享特权
在JavaScript中,有5种基本数据类型和1种严重年夜数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String;严重年夜数据类型是Object,Object中还细分了许多详细的类型,好比:Array, Function, Date等等。明天我们就来探讨一下,应用甚么措施断定一个出一个变量的类型。

在解说种种措施之前,我们首先界说出几个测试变量,看看前面的措施现实能把变量的类型剖析成甚么面目,以下几个变量差不多网罗了我们在现实编码中经常应用的类型。

var num = 123;
var str = 'abcdef';
var bool = true;
var arr = [1, 2, 3, 4];
var json = {name:'wenzi', age:25};
var func = function(){ console.log('this is function'); }
var und = undefined;
var nul = null;
var date = new Date();
var reg = /^[a-zA-Z]{5,20}$/;
var error= new Error();

1. 应用typeof检测

华夏棋牌我们寻常浅易用的最多的就是用typeof检测变量类型了。此次,我们也应用typeof检测变量的类型:

console.log(
	typeof num, 
	typeof str, 
	typeof bool, 
	typeof arr, 
	typeof json, 
	typeof func, 
	typeof und, 
	typeof nul, 
	typeof date, 
	typeof reg, 
	typeof error
);
// number string boolean object	object function undefined object object object object

从输入的效果来看,arr, json, nul, date, reg, error 一切被检测为object类型,其他的变量能够被准确检测出来。当须要变量能否是number, string, boolean, function, undefined, json类型时,可以应用typeof阻拦断定。其他变量是断定不出类型的,网罗null。
尚有,typeof是分辨不出array和json类型的。由于应用typeof这个变量时,array和json类型输入的都是object。

2. 应用instance检测

在 JavaScript 中,断定一个变量的类型尝尝会用 typeof 运算符,在应用 typeof 运算符时接纳援用类型存储值会泛起一个效果,岂论援用的是甚么类型的工具,它都前往 “object”。ECMAScript 引入了此外一个 Java 运算符 instanceof 来处置赏罚赏罚这个效果。instanceof 运算符与 typeof 运算符类似,用于识别正在处置赏罚赏罚的工具的类型。与 typeof 措施不合的是,instanceof 措施请求开发者明确地确认工具为某特定类型。例如:

function Person(){

}
var Tom = new Person();
console.log(Tom instanceof Person); // true


我们再看看下面的例子:

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // true
console.log(John instancdof Person); // true


instanceof还能检测出多层一连的关系。
华夏棋牌 好了,我们来应用instanceof检测下面的那些变量:

console.log(
	num instanceof Number,
	str instanceof String,
	bool instanceof Boolean,
	arr instanceof Array,
	json instanceof Object,
	func instanceof Function,
	und instanceof Object,
	nul instanceof Object,
	date instanceof Date,
	reg instanceof RegExp,
	error instanceof Error
)
// num : false 
// str : false 
// bool : false 
// arr : true 
// json : true 
// func : true 
// und : false 
// nul : false 
// date : true 
// reg : true 
// error : true

从下面的运转效果我们可以看到,num, str和bool没有检测出他的类型,但是我们应用下面的要领培植num,是可以检测出类型的:

var num = new Number(123);
var str = new String('abcdef');
var boolean = new Boolean(true);

同时,我们也要看到,und和nul是检测的Object类型,才输入的true,由于js中没有Undefined和Null的这类全局类型,他们und和nul都属于Object类型,是以输入了true。

3. 应用constructor检测

在应用instanceof检测变量类型时,我们是检测不到number, ‘string', bool的类型的。是以,我们须要换一种要领来处置赏罚赏罚这个效果。
constructor原来是原型工具上的属性,指向结构函数。然则凭证实例工具寻觅属性的序次,若实例工具上没有实例属性或措施时,就去原型链上寻觅,是以,实例工具也是能应用constructor属性的。
我们先来输入一下num.constructor的内容,即数字类型的变量的结构函数是甚么面目的:

function Number() { [native code] }

华夏棋牌我们可以看到它指向了Number的结构函数,是以,我们可以应用num.constructor==Number来断定num是不是Number类型的,其他的变量也类似:

function Person(){

}
var Tom = new Person();

// undefined和null没有constructor属性
console.log(
	Tom.constructor==Person,
	num.constructor==Number,
	str.constructor==String,
	bool.constructor==Boolean,
	arr.constructor==Array,
	json.constructor==Object,
	func.constructor==Function,
	date.constructor==Date,
	reg.constructor==RegExp,
	error.constructor==Error
);
// 一切效果均为true

从输入的效果我们可以看出,除undefined和null,其他类型的变量均能应用constructor断定出类型。
不外应用constructor也不是保险的,由于constructor属性是可以被修改的,会招致检测出的效果不准确,例如:

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John.constructor==Student); // false
console.log(John.constructor==Person); // true

不才面的例子中,Student原型中的constructor被修改成指向到Person,招致检测不出实例工具John真实的结构函数。
同时,应用instaceof和construcor,被断定的array必须是在以后页面声明的!好比,一个页面(父页面)有一个框架,框架中援用了一个页面(子页面),在子页面中声清晰了了一个array,并将其赋值给父页面的一个变量,这时间一连定该变量,Array == object.constructor;会前往false; 启事:
1、array属于援用型数据,在转达历程当中,仅仅是援用地址的转达。
2、每个页面的Array原生工具所援用的地址是纷歧样的,在子页面声明的array,所对应的结构函数,是子页面的Array工具;父页面来阻拦断定,应用的Array着实不即是子页面的Array;切记,否则很难跟踪效果!
4. 应用Object.prototype.toString.call

我们先岂论这个是甚么,先来看看他是怎样检测变量类型的:

console.log(
	Object.prototype.toString.call(num),
	Object.prototype.toString.call(str),
	Object.prototype.toString.call(bool),
	Object.prototype.toString.call(arr),
	Object.prototype.toString.call(json),
	Object.prototype.toString.call(func),
	Object.prototype.toString.call(und),
	Object.prototype.toString.call(nul),
	Object.prototype.toString.call(date),
	Object.prototype.toString.call(reg),
	Object.prototype.toString.call(error)
);
// '[object Number]' '[object String]' '[object Boolean]' '[object Array]' '[object Object]'
// '[object Function]' '[object Undefined]' '[object Null]' '[object Date]' '[object RegExp]' '[object Error]'

从输入的效果来看,Object.prototype.toString.call(变量)输入的是一个字符串,字符串里有一个数组,第一个参数是Object,第二个参数就是这个变量的类型,而且,一切变量的类型都检测出来了,我们只须要取出第二个参数便可。或允许以应用Object.prototype.toString.call(arr)=="object Array"来检测变量arr能否是数组。
我们现在再来看看ECMA里是是怎样界说Object.prototype.toString.call的:

复制代码 代码以下:

Object.prototype.toString( ) When the toString method is called, the following steps are taken:
1. Get the [[Class]] property of this object.
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
3. Return Result (2)

下面的尺度界说了Object.prototype.toString的行动:首先,取得工具的一个外下属性[[Class]],然后凭证这个属性,前往一个类似于”[object Array]”的字符串作为效果(看过ECMA尺度的应当都知道,[[]]用来体现语言外部用到的、外部弗成直接会见的属性,称为“外下属性”)。应用这个措施,再合营call,我们可以取得任何工具的外下属性[[Class]],然后把类型检测转化为字符串较量,以到达我们的目的。
5. jquery中$.type的完成

在jquery中供应了一个$.type的接口,来让我们检测变量的类型:

console.log(
	$.type(num),
	$.type(str),
	$.type(bool),
	$.type(arr),
	$.type(json),
	$.type(func),
	$.type(und),
	$.type(nul),
	$.type(date),
	$.type(reg),
	$.type(error)
);
// number string boolean array object function undefined null date regexp error

看到输入效果,有没有一种熟悉的感应?对,他就是下面应用Object.prototype.toString.call(变量)输入的效果的第二个参数呀。
华夏棋牌 我们这里先来较量一下下面一切措施检测出的效果,横排是应用的检测措施, 竖排是各个变量:

类型断定 typeof instanceof constructor toString.call $.type
num number false true [object Number] number
str string false true [object String] string
bool boolean false true [object Boolean] boolean
arr object true true [object Array] array
json object true true [object Object] object
func function true true [object Function] function
und undefined false - [object Undefined] undefined
nul object false - [object Null] null
date object true true [object Date] date
reg object true true [object RegExp] regexp
error object true true [object Error] error
优点 应用质朴,能直接输入效果 能检测出严重年夜的类型 根天性检测出一切的类型 检测出一切的类型 -
弱点 检测出的类型太少 基本类型检测不出,且不克不及跨iframe 不克不及跨iframe,且constructor易被修改 IE6下undefined,null均为Object -

这样较量一下,就更能看到各个措施之间的差异了,而且Object.prototype.toString.call和$type输入的效果真的很像。我们来看看jquery(2.1.2版本)外部是怎样完成$.type措施的:

// 实例工具是能直接应用原型链上的措施的
var class2type = {};
var toString = class2type.toString;

// 省略部门代码...

type: function( obj ) {
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	return (typeof obj === "object" || typeof obj === "function") ?
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
},

// 省略部门代码... 

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

我们先来看看jQuery.each的这部门:

// Populate the class2type map
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
	class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

//循环以后,`class2type`的值是: 
class2type = {
	'[object Boolean]' : 'boolean', 
	'[object Number]' : 'number',
	'[object String]' : 'string',
	'[object Function]': 'function',
	'[object Array]'  : 'array',
	'[object Date]'  : 'date',
	'[object RegExp]' : 'regExp',
	'[object Object]' : 'object',
	'[object Error]'  : 'error'
}

再来看看type措施:

// type的完成
type: function( obj ) {
	// 若传入的是null或undefined,则直接前往这个工具的字符串
	// 即若传入的工具obj是undefined,则前往"undefined"
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android<4.0, iOS<6 (functionish RegExp)
	// 低版本regExp前往function类型;高版本已修改,前往object类型
	// 若应用typeof检测出的obj类型是object或function,则前往class2type的值,否则前往typeof检测的类型
	return (typeof obj === "object" || typeof obj === "function") ?
		(class2type[ toString.call(obj) ] || "object") :
		typeof obj;
}

当typeof obj === "object" || typeof obj === "function"时,就前往class2type[ toString.call(obj)。到这儿,我们就应当明确为甚么Object.prototype.toString.call和$.type那么像了吧,着实jquery中就是用Object.prototype.toString.call完成的,把'[object Boolean]'类型转成'boolean'类型并前往。若class2type存储的没有这个变量的类型,那就前往”object”。
除”object”和”function”类型,其他的类型则应用typeof阻拦检测。即number, string, boolean类型的变量,应用typeof便可。

php中文网最新课程二维码
  • 相关标签:变量类型
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • javascript中对变量类型的断定措施_javascript手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    华夏棋牌ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173870)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170040)

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137359)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130694)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130036)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节