js instanceof

Posted 2020-08-30 蒂其之死

instanceof运算符可以用来判断某个构造函数的prototype属性是否存在另外一个要检测对象的原型链上。
实例一：普遍用法

A instanceof B :检测B.prototype是否存在于参数A的原型链上.

1	function Ben() {

2

3

}

4	var ben = new Ben();

5	console.log(ben instanceof Ben);//true

 实例二：继承中判断实例是否属于它的父类

1	function Ben_parent() {}

2	function Ben_son() {}

3	Ben_son.prototype = new Ben_parent();//原型继承

4	var ben_son = new Ben_son();

5	console.log(ben_son instanceof Ben_son);//true

6	console.log(ben_son instanceof Ben_parent);//true

 实例三：复杂用法

1	function Ben() {}

2	console.log(Object instanceof Object);     //true

3	console.log(Function instanceof Function); //true

4	console.log(Function instanceof Object);   //true

5	console.log(Ben instanceof Function);      //true

6

7	console.log(String instanceof String);   //false

8	console.log(Boolean instanceof Boolean); //false

9	console.log(Ben instanceof Ben);         //false

看到上述的结果，是否有点懵了，究其原因，还需探其原理，下面我们来看看规范中如何定义的。

01	ECMASCRIPT 5.1 Standard文档中的定义：

02	11.8.6 The instanceof operator

03

04	The production RelationalExpression : RelationalExpression instanceof ShiftExpression is evaluated as follows:

05

06	1.Let lref be the result of evaluating RelationalExpression.

07	2.Let lval be GetValue(lref).

08	3.Let rref be the result of evaluating ShiftExpression.

09	4.Let rval be GetValue(rref).

10	5.If Type(rval) is not Object, throw a TypeError exception.

11	6.If rval does not have a [[HasInstance]] internal method, throw a TypeError exception.

12	7.Return the result of calling the [[HasInstance]] internal method of rval with argument lval.

13

14	15.3.5.3 [[HasInstance]] (V)

15

16	Assume F is a Function object.

17

18	When the [[HasInstance]] internal method of F is called with value V, the following steps are taken:

19

20	//V不是对象，直接返回false

21	1.If V is not an object, return false.

22

23	//用 [[Get]] 方法取 F方法的prototype属性，结果赋值给O

24	2.Let O be the result of calling the [[Get]] internal method of F with property name "prototype".

25

26	//如果O不是一个对象，报告异常

27	3.If Type(O) is not Object, throw a TypeError exception.

28

29

//重复循环

30

4.Repeat

31	//V = V.[[Prototype]]

32	a.Let V be the value of the [[Prototype]] internal property of V.

33	b.If V is null, return false.

34	c.If O and V refer to the same object, return true.

35

36	NOTE Function objects created using Function.prototype.bind have a different implementation of [[HasInstance]] defined in 15.3.4.5.3.

对应上述规范做个函数模拟A instanceof B：

01	function _instanceof(A, B) {

02	var O = B.prototype;// 取B的显示原型

03	A = A.__proto__;// 取A的隐式原型

04	while (true) {

05	//Object.prototype.__proto__ === null

06	if (A === null)

07	return false;

08	if (O === A)// 这里重点：当 O 严格等于 A 时，返回 true

09	return true;

10	A = A.__proto__;

11

}

12

}

使用此函数模拟解析过程：

01	Object instanceof Object解析,执行_instanceof (Object, Object)

02	O = Object.prototype;

03	A = Object.__proto__ = Function.prototype

04	A = Function.prototype.__proto__ = Object.prototype

05	return true;

06

07	Function instanceof Function解析,执行_instanceof (Function, Function)

08	O = Function.prototype;

09	A = Function.__proto__ = Function.prototype;

10	return true;

11

12	Function instanceof Object解析,执行_instanceof (Function, Object)

13	O = Object.prototype;

14	A = Function.__proto__ = Function.prototype;

15	A = Function.prototype.__proto__ = Object.prototype;

16	return true;

17

18	String instanceof String解析,执行_instanceof (String, String)

19	O = String.prototype;

20	A = String.__proto__ = Function.prototype;

21	A = Function.prototype.__proto__ = Object.prototype;

22	A = Object.prototype.__proto__ = null;

23	return false;

24

25	Ben instanceof Ben解析,执行_instanceof (Ben, Ben)

26	O = Ben.prototype;

27	A = Ben.__proto__ = Ben.prototype;

28	A = Ben.prototype.__proto__ = Object.prototype;

29	A = Object.prototype.__proto__ = null;

30	return false;

 参考链接：

http://www.zuojj.com/tdocs/es5.1/#sec-11.8.6  

http://blog.csdn.net/cuew1987/article/details/15498121

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof

转载声明：

本文标题：深入javascript(六)：instanceof 运算符

本文链接：http://www.zuojj.com/archives/393.html，转载请注明转自Benjamin-专注前端开发和用户体验

 

http://www.zuojj.com/archives/393.html