JavaScript的instanceof运算符学习教程

 更新时间:2016年06月08日 18:45:03   作者:韩子迟  
instanceof运算符可以用来判断某个构造函数的prototype属性所指向的对象是否存在于另外一个要检测对象的原型链上,这里我们就来看一下JavaScript的instanceof运算符学习教程

语法

object instanceof constructor

参数
object:
要检测的对象.
constructor:
某个构造函数

描述:
instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

// 定义构造函数
function C(){} 
function D(){} 

var o = new C();

// true,因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C; 

// false,因为 D.prototype不在o的原型链上
o instanceof D; 

o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.

D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true

需要注意的是,如果表达式 obj instanceof Foo 返回true,则并不意味着该表达式会永远返回ture,因为Foo.prototype属性的值有可能会改变,改变之后的值很有可能不存在于obj的原型链上,这时原表达式的值就会成为false。另外一种情况下,原表达式的值也会改变,就是改变对象obj的原型链的情况,虽然在目前的ES规范中,我们只能读取对象的原型而不能改变它,但借助于非标准的__proto__魔法属性,是可以实现的。比如执行obj.__proto__ = {}之后,obj instanceof Foo就会返回false了。

instanceof和多全局对象(多个frame或多个window之间的交互)

在浏览器中,我们的脚本可能需要在多个窗口之间进行交互。多个窗口意味着多个全局环境,不同的全局环境拥有不同的全局对象,从而拥有不同的内置类型构造函数。这可能会引发一些问题。比如,表达式 [] instanceof window.frames[0].Array 会返回false,因为 Array.prototype !== window.frames[0].Array.prototype,因此你必须使用 Array.isArray(myObj) 或者 Object.prototype.toString.call(myObj) === "[object Array]"来判断myObj是否是数组。

示例
instanceof的常规用法是判断a是否是b类型:

console.log(true instanceof Boolean); // false 
console.log(new Number(1) instanceof Number); // true

instanceof还能判断父类型:

function Father() {}
function Child() {}
Child.prototype = new Father();
var a = new Child();
console.log(a instanceof Child); // true
console.log(a instanceof Father); // true

Child构造函数继承自Father,实例a是Child构造的无疑,但是为何也是Father的实例呢?其实instanceof运算符的内核可以简单地用以下代码描述:

function check(a, b) {
 while(a.__proto__) {
  if(a.__proto__ === b.prototype)
   return true;
  a = a.__proto__;
 }
 return false;
}

function Foo() {}
console.log(Object instanceof Object === check(Object, Object)); // true 
console.log(Function instanceof Function === check(Function, Function)); // true 
console.log(Number instanceof Number === check(Number, Number)); // true 
console.log(String instanceof String === check(String, String)); // true 
console.log(Function instanceof Object === check(Function, Object)); // true 
console.log(Foo instanceof Function === check(Foo, Function)); // true 
console.log(Foo instanceof Foo === check(Foo, Foo)); // true

简单地说,a如果是b的实例,那么a肯定能使用b的prototype中定义的方法和属性,那么用代码表示就是a的原型链中有b.prototype取值相同的对象,于是顺着a的原型链一层层找就行了。

另外值得注意的是,String Number Boolean 以及Function等都是函数,而函数则是统一由Function构造而来的,so它们和任何单纯的函数一样,能用Function上的原型属性:

Function.prototype.a = 10;
console.log(String.a); // 10

最后来简单讲讲最开始的两道题吧。

 // 为了方便表述,首先区分左侧表达式和右侧表达式
 FunctionL = Function, FunctionR = Function; 
 // 下面根据规范逐步推演
 O = FunctionR.prototype = Function.prototype 
 L = FunctionL.__proto__ = Function.prototype 
 // 第一次判断
 O == L 
 // 返回 true

// 为了方便表述,首先区分左侧表达式和右侧表达式
 StringL = String, StringR = String; 
 // 下面根据规范逐步推演
 O = StringR.prototype = String.prototype 
 L = StringL.__proto__ = Function.prototype 
 // 第一次判断
 O != L
 // 循环再次查找 L 是否还有 __proto__ 
 L = String.prototype.__proto__ = Object.prototype 
 // 第二次判断
 O != L 
 // 再次循环查找 L 是否还有 __proto__ 
 L = String.prototype.__proto__ = null 
 // 第三次判断
 L == null 
 // 返回 false

相关文章

  • 了解前端理论:rscss和rsjs

    了解前端理论:rscss和rsjs

    在前端开发中,我们会尝试去定一些规则和约定,来让项目质量更高,更易于维护。而对于这些规则和约定,我们也会希望它内容简单,容易理解。下面小编来和大家一起学习一下
    2019-05-05
  • 用JavaScript显示浏览器客户端信息的超相近教程

    用JavaScript显示浏览器客户端信息的超相近教程

    这篇文章主要介绍了用JavaScript显示浏览器客户端信息的超相近教程,包含了从返回桌面浏览器客户端内核信息到移动端浏览器以及其使用的系统版本信息等内容,倾力推荐!需要的朋友可以参考下
    2015-06-06
  • JavaScript ES6中的简写语法总结与使用技巧

    JavaScript ES6中的简写语法总结与使用技巧

    我们在看编写的JS ES6代码时经常会看到许多简写的语法,本篇文章就为大家一一介绍JavaScript ES6可以简写的语法
    2018-12-12
  • Javascript 二维数组

    Javascript 二维数组

    Javascript二维数组的实现代码,需要的朋友可以参考下。
    2009-11-11
  • 讲解JavaScript中for...in语句的使用方法

    讲解JavaScript中for...in语句的使用方法

    这篇文章主要介绍了讲解JavaScript中for...in语句的使用方法,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JavaScript学习笔记(十七)js 优化

    JavaScript学习笔记(十七)js 优化

    在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用。
    2010-02-02
  • JS数组(Array)处理函数整理

    JS数组(Array)处理函数整理

    这篇文章主要整理了一下JS数组(Array)处理函数,常用的都汇总了一下,推荐给大家。
    2014-12-12
  • js onkeypress与onkeydown 事件区别详细说明

    js onkeypress与onkeydown 事件区别详细说明

    本文将详细介绍js onkeypress与onkeydown 事件区别:一个放开一个没有放开,onkeydown先于onkeypress 发生,需要的朋友可以参考下
    2012-12-12
  • JavaScript 学习笔记之数据类型

    JavaScript 学习笔记之数据类型

    javascript数据类型非常简单,仅仅包含undefined、null、string、Boolean、number以及object,今天我们就针对这几个数据类型,一一进行讲解,方便大家理解记忆
    2015-01-01
  • TypeScript基础class类教程示例

    TypeScript基础class类教程示例

    这篇文章主要为大家介绍了TypeScript基础class类教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02

最新评论