在下面的代码示例中,最后使用instanceof检查obj2和obj3,即使构造的方式不同并且返回name属性的结果不同,也会返回true.
var Obj1 = function() {
    this.name = "foo1";
};
Obj1.prototype.name = "foo1onProt";
var obj1 = new Obj1();

var Obj2 = function() {};
Obj2.prototype = new Obj1();
Obj2.prototype.constructor = Obj2;
var obj2 = new Obj2();

var Obj3 = function() {};
Obj3.prototype = Object.create(Obj1.prototype);
Obj3.prototype.constructor = Obj3;
var obj3 = new Obj3();

console.dir(obj1);
console.log("obj1.name: " + obj1.name);

console.dir(obj2);
console.log("obj2.name: " + obj2.name);

console.dir(obj3);
console.log("obj3.name: " + obj3.name);

console.log("obj2 instanceof Obj1: " + (obj2 instanceof Obj1));
console.log("obj3 instanceof Obj1: " + (obj3 instanceof Obj1));

在Chrome中运行的结果:

Obj1
  name: "foo1"
  __proto__: Object
    constructor: function () {
    name: "foo1onProt"
    __proto__: Object
obj1.name: foo1
Obj2
  __proto__: Obj1
    constructor: function () {}
    name: "foo1"
    __proto__: Object
      constructor: function () {
      name: "foo1onProt"
      __proto__: Object
obj2.name: foo1
Obj3
   __proto__: Object
   constructor: function () {}
   __proto__: Object
     constructor: function () {
     name: "foo1onProt"
     __proto__: Object
obj3.name: foo1onProt

obj2 instanceof Obj1: true
obj3 instanceof Obj1: true

认识到obj2和obj3不同的最佳方法是什么?
实际上如何工作?

解决方法

What is the best way to recognize that obj2 and obj3 are different?

这在很大程度上取决于你在做什么.一种方法是使用instanceof Obj2和instanceof Obj3.由于两个对象都是在原型链中使用Obj1.prototype创建的,因此它们确定为我们在基于类的OOP中称为超类型的实例.

How does actually instanceof work?

简短的版本

obj instanceof F查看F.prototype引用的对象是否在obj的原型链中的任何位置.它根本不使用构造函数.

更多细节

§11.8.5 – The instanceof Operator中的规范涵盖了这一点,它说(间接地,通过§8.6.2)它调用函数对象的[[HasInstance]]内部方法,传入我们正在测试的对象.函数[[HasInstance]](在§15.3.5.3中)表示它从函数的prototype属性获取对象引用,如果该对象在目标对象的原型链中的任何位置,则返回true,否则返回false.

它不使用构造函数(事实上,JavaScript本身没有) – 如果你考虑它,它就不能,因为一个对象的构造函数属性只能指向一个函数,但一个对象可以是多个函数的实例 – 例如,在伪经典继承的情况下:

function F1() {}

function F2() {
  F1.call(this);
}
F2.prototype = Object.create(F1.prototype);
F2.prototype.constructor = F2;

var obj = new F2();
snippet.log(obj instanceof F1); // true
snippet.log(obj instanceof F2); // true
<!-- Script provides the `snippet` object,see http://Meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

两者都是正确的,因为F1.prototype和F2.prototype引用的两个对象都在obj的原型链中.

instanceof为true并不一定意味着obj是通过直接或间接调用F创建的;它只是表明它们之间存在模糊的联系(F.prototype指的是同样在obj的原型链中的对象).它通常意味着F参与创建对象,但不能保证.

例如:

function F() {}
var obj = Object.create(F.prototype);
snippet.log(obj instanceof F); // true
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

请注意,根本没有调用F来创建对象.

或者可能更清楚和/或更显着:

function F() {}
var p = {};
var obj = Object.create(p);
snippet.log(obj instanceof F); // false
F.prototype = p;
snippet.log(obj instanceof F); // true
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

还有这个不寻常但完全可能的版本:

function F1() {}
function F2() {}
F1.prototype = F2.prototype = {};
var obj = new F1();
snippet.log(obj instanceof F2); // true
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

或者这一个:

function F1() {}
function F2() {}
var obj = new F2();
snippet.log(obj instanceof F1); // false
F1.prototype = F2.prototype;
snippet.log(obj instanceof F1); // true
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

instanceof如何在JavaScript中运行?的更多相关文章

  1. 如何在Swift3中获取Json包的内容unwrap Json package

    我想在这个帖子里面总结两个问题:一个是通过ReST获取Json的语句,这个比较简单另一个是如何将Json包一层一层转存为字典,并最终通过keyword:String获得所需内容的方法废话不说,来看代码首先是服务器返回的Json形式,这里以youtubeAPI为例,因为google做的Json包很规范(都是String:String或者String:Int)youtubeAPI的请求URL形式(我这

  2. android – 使用osmdroid自定义信息泡沫覆盖项目

    我在我的新Android项目上使用osmdroid(因为我希望能够使用离线地图)但是我在定制分配给覆盖项目的信息气泡的外观方面遇到很多困难.现在,我正在使用itemizedoverlayWithFocus叠加来显示我的项目;看看itscode,我注意到整个事情都是在onDrawFinished方法中绘制的,所以我尝试创建自己的自定义叠加来覆盖这个方法,但这很难得到结果.我希望得到的是这样的事情:你

  3. 实例讲解JavaScript中instanceof运算符的用法

    JavaScript中的instanceof运算符可以用来判断对象类型,而更重要的是instanceof能够判断对象的继承关系,这里我们就来以实例讲解JavaScript中instanceof运算符的用法

  4. javascript中instanceof运算符的用法详解

    本文详细讲解了javascript中instanceof运算符的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. JavaScript的instanceof运算符学习教程

    instanceof运算符可以用来判断某个构造函数的prototype属性所指向的对象是否存在于另外一个要检测对象的原型链上,这里我们就来看一下JavaScript的instanceof运算符学习教程

  6. JavaScript中instanceof运算符的使用示例

    这篇文章主要介绍了JavaScript中instanceof运算符的使用示例,instanceof的使用是JavaScript入门学习中的基础知识,需要的朋友可以参考下

  7. 关于javascript中的typeof和instanceof介绍

    typeof用来检测给定变量的数据类型instanceof用来检测对象的类型

  8. JavaScript instanceof 的使用方法示例介绍

    判断一个变量的类型尝尝会用 typeof 运算符而他毕竟有些缺陷,就是无论引用的是什么类型的对象,它都返回object,这时就要用到instanceof来检测某个对象是不是另一个对象的实例

  9. Java深入讲解instanceof关键字的使用

    instanceof 是 Java 的一个二元操作符,类似于 ==,>,< 等操作符。instanceof 是 Java 的保留关键字。它的作用是测试它左边的对象是否是它右边的类的实例,返回 boolean 的数据类型

  10. 菜鸟也能搞懂js中typeof与instanceof区别

    instanceof和typeof是两个运算符,在程序设计中用到,常用来判断一个变量是否为空,或者是什么类型的,本文就来介绍一下typeof与instanceof区别,感兴趣的可以了解一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部