一. typeof操作符

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

// 使用原始值
let mNull = null;
let mUndefined = undefined;
let mString = 'mazey';
let mNumber = 123;
let mBoolean = true;
let mFunction = function () {
return true;
}; // 用构造函数的方式new一个实例
let oString = new String('cherrie');
let oRegExp = new RegExp('^[0-9]+$');
let oFunction = new Function('x', 'y', 'return x + y'); let oObj = {};
let oNew = new Object(); // typeof值
console.log(typeof mNull); // object
console.log(typeof mUndefined); // undefined
console.log(typeof mString); // string
console.log(typeof mNumber); // number
console.log(typeof mBoolean); // boolean
console.log(typeof mFunction); // function
console.log(typeof oString); // object
console.log(typeof oRegExp); // object
console.log(typeof oFunction); // function
console.log(typeof oObj); // object
console.log(typeof oNew); // object

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

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

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

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

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

console.log(typeof Math); // object
console.log(typeof Math.PI); // number
console.log(typeof Math.ceil); // function

所以Math__proto__还是Objecttypeof还能返回对象的属性和方法的类型。

typeof使用场景

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

console.log(typeof aaa); // 'undefined'

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

2.区分原始值和复杂值(对象值)

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

// 判断是否时复杂值(对象值)
function isObject (m) {
return (typeof m === 'function' || (typeof m === 'object' && m !== null));
} console.log(isObject(new RegExp('123'))); // true
console.log(isObject('123')); // false
console.log(isObject(String('123'))); // false
console.log(isObject(null)); // false // 判断是否是原始值
function isNative (m) {
return (m === null || (typeof m !== 'object' && typeof m !== 'function'));
} console.log(isNative(new RegExp('123'))); // false
console.log(isNative('123')); // true
console.log(isNative(String('123'))); // true
console.log(isNative(null)); // true

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

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

function qqq () {
let a = 0;
let b = function () {
a++;
console.log(a);
};
return b;
} let ccc = qqq();
console.log(typeof ccc); // function
if (typeof ccc === 'function') {
ccc(); // 1
ccc(); // 2
ccc(); // 3
ccc(); // 4
}

二. instanceof操作符

通过使用instanceof操作符,可以确定一个对象是否是特定构造函数实例,返回truefalse

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

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

let oFather = function () {
this.firstName = 'mazey';
};
oFather.prototype.lastName = 'qian'; // 实例
let oSon = new oFather();
console.log(oSon instanceof oFather); // true // 继承
let nFather = function () {};
nFather.prototype = new oFather();
nFather.construction = nFather;
console.log(nFather.firstName); // undefined
console.log(nFather.prototype.lastName); // qian
console.log(nFather instanceof oFather); // false
console.log(new nFather() instanceof nFather); // true // 相对于Object来说
console.log('123' instanceof Object); // false
console.log(new String('123') instanceof Object); // true 构造出来的实例
console.log(null instanceof Object); // false

instanceof使用场景

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

// 继承
let oFather = function () {};
let nFather = function () {};
nFather.prototype = new oFather();
nFather.construction = nFather; let nSon = new nFather();
console.log(nSon instanceof nFather); // true
console.log(nSon instanceof oFather); // true

三. in操作符和hasOwnProperty方法

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

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

let obj = {name: 'mazey'};
console.log('name' in obj); // true
console.log('toString' in obj); // true
console.log('name' in Object); // true
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('toString')); // false
console.log(Object.hasOwnProperty('name')); // true

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

hasOwnProperty方法使用场景

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

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

四. 总结

1.typeof可以判断使用值的类型,注意null返回object。 2.instanceof验证构造函数构造出来的实例,可以用来判断一个对象是否属于一个父类。 3.hasOwnProperty方法常常与in操作符搭配使用,用来遍历一个对象自身的属性。

五. 相关扩展

1.删除对象的属性

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

let obj0 = {
name: 'mazey',
age: 24
}; // 删除age属性
delete obj0.age;
console.log(obj0.hasOwnProperty('age')); // false
console.log('age' in obj0); // false // 试着删除原型链上的属性 toString
delete obj0.toString
console.log('toString' in obj0); // true

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

