前言
如果你要开发一个复杂的产品,那么肯定少不了使用面向对象机制,当然也避不开 Javascript 里面的继承,instanceof 运算符是原生 Javascript 语言中用来判断实例继承的操作符。所以我们有必要深入理解该运算符!
instanceof 运算符简介
在 JavaScript 中,要判断某个变量的类型,我们第一个想起的就是 typeof 运算符,但是在使用 typeof 运算符的时候 ,只要是引用类型存储的变量,无论你引用的是什么类型的对象,统一返回 “object” ,这就是一个大问题,我们如何判断这个对象是属于哪个类型的呢? ECMAScript 引入了在Java 中的instanceof运算符来解决这个问题,instanceof与typeof都可以检测数据类型,instanceof 运算符与 typeof 运算符的不同点是:要求开发者明确的确认检测对象为某特定类型的数据
举例说明分析
Javascript 变量类型
这个网上有很多种说法,说法很多的原因也很简单,就是因为在JS一切皆对象,一切引用类型都是继承于 Object 类型的。我在这里分为几大类
undefiend 没有定义数据类型
number 数值数据类型 例如 10或者1或者5.5
string 字符串数据类型用来描述文本 例如 "你的姓名"
boolean 布尔类型 true|false 不是正就是反,是或者否,有或者没有
object 对象类型 复杂的一组描述信息的集合
function 函数类型
这么分的根据是什么呢?很简单,就是通过 typeof 来区分的
function Fun(){}
var unde = typeof abc; // 基本类型
var numb = typeof 300; // 基本类型
var str = typeof "hello"; // 基本类型
var bool = typeof true; // 基本类型
var func = typeof function(){} // 引用/对象 类型
var obje = typeof new String("hello"); // 引用/对象 类型
var nul = typeof null; // 引用/对象 类型
var obj = typeof new Fun() // 引用/对象 类型
console.log('\n',unde,'\n',numb,'\n',str,'\n',bool,'\n',func,'\n',obje);
console.log('\n',obj,'\n',nul)
结果为:
从中可以看出,typeof 就只能返回这六种数据类型,所以基本类型就确定为这六种。其实函数 function 也是对象类型,这个问题后面会讲到的。
注意 : 基本变量类型
不是对象类型,只有基本包装类型
才是对象类型。所以 str instanceof Object/String
都是 false
instanceof 举例
常规用法
var StringObje = new String("instanceof");
console.log(StringObje instaceof String); // 输出为true
这段代码问的是,变量 StringObje
是不是 String
对象的实例,答案为 true,很显然是的 , typeof 只会返回 "Object",所以 instanceof 还是有用的,当然你会发现 StringObje instanceof Object
也是true
通常来讲使用 instanceof 就是判断一个实例是否属于某种类型
// 判断 foo 是否是 Foo 的实例
function Foo(){}
var foo = new Foo();
console.log(foo instaceof Foo) // true
instanceof 在继承中关系应用
// 判断 a 是否是A类的实例,和是否是其父类 AFather 的实例
function AFather(){}
function A(){}
AFather.prototype = new A(){}; // js原型继承
var a = new A();
console.log(a instanceof A) //true
console.log(a instanceof AFather) //true
在多层继承中,仍然适用。
instanceof 复杂用法
function Foo(){}
console.log(Object instanceof Object);//1 true
console.log(Function instanceof Function);//2 true
console.log(Number instanceof Number);//3 false
console.log(String instanceof String);//4 false
console.log(Function instanceof Object);//5 true
console.log(Foo instanceof Function);//6 true
console.log(Foo instanceof Foo);//7 false
对上面的结果有没有感觉到奇怪,奇怪也正常,因为确实挺奇怪的!
对上面的分析,首先要看看,你检测的到底是什么?
console.log(Object,Function,String,Number,Foo);
/***
* 结果如下
* function Object() { [native code] }
* function Function() { [native code] }
* function String() { [native code] }
* function Number() { [native code] }
* function Foo(){}
*/
这已经很明显了,所有的检测对象都是一个函数,那么必定属于函数类型和对象类型
,只剩下3,4,7有问题了,那么为什么是 false
呢?你想想,Foo函数是Foo的实例吗
?显然不是啊,同理,String和Number函数也不是其本身的实例
,new Func() , 这个才是实例对象。
想彻底明白其中奥妙,必须要了解语言规范
和原型继承机制
规范中 instanceof 运算符定义
可以参考这个网址 :instanceof 语法
规范定义很晦涩,而且看起来比较复杂,涉及到很多概念,但把规范翻译成 JavaScript 代码却很简单,如下:
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) return true; // 这里重点:当 O 严格等于 L 时,返回 true
L = L.__proto__;
}
}
Javascript 原型继承机制
本文主要在分析 JavaScript instanceof 运算符,对于 JavaScript 的原型继承机制不再做详细的讲解,下面参考来自http://www.mollypages.org/mis... 的一张图片,此图片详细的描述了 JavaScript 各种对象的显示和隐式原型链
结构。
由其涉及显示原型和隐式原型,所以下面对这两个概念作一下简单说明。在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示
,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行。所有 JavaScript 对象都有 __proto__ 属性,但只有 Object.prototype.__proto__ 为 null
,前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显示的原型,在 JavaScript 里用 prototype 属性表示
,这个是 JavaScript 原型继承的基础知识,在这里就不在叙述了。
这个图片很好地表达了js原型链的关系,要仔细去看,跟着箭头一步一步分析。
上述复杂问题的推演过程
如果你理解了 javascript 原型链,那么这个问题就简单了!
下面将详细讲解 Object instanceof Object,Function instanceof Function 和 Foo instanceof Foo
三个示例,其它示例读者可自行推演。
1. 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
2. Function instanceof Function
// 为了方便表述,首先区分左侧表达式和右侧表达式
FunctionL = Function, FunctionR = Function;
// 下面根据规范逐步推演
O = FunctionR.prototype = Function.prototype
L = FunctionL.__proto__ = Function.prototype
// 第一次判断
O == L
// 返回 true
3. 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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。