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


Posted in Javascript onDecember 03, 2013

我们知道 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]],描述如下

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

假如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:

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

Chrome24:

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

Safari6:

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

Opera12:

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

IE10:

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

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

Javascript 相关文章推荐
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 #Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 #Javascript
解析Javascript小括号“()”的多义性
Dec 03 #Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 #Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 #Javascript
jQuery获得内容和属性方法及示例
Dec 02 #Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 #Javascript
You might like
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
javascript getElementsByTagName
2011/01/31 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python实现异步IO的示例
2020/11/05 Python
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
房屋改造计划书
2014/01/10 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
财务工作失误检讨书
2015/02/19 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