JavaScript中typeof，instanceof，has

姓名：雷潇 16030110083    

转载自：http://blog.51cto.com/mazey/2048538

【嵌牛导读】JavaScript中typeof，instanceof，hasOwnProperty，in用法区别

【嵌牛鼻子】typeof，instanceof，hasOwnProperty，in

【嵌牛提问】typeof，instanceof，hasOwnProperty，in的用法区别都掌握了吗

【嵌牛正文】一. typeof操作符

typeof操作符用于返回正在使用值的类型。

// 使用原始值letmNull =null;letmUndefined =undefined;letmString ='mazey';letmNumber =123;letmBoolean =true;letmFunction =function(){returntrue;};// 用构造函数的方式new一个实例letoString =newString('cherrie');letoRegExp =newRegExp('^[0-9]+$');letoFunction =newFunction('x','y','return x + y');letoObj = {};letoNew =newObject();// typeof值console.log(typeofmNull);// objectconsole.log(typeofmUndefined);// undefinedconsole.log(typeofmString);// stringconsole.log(typeofmNumber);// numberconsole.log(typeofmBoolean);// booleanconsole.log(typeofmFunction);// functionconsole.log(typeofoString);// objectconsole.log(typeofoRegExp);// objectconsole.log(typeofoFunction);// functionconsole.log(typeofoObj);// objectconsole.log(typeofoNew);// object

在《JavaScript启示录》中new RegExp()介绍会返回function，但是事实上我在chrome控制台中看到的是object。

于是我console.log(new RegExp('^[0-9]+$'))，打印出来的是字符串/^[0-9]+$/。

console.log(newRegExp('^[0-9]+$'));// /^[0-9]+$/console.log(RegExp);// ƒ RegExp() { [native code] } 原始值console.log(String);// ƒ String() { [native code] } 原始值console.log(/^[0-9]+$/);// /^[0-9]+$/console.log(newRegExp('^[0-9]+$') ===/^[0-9]+$/);// falseconsole.log(RegExp('^[0-9]+$') ===/^[0-9]+$/);// false

综上可以看出现版本RegExp和String Number一样属于JavaScript的原始值。

Math作为JavaScript中的静态对象回返回什么呢？

console.log(typeofMath);// objectconsole.log(typeofMath.PI);// numberconsole.log(typeofMath.ceil);// function

所以Math的__proto__还是Object，typeof还能返回对象的属性和方法的类型。

typeof使用场景

1.判断某个变量是否已定义

console.log(typeofaaa);// 'undefined'// 判断if(typeofbbb ==='undefined') {console.log('变量未定义');}

2.区分原始值和复杂值（对象值）

因为复杂值往往返回object，当然有个例外就是原始值里面的null也返回object，然后function作为Object的实例也是复杂值。

// 判断是否时复杂值（对象值）functionisObject(m){return(typeofm ==='function'|| (typeofm ==='object'&& m !==null));}console.log(isObject(newRegExp('123')));// trueconsole.log(isObject('123'));// falseconsole.log(isObject(String('123')));// falseconsole.log(isObject(null));// false// 判断是否是原始值functionisNative(m){return(m ===null|| (typeofm !=='object'&&typeofm !=='function'));}console.log(isNative(newRegExp('123')));// falseconsole.log(isNative('123'));// trueconsole.log(isNative(String('123')));// trueconsole.log(isNative(null));// true

3.检测某个变量是否是函数

当使用闭包时判断是函数后再进行下一步。

functionqqq(){leta =0;letb =function(){        a++;console.log(a);    };returnb;}letccc = qqq();console.log(typeofccc);// functionif(typeofccc ==='function') {    ccc();// 1ccc();// 2ccc();// 3ccc();// 4}

二. instanceof操作符

通过使用instanceof操作符，可以确定一个对象是否是特定构造函数的实例，返回true或false。

instanceof只适用于构造函数创建返回的复杂对象和实例。

任何时间判断一个对象（复杂值）是否是Object的实例时，它都将返回true，因为所有对象都继承自Object()构造函数。

letoFather =function(){this.firstName ='mazey';};oFather.prototype.lastName ='qian';// 实例letoSon =newoFather();console.log(oSoninstanceofoFather);// true// 继承letnFather =function(){};nFather.prototype =newoFather();nFather.construction = nFather;console.log(nFather.firstName);// undefinedconsole.log(nFather.prototype.lastName);// qianconsole.log(nFatherinstanceofoFather);// falseconsole.log(newnFather()instanceofnFather);// true// 相对于Object来说console.log('123'instanceofObject);// falseconsole.log(newString('123')instanceofObject);// true 构造出来的实例console.log(nullinstanceofObject);// false

