脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → instanceof

解析JavaScript中instanceof对于不同的构造器或许都返回true

 更新时间：2013年12月03日 09:37:51   作者：  
这篇文章主要是对JavaScript中instanceof对于不同的构造器或许都返回true进行了详细的解析，需要的朋友可以过来参考下，希望对大家有所帮助

我们知道 instanceof 运算符用来检查对象是否为某构造器的实例。下面列举它返回true的各种情景。

1、对象obj是通过new Constructor创建的，那么 obj instanceof Constructor 为true

复制代码 代码如下:

function Person(n, a) {
    this.name = n;
    this.age = a;
}
var p = new Person('John Backus', 82);
console.log(p instanceof Person); // true

2、如果存在继承关系，那么 子类实例 instanceof 父类 也会返回true
复制代码 代码如下:

function A(){}
function B(){}
B.prototype = new A(); // B继承于A

var b = new B();
console.log(b instanceof A); // true

3、由于Object是根类，所有其它自定义类都继承于它，因此 任意构造器的实例 instanceof Object 都返回true
复制代码 代码如下:

function A() {}
var a = new A();
console.log(a instanceof Object); // true

var str = new String('hello');
console.log(str instanceof Object); // true

var num = new Number(1);
console.log(num instanceof Object); // true

甚至包括构造器自身
复制代码 代码如下:

function A() {}
console.log(A instanceof Object); // true
console.log(String instanceof Object); // true
console.log(Number instanceof Object); // true

4、所有构造器 instanceof Function 返回true
复制代码 代码如下:

function A() {}
console.log(A instanceof Function); // true
console.log(String instanceof Function); // true
console.log(Number instanceof Function); // true

以上四点总结为一句话：如果某实例是通过某类或其子类的创建的，那么instanceof就返回true。或者说某构造函数的原型 存在与对象obj的内部原型链上，那么返回true。即instanceof的结果与构造器自身并无直接关系。这在许多语言中都是通用的。

Java中定义了一个类Person，实例p对于Person和Object都返回true

复制代码 代码如下:

class Person {
    public String name;
    public int age;
    Person (String n, int a) {
        this.name = name;
        this.age = a;
    }
    public static void main(String[] args) {
        Person p = new Person("John Backus", 82);
        System.out.println(p instanceof Person); // true
        System.out.println(p instanceof Object); // true
    }
}

Java中如果存在继承关系，那么 子类实例 instanceof 父类 也返回true
复制代码 代码如下:

// 父类
class Person {
    public String name;
    public int age;
    Person (String n, int a) {
        name = name;
        age = a;
    }
}
// 子类
public class Man extends Person{
    public String university;
    Man(String n, int a, String s) {
        super(n, a);
        university = s;
    }
    public static void main(String[] args) {
        Man mm = new Man("John Resig", 29, "PKU");
        System.out.println(mm instanceof Man); // true
        System.out.println(mm instanceof Person); // 也是true
    }
}

知道了这些，JS中以下的表现就不奇怪了
复制代码 代码如下:

// 定义两个构造器
function A(){}
function B(){}
A.prototype = B.prototype = {a: 1};

// 分别创建两个不同构造器的实例
var a = new A();
var b = new B();
console.log(a instanceof B); // true
console.log(b instanceof A); // true

我们看到a, b分别是用A和B创建的，但a instanceof B和 b instanceof A都是true。即a虽然不是用构造器B创建的，但仍然返回true。因为B.prototype存在于a的内部原型链上。

由于JS的动态语言特性，可以在运行时修改原型，因此下面返回false也不足为奇了。因为A.prototype已经不在a的内部原型链中，链条被打断了。

复制代码 代码如下:

function A(){}
var a = new A();
A.prototype = {}; // 动态修改原型，注意必须在创建a后
console.log(a instanceof A); // false

注意这么写也打破了上面总结的第一条：对象obj是通过new Constructor创建的，那么obj instanceof Constructor 为true

实际在ECMAScript标准中（以5.1为准），instanceof 内部实现会调用构造器的内部方法[[HasInstance]]，描述如下

假如F是一个函数对象，当F(V)执行时，以下步骤将发生：

1、如果instanceof左运算元V不是对象类型，直接返回false

复制代码 代码如下:

var a, b = 1, c = true, d = 'hello';
console.log(a instanceof Object); // false 这里a值为undefined
console.log(b instanceof Object); // false
console.log(c instanceof Object); // false
console.log(d instanceof Object); // false

2/3、取构造器F的prototype属性，如果不是对象类型，须抛出TypeError异常，
复制代码 代码如下:

function A(){}
A.prototype = 1; // A的prototype设为非对象类型
var a = new A();
console.log(a instanceof A);

各浏览器抛出的异常提示不同，

Firefox18：

Chrome24:

Safari6:

Opera12:

IE10：

　　

4、不断的执行以下逻辑：将V设为内部原型的V，如果V是null则返回false，如果V和O都指向同一个对象，则返回true。

您可能感兴趣的文章:

相关文章

  • JS仿百度搜索自动提示框匹配查询功能

    JS仿百度搜索自动提示框匹配查询功能

    这篇文章主要介绍了JS输入框模糊匹配查询功能，主要是仿百度搜索自动提示框的功能，大家参考使用吧
    2013-11-11
  • js简单的点击返回顶部效果实现方法

    js简单的点击返回顶部效果实现方法

    这篇文章主要介绍了js简单的点击返回顶部效果实现方法,实例分析了实现返回顶部效果的相关要点与实现技巧,需要的朋友可以参考下
    2015-04-04
  • JS实现HTML标签转义及反转义

    JS实现HTML标签转义及反转义

    本文主要介绍了JS实现HTML标签转义及反转义的方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • Bootstrap媒体对象学习使用

    Bootstrap媒体对象学习使用

    这篇文章主要为大家详细介绍了Bootstrap媒体对象的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • ie9 提示''console'' 未定义问题的解决方法

    ie9 提示''console'' 未定义问题的解决方法

    关掉开发者工具之后，在状态栏发现提示'console' 未定义,为什么之前的运行没有问题，之后的就不行呢
    2014-03-03
  • 微信小程序地图(map)组件点击(tap)获取经纬度的方法

    微信小程序地图(map)组件点击(tap)获取经纬度的方法

    这篇文章主要介绍了微信小程序地图(map)组件点击(tap)获取经纬度的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 如何在JavaScript中使用localStorage详情

    如何在JavaScript中使用localStorage详情

    这篇文章主要介绍了如何在JavaScript中使用localStorage，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • js实现iframe跨页面调用函数的方法

    js实现iframe跨页面调用函数的方法

    这篇文章主要介绍了js实现iframe跨页面调用函数的方法,实例展示了iframe中父页面调用子页面和子页面调用父页面的实现技巧,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • JavaScript原型对象原理与应用分析

    JavaScript原型对象原理与应用分析

    这篇文章主要介绍了JavaScript原型对象原理与应用,结合实例形式分析了javascript原型对象的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-12-12
  • EasyUI弹出框行编辑如何通过下拉框实现内容联动

    EasyUI弹出框行编辑如何通过下拉框实现内容联动

    本文介绍了如何使用EasyUI弹出框和下拉框实现内容联动,并详细描述了当用户选择下拉框时如何更新当前行数据,通过解决datagrid的onClickRow和onClickCell事件不触发的问题,实现了下拉框选择后数据的自动填充
    2024-11-11

最新评论