文章导航

JavaScript instanceof

2018-11-21 00:24| 作者: admin| 查看: 905| 评论: 0|来自: 蚂蚁部落

我们说不要以貌取人,在人际交往中这一点非常重要。

但是在编程中,建议"以貌取人",从长相可以大致猜测功能。

instanceof由单词instance与of构成,instance是实例的意思,of表示从属关系。

它可以判断对象是否是指定构造函数(类)的实例,如果是则返回true,否则返回false。

事实上,只要构造函数的prototype原型对象在对象的原型链上,就会返回true。

也就是说此运算符可以判断是否指定类或者父类的实例。

语法结构:

[JavaScript] 纯文本查看 复制代码
object instanceof class

参数解析:

(1).object:对象实例,判断它是否是某个类或者父类的实例。

(2).class:一个类,或者说构造函数。

只要class的原型对象处于object对象原型链上的任何位置,运算符返回true。

关于原型链相关知识可以参阅JavaScript 原型链一章节。

代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName,age){
  this.name=webName;
  this.age=age;
}
let ant=new Antzone('蚂蚁部落',5);
console.log(ant.__proto__ === Antzone.prototype);
console.log(ant instanceof Antzone);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/002548fmqmqxk541ioosnq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

ant.__proto__ === Antzone.prototype返回true,可见Antzone原型对象位于对象ant原型链之上。

所以运算符返回true,这个很容易理解,更多内容参阅如下两篇文章:

(1).prototype属性可以参阅JavaScript prototype 原型一章节。

(2).__proto__属性可以参阅__proto__属性一章节。

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName,age){
  this.name=webName;
  this.age=age;
}
let ant=new Antzone('蚂蚁部落',5);
console.log(ant.__proto__ === Antzone.prototype);
console.log(Antzone.prototype.__proto__ === Object.prototype);
console.log(ant instanceof Object);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/002647kudnxxsxdwjmtxn3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

对象实例ant并非由Object构造函数直接创建。

但是运算符依然返回true,因为Object.prototype在ant的原型链之上。

这说明构造函数Antzone与Object之间存在继承关系。

不过需要注意如下两点:

(1).如果构造函数的prototype对象被人为改变,那么返回值有可能是false。

(2).同样道理,如果对象实例的__proto__被改变,那么返回值同样有可能是false。

还有一点需要特别注意,代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let one="antzone";
let two=new String("antzone");
console.log(one instanceof String);
console.log(two instanceof String)

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/002716fcilzwcrjcrfa2sf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通常来讲,通过构造函数创建的对象应用instanceof运算符才会返回true。

但是数组直接量和对象直接量是例外,代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let one=[];
let two={};
console.log(one instanceof Array);
console.log(two instanceof Object)

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/002749xr2pvrsj2pgrjhgg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.instanceof深入分享:

上面是运算符最为基本的使用规则,一切都是按照理论按部就班,非常容易理解。

但是也有很多让人匪夷所思的现象,代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
function Antzone(webName,age){ 
  this.name=webName; 
  this.age=age; 
}
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(Antzone instanceof Function);//true

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/002824gssbyfs467r4qz99.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

instanceof与继承密切相关,下面分享一个著名的关于对象间继承关系的图片。

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/002839b30aa78kvu77l0kr.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面仅以Object instanceof Object返回true为例子做一下分析。

代码如下:

[JavaScript] 纯文本查看 复制代码运行代码
ObjectL = Object;
ObjectR = Object; 

console.log(ObjectL.__proto__ === Function.prototype) //true
console.log(Function.prototype.__proto__ === ObjectR.prototype) // true

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/002905ykoooijs0dh4ijad.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

结合继承关系图,可以一步一步的推导出ObjectR.prototype在ObjectL的原型链上。

那么Object instanceof Object返回true就是理所当然的事情了。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部