instanceof使用场景

判断在一个继承关系中实例是否属于它的父类。

// 继承letoFather =function(){};letnFather =function(){};nFather.prototype =newoFather();nFather.construction = nFather;letnSon =newnFather();console.log(nSoninstanceofnFather);// trueconsole.log(nSoninstanceofoFather);// true

三. in操作符和hasOwnProperty方法

in操作符可以检查一个对象的属性，包括来自原型链的属性，hasOwnProperty()方法可以检查来自非原型链属性的对象。

例如现在有一个对象let obj = {name: 'mazey'};，name是它自身定义的属性，toString是它从原型链上继承下来的属性。

letobj = {name:'mazey'};console.log('name'inobj);// trueconsole.log('toString'inobj);// trueconsole.log('name'inObject);// trueconsole.log(obj.hasOwnProperty('name'));// trueconsole.log(obj.hasOwnProperty('toString'));// falseconsole.log(Object.hasOwnProperty('name'));// true

所以in操作符查找的范围更广一点，可以用hasOwnProperty()判断是否是对象自身的属性，而不是通过类似obj.prototype.foo = 'foo';这样定义的。

hasOwnProperty方法使用场景

在实际项目中经常使用for...in...来遍历对象中可枚举的属性，但是for...in...常常把原型obj.prototype.xxx中的属性也列举出来，所以在循环的时候可以加上hasOwnProperty()方法判断下。

functionobj0(){this.name ='mazey',this.age ='24'};obj0.prototype.gender ='male';letobj1 =newobj0();// 打印所有可枚举属性for(letkeyinobj1) {console.log(key);// name age gender 从原型链上继承下来的属性也会被打印出来}// 过滤掉原型链上的属性for(letkeyinobj1) {if(obj1.hasOwnProperty(key)) {console.log(key);// name age}}

四. 总结

1.typeof可以判断使用值的类型，注意null返回object。

2.instanceof验证构造函数构造出来的实例，可以用来判断一个对象是否属于一个父类。

3.hasOwnProperty方法常常与in操作符搭配使用，用来遍历一个对象自身的属性。

五. 相关扩展

1.删除对象的属性

若想把一个对象的自身属性完全删除，要使用delete操作符。

letobj0 = {name:'mazey',age:24};// 删除age属性deleteobj0.age;console.log(obj0.hasOwnProperty('age'));// falseconsole.log('age'inobj0);// false// 试着删除原型链上的属性 toStringdeleteobj0.toStringconsole.log('toString'inobj0);// true

需要注意的是delete不会删除原型链上的属性。

2.可枚举

每个对象的属性都分为可枚举和不可枚举属性，可以使用propertyIsEnumerable()方法来检查哪些属性是可枚举的。

每个对象都有一个propertyIsEnumerable方法。此方法可以确定对象中指定的属性是否可以被for...in（for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行）循环枚举，但是通过原型链继承的属性除外。如果对象没有指定的属性，则此方法返回false。

有的资料说只要能被for..in遍历的属性就是可枚举的，实际上要排除从原型链上继承下来的属性，只有自身的属性是可枚举的。

// 第一个构造函数functionConFun0(){this.firstName ='mazey';}ConFun0.prototype.firstCom ='bang';// 第二个构造函数functionConFun1(){this.secondName ='qian';}// 继承第一个ConFun1.prototype =newConFun0();ConFun1.prototype.constructor = ConFun1;// 实例letobj =newConFun1();obj.girlName ='cherrie';// 是否可枚举console.log(obj.propertyIsEnumerable('constructor'));// falseconsole.log(obj.propertyIsEnumerable('firstName'));// falseconsole.log(obj.propertyIsEnumerable('firstCom'));// false// 通过原型链继承的属性不是可枚举console.log(obj.propertyIsEnumerable('secondName'));// trueconsole.log(obj.propertyIsEnumerable('girlName'));// truefor(letkeyinobj) {console.log(key);// secondName girlName （原型链上的属性也会被打印出来->） firstName constructor firstCom}console.log(`---分割线---`);for(letkeyinobj) {// 过滤掉原型链上的属性if(obj.hasOwnProperty(key)) {console.log(key);// secondName girlName}}

所以可枚举的属性一定能被for..in循环遍历出来，但是for...in循环遍历出来的属性不一定是可枚举的，需排除从原型链上继承下来的属性，这里可以通过hasOwnProperty()方法过滤掉不可枚举属性。