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

instanceof 运算符简介

在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 “object”。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。例如:

清单 1. instanceof 示例

 var oStringObject = new String("hello world");
 console.log(oStringObject instanceof String); // 输出 "true"

这段代码问的是“变量 oStringObject 是否为 String 对象的实例?”oStringObject 的确是 String 对象的实例,因此结果是”true”。尽管不像 typeof 方法那样灵活,但是在 typeof 方法返回 “object” 的情况下,instanceof 方法还是很有用的。

instanceof 运算符的常规用法:

通常来讲,使用 instanceof 就是判断一个实例是否属于某种类型。例如:

清单 2. instanceof 常规用法

 // 判断 foo 是否是 Foo 类的实例
 function Foo(){}
 var foo = new Foo();
 console.log(foo instanceof Foo)//true

另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。例如:

清单 3. instanceof 在继承中关系中的用法

 // 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
 function Aoo(){}
 function Foo(){}
 Foo.prototype = new Aoo();//JavaScript 原型继承

 var foo = new Foo();
 console.log(foo instanceof Foo)//true
 console.log(foo instanceof Aoo)//true

上面的代码中是判断了一层继承关系中的父类,在多层继承关系中,instanceof 运算符同样适用。

你真的了解 instanceof 操作符吗?

看了上面的代码示例,是不是觉得 instanceof 操作符很简单,下面来看点复杂的用法。

清单 4. instanceof 复杂用法

 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(Foo instanceof Function);//true
 console.log(Foo instanceof Foo);//false

看了上面的代码是不是又晕头转向了?为什么 Object 和 Function instanceof 自己等于 true,而其他类 instanceof 自己却又不等于 true 呢?如何解释?要想从根本上了解 instanceof 的奥秘,需要从两个方面着手:1,语言规范中是如何定义这个运算符的。2,JavaScript 原型继承机制。

清单 5. JavaScript instanceof 运算符代码

 function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
 var O = R.prototype;// 取 R 的显示原型
 L = L.__proto__;// 取 L 的隐式原型
 while (true) {
 if (L === null)
 return false;
 if (O === L)// 这里重点:当 O 严格等于 L 时,返回 true
 return true;
 L = L.__proto__;
 }
 }

清单 6. Object instanceof Object

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

清单 7. Function instanceof Function

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

清单 8. Foo instanceof Foo

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

简析 instanceof 在 Dojo 继承机制中的应用

在 JavaScript 中,是没有多重继承这个概念的,就像 Java 一样。但在 Dojo 中使用 declare 声明类时,是允许继承自多个类的。下面以 Dojo 1.6.1 为例。

清单 9. Dojo 中多重继承

 dojo.declare("Aoo",null,{});
 dojo.declare("Boo",null,{});
 dojo.declare("Foo",[Aoo,Boo],{}); 

 var foo = new Foo();
 console.log(foo instanceof Aoo);//true
 console.log(foo instanceof Boo);//false 

 console.log(foo.isInstanceOf(Aoo));//true
 console.log(foo.isInstanceOf(Boo));//true

上面的示例中,Foo 同时继承自 Aoo 和 Boo,但当使用 instanceof 运算符来检查 foo 是否是 Boo 的实例时,返回的是 false。实际上,在 Dojo 的内部,Foo 仍然只继承自 Aoo,而通过 mixin 机制把 Boo 类中的方法和属性拷贝到 Foo 中,所以当用 instanceof 运算符来检查是否是 Boo 的实例时,会返回 false。所以 Dojo 为每个类的实例添加了一个新的方法叫 isInstanceOf,用这个方法来检查多重继承。

(0)