2.可枚举

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

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

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

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

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

JavaScript中typeof,instanceof,hasOwnProperty,in的用法和区别

JavaScript中typeof,instanceof,hasOwnProperty,in的用法和区别的更多相关文章

  1. Javascript中typeof instanceof constructor的区别

    typeof typeof,是一个运算符,运算中需要一个操作数,运算的结果就是这个操作数的类型,运算的结果是一个字符串.他有一定的局限性,对于对象类型的值,只能得到一个object结果,却不能精确得到 ...

  2. 【JavaScript中typeof、toString、instanceof、constructor与in】

    JavaScript中typeof.toString.instanceof.constructor与in JavaScript 是一种弱类型或者说动态语言.这意味着你不用提前声明变量的类型,在程序运行 ...

  3. javascript中typeof和instanceof用法的总结

    今天在看相应的javascript书籍时,遇到了typeof和instanceof的问题,一直不太懂,特地查资料总结如下: JavaScript 中 typeof 和 instanceof 常用来判断 ...

  4. javascript中typeof与instanceof的区别

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

  5. javascript 中 typeof 的使用

    javascript 中 typeof 的使用 javascript有五种基本的数据类型(简单数据类型),它们分别是:String.Undefined.Null.Boolean和Number.还有一种 ...

  6. JavaScript 中定义变量时有无var声明的区别

    关于JavaScript中定义变量时有无var声明的区别 var a=5; //正确 a=5; //正确 在javascript中,以上两种方法都是定义变量的正确方法.微软的Script56.CHM中 ...

  7. JavaScript中querySelector()和getElementById()(getXXXByXX)的区别

    在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelecto ...

  8. 脚本引用中的defer和async的用法和区别

    之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...

  9. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

随机推荐

  1. js 中 new fn与new fn()的区别

    在有些代码中,看见了let fn = new Fn()和let fn = new Fn,刚开始有些人或许和我一样感到些许疑惑,但潜意识的也会想到,这两者说不定就是一样的.没错!!在没有参数的情况下这两 ...

  2. 进程,线程,GIL,Python多线程,生产者消费者模型都是什么鬼

    1. 操作系统基本知识,进程,线程 CPU是计算机的核心,承担了所有的计算任务: 操作系统是计算机的管理者,它负责任务的调度.资源的分配和管理,统领整个计算机硬件:那么操作系统是如何进行任务调度的呢? ...

  3. Android的主线程和子线程

    在一个Android 程序开始运行的时候,会单独启动一个Process.默认的情况下,所有这个程序中的Activity或者Service(Service和 Activity只是Android提供的Co ...

  4. angular指令之complie和link不得不说的故事

    angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...

  5. 深度学习系列 Part(3)

    这是<GPU学习深度学习>系列文章的第三篇,主要是接着上一讲提到的如何自己构建深度神经网络框架中的功能模块,进一步详细介绍 Tensorflow 中 Keras 工具包提供的几种深度神经网 ...

  6. ssh免密码记录

    主机器A通过ssh连多台从机器(b1,b2,b3). 1.使用root用户操作,避免权限问题. 2.在主从机器中安装ssh,命令: ssh-keygen –t rsa 然后都回车,生成的文件在/roo ...

  7. HDU1005 Number Sequence (奇技淫巧模拟)

    A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mo ...

  8. Linux学习(十六)VIM

    一.简介 VIM是vi的增强版.VIM是Linux平台上的主要编辑器.基本上所有的文档的新增,修改,保存都需要用到它.所以,掌握VIM是很有必要的. vim的安装非常简单,一条命令就可以了: yum ...

  9. 全国DNS服务器地址(部分)

    广东: 广东省广州市(中国电信) 首选DNS:61.144.56.100 备份DNS:61.144.56.101 广东省广州市越秀区(中国电信) 首选DNS:202.96.128.86 备份DNS:2 ...

  10. layui数据表格以及传数据方式

    数据表格一: <div style="margin:0px; background-color: white; margin:0 10px;"> <blockqu ...