相关推荐

  • 全面了解javascript三元运算符

    三元运算符: 如名字表示的三元运算符需要三个操作数. 语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2.满足条件时结果1否则结果2. <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a="false"; document.write(" -----------------------

  • javascript运算符语法全面概述

    前面的话 javascript中的运算符大多由标点符号表示,少数由关键字表示,它们的语法言简意赅,它们的数量却着实不少.运算符始终都遵循着一些固定语法,只有了解并掌握这些内容,才能正确使用运算符.本文将主要介绍javascript运算符的语法概述 操作数个数 javascript的运算符总共有46个,如果根据其操作数的个数进行分类,则大多数是二元运算符(binary operator),它们的操作数都是两个,它们将两个表达式合并成复杂表达式 1 + 2; true || false; javas

  • javascript运算符——逻辑运算符全面解析

    前面的话 逻辑运算符对操作数进行布尔运算,经常和关系运算符一样配合使用.逻辑运算符将多个关系表达式组合起来组成一个更复杂的表达式.逻辑运算符分为逻辑非'!'.逻辑与'&&'.逻辑或'||'3种,本文将介绍这三种逻辑运算符 逻辑非 逻辑非操作符由一个叹号(!)表示,可以应用于ECMAScript中的任何值.无论这个值是什么数据类型,这个操作符都会返回一个布尔值.逻辑非操作符首先会将它的操作数转换成一个布尔值,然后再对其求反 逻辑非对操作数转为布尔类型的转换类型与Boolean()转型函数相同

  • 浅谈JS中逗号运算符的用法

    注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScript做举例. 最近重新阅读JavaScript权威指南这本书,应该说很认真的阅读,于是便想把所学的东西多记录下来.后 面本人将逐步写上更多关于本书的文章. 本文的理论知识来自于JavaScript权威指南,我这里做一下整理,或者说叫笔记. 如果你的基础够好的话,完全理解不成问题,但是如果读得有些郁闷的话,可以加我的QQ:

  • 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

  • 详解JavaScript中|单竖杠运算符的使用方法

    js运算符单竖杠"|"的作用 在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整. 3. Math.round() 我们数学中常用到的四舍五入取整. console.log(0.6|0)//0 console.log(1.1|0)//1 console.log(3.65555|0)//3 console.

  • JavaScript知识点总结(四)之逻辑OR运算符详解

    在JavaScript中,逻辑OR运算符用||表示 var bTrue = true; var bFalse = false; var bResult = bTrue || bFalse; 下面的真值表描述了逻辑AND运算符的行为: 在JavaScript中,0,"",false,null,undefined,NaN均表示false, 可以用如下的代码证明: <script type="text/javascript"> var bFalse = fal

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

    instanceof 运算符简介 在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "object".ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题.instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型.与 typeof 方法不同的是,instanceof 方法要求开发者明确地确

  • JavaScript中instanceof运算符的用法总结

    JavaScript中instanceof运算符是返回一个 Boolean 值,指出对象是否是特定类的一个实例. 使用方法:result = object instanceof class其中result是必选项.任意变量.object是必选项.任意对象表达式.class是必选项.任意已定义的对象类. 说明如果 object 是 class 的一个实例,则 instanceof 运算符返回 true.如果 object 不是指定类的一个实例,或者 object 是 null,则返回 false.

  • javascript中instanceof运算符的用法详解

    概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 obj instanceof Object;//true 实例obj在不在Object构造函数中 描述 instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上. 实例 1.instanceof的普通的用法,obj instanceof Object 检测Object.prototype是否存在于参数

  • 实例讲解JavaScript中call、apply、bind方法的异同

    以实例切入,讲解JavaScript中call,apply,bind方法,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function MAN(name, sex, age) { this.name =

  • JavaScript中instanceof运算符的使用示例

    instanceof运算符可以用来判断某个构造函数的prototype属性是否存在另外一个要检测对象的原型链上. 实例一:普遍用法 A instanceof B :检测B.prototype是否存在于参数A的原型链上. function Ben() { } var ben = new Ben(); console.log(ben instanceof Ben);//true 实例二:继承中判断实例是否属于它的父类 function Ben_parent() {} function Ben_son

  • 实例讲解Python中sys.argv[]的用法

    sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个"外部"很关键,所以那些试图从代码来说明它作用的解释一直没看明白.因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list),也就是说sys.argv其实可以看作是一个列表,所以才能用[]提取其中的元素.其第一个元素是程序本身,随后才依次是外部给予的参数. druid.py如下 import sys a = sys.argv[0] print(a) 保存运行如下 得到的结果是test.py,这就是0指代码(即此.

  • 实例讲解JavaScript中的this指向错误解决方法

    看如下对象定义: 'use strict' var jane = { name : 'Jane', display : function(){ retrun 'Person named ' + this.name; } }; 这样能正常调用 jane.display(); 下面的调用会出错: var func = jane.display; func() TypeError: Cannot read property 'name' of undefined 因为,this指向已经改变,正确的方式

  • javascript中in运算符用法分析

    本文实例讲述了javascript中in运算符用法.分享给大家供大家参考.具体分析如下: in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望他的右操作数是一个对象:如果右侧对象拥有一个名为左操作数值的属性名,那么表达式返回true: var point = {x:1,y:1}; "x" in point //true "z" in point //false "toString" in point //true var ary = [

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • JavaScript中展开运算符及应用的实例代码

    展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用. let obj1 = { value1: 1, value2: 2 }; let obj2 = {...obj1 }; console.log(obj2); // {value1: 1, value2: 2} 上面的用法实际相当于 obj2 = {value1: 1, value2: 2} 展开运算符的写法与obj2

随机推荐