探讨instanceof实现原理,并用两种方法模拟实现 instanceof
在开始之前先了解下js数据类型
js基本数据类型:
null undefined number boolean string
js引用数据类型:
function object array
一说instanceof 就想到typeof ,这里也介绍下typeof:
typeof是用来判断数据类型的,就一个参数 ,使用方式像这样: typeof num, 就是判断num是什么类型
typeof 一般只能返回如下几个结果:"number"、"string"、"boolean"、"object"、"function" 和 "undefined"; 除了"object" 其他都好说。
着重看这几个:
typeof 不存在的变量 = “undefined”
typeof 对象 = “object”
typeof null = "object"
typeof 数组 = “object”
typeod 方法的实例(比如 new Array()) =“object”
对象,数组 都是引用类型, 使用typeof 结果是 object类型,但是null 是基本数据类型,使用typeof结果也是 object,
可以这么理解:null 是 不指向任何对象 的 空指针, 因为它是指向对象的,所以typeof 就是 object, 但是它又是空的,所以就属于基本数据类型。
但是要想判断一个变量是不是数组, 或者对象, 这时候就需要instanceof了(判断是不是null,直接用 变量 === null 就行, null===null 结果是 true)
现在说instanceof, 要想从根本上了解 instanceof 的奥秘,需要从两个方面着手:
1 语言规范中是如何定义这个运算符的。
2 JavaScript 原型继承机制。
一 JavaScript instanceof 语言规范 (简化版) 的运算代码如下:
function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
var O = R.prototype;
L = L.__proto__;
while (true) {
if (L === null)
return false;
if (O === L) // 这里重点:当 O 严格等于 L 时,返回 true
return true;
L = L.__proto__;
}
}
规则简单来说就是 L的 __proto__ 是不是强等于 R.prototype,不等于再找 L.__proto__ .__proto__ 直到 __proto__ 为 null
二 JavaScript 原型链,看下图:
对上图的说明:
1.function Foo 就是一个方法,比如内置的 Array ,String ,或者自定义的方法;
2.function Object 就是Object
3.function Function 就是Function
4.以上三个其实都是function 所以他们的_proto_ 都是Function.prototype
5.记住 String, Array, Number, Object, Function这些其实都是 function
结合语言规范跟js的原型链,接下来我们看实际例子
常规的用法:
function F(){}
var a = new F()
console.log(a instanceof F) // 输出 true
function child(){}
function father(){}
child.prototype = new father()
var a = new child()
console.log(a instanceof father) // 输出true
更高级点的用法:
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
大家可以在控制台输出,可以直观的看到每个步骤的输出,结合instanceof 的规范跟js原型链 加深理解。
模拟实现instanceof
对于用 typeof 就可以判断出来数据类型的这里就不处理,只处理 typeof 结果为 object ,并且不是 null 的。
方法一: 直接使用instanceof的规则
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
var O = R.prototype;
L = L.__proto__;
while (true) {
if (L === null)
return false;
if (O === L) // 这里重点:当 O 严格等于 L 时,返回 true
return true;
L = L.__proto__;
}
}
// 开始测试
var a = []
var b = {}
function Foo(){}
var c = new Foo()
function child(){}
function father(){}
child.prototype = new father()
var d = new child()
console.log(instance_of(a, Array)) // true
console.log(instance_of(b, Object)) // true
console.log(instance_of(b, Array)) // false
console.log(instance_of(a, Object)) // true
console.log(instance_of(c, Foo)) // true
console.log(instance_of(d, child)) // true
console.log(instance_of(d, father)) // true
</script>
</body>
</html>
方法二:在方法一的基础上使用 constructor (此方法无法用于判断继承)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
var O = R;
L = L.__proto__;
while (true) {
if (L === null)
return false;
if (O === L.constructor) // 这里重点:当 O 严格等于 L 时,返回 true
return true;
L = L.__proto__;
}
}
// 开始测试
var a = []
var b = {}
function Foo(){}
var c = new Foo()
function child(){}
function father(){}
child.prototype = new father()
var d = new child()
console.log(instance_of(a, Array)) // true
console.log(instance_of(b, Object)) // true
console.log(instance_of(b, Array)) // false
console.log(instance_of(a, Object)) // true
console.log(instance_of(c, Foo)) // true
console.log(instance_of(d, child)) // false 这里就是无法用于判断继承的
console.log(instance_of(d, father)) // true
</script>
</body>
</html>
探讨instanceof实现原理,并用两种方法模拟实现 instanceof的更多相关文章
- WebGL中添加天空盒的两种方法
天空盒 的添加可以让模型所在的场景非常漂亮,而其原理也是非常简单的,相信看完下面代码就可以明白了. 说到天空盒的两种方法,倒不如说是两种写法,分别用了纹理加载的两个方法:loadTexture和loa ...
- OpenGL坐标变换及其数学原理,两种摄像机交互模型(附源程序)
实验平台:win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): a.鼠标拖拽旋转物体,类似于OGRE中的“OgreBites::CameraStyle: ...
- Loadrunner 接口测试的两种方法
其实无论用那种测试方法,接口测试的原理是通过测试程序模拟客户端向服务器发送请求报文,服务器接收请求报文后对相应的报文做出处理然后再把应答报文发送给客户端,客户端接收应答报文这一个过程. 方法一.用Lo ...
- hive权威安装出现的不解错误!(完美解决)两种方法都可以
以下两种方法都可以,推荐用方法一! 方法一: 步骤一: yum -y install mysql-server 步骤二:service mysqld start 步骤三:mysql -u root - ...
- C++调用DLL有两种方法——静态调用和动态调用
C++调用DLL有两种方法——静态调用和动态调用 标签: dllc++winapinullc 2011-09-09 09:49 11609人阅读 评论(0) 收藏 举报 分类: cpp(30) [ ...
- 合并BIN文件的两种方法(转)
源:http://blog.chinaunix.net/uid-20745340-id-1878803.html 合并BIN文件的两种方法 在单片机的开发过程中,经常需要将两个单独的BIN文件合并成一 ...
- iframe-父子-兄弟页面相互传值(jq和js两种方法)
参考文章: http://blog.csdn.net/u013299635/article/details/78773207 http://www.cnblogs.com/xyicheng/archi ...
- 在Java Web程序中使用监听器可以通过以下两种方法
之前学习了很多涉及servlet的内容,本小结我们说一下监听器,说起监听器,编过桌面程序和手机App的都不陌生,常见的套路都是拖一个控件,然后给它绑定一个监听器,即可以对该对象的事件进行监听以便发生响 ...
- CSS多行文字垂直居中的两种方法
之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...
随机推荐
- Android colors.xml 颜色列表
android 常用项 <?xml version="1.0" encoding="utf-8"?> <resources> <c ...
- ASUS主板ALC887声卡,RTL81XX网卡,黑苹果驱动安装
折腾了一下午终于在黑苹果上成功的安装了网卡,声卡驱动: 我的配置: 主板 ASUS b75m-a 声卡 ALC887 网卡 RTL8168F 安装所需工具: MutiBest 下载OS对应的版本即可 ...
- Tomcat性能调整完整教程
Tomcat性能调整完整教程 发表于:2007-07-13来源:作者:点击数:526 标签: 一. 引言 性能测试与分析是软件 开发 过程中介于架构和调整的一个广泛并比较不容易理解的领域,更是一项较为 ...
- JDBC数据库编程:ResultSet接口
掌握ResultSet接口 使用ResultSet接口进行查询 ResultSet接口 在JDBC操作中,数据库所有查询记录将使用ResultSet进行接收,并使用ResultSet显示内容. 常用方 ...
- input text 去掉标签下拉提示autocomplete
autocomplete 属性 autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在 ...
- CentOS忘记root密码解决办法
如果是忘记普通的用户密码,那还好说,用root登录命令行界面,修改即可. 但如果是root的话,那就需要这样修改了. 记住,这几篇文章说的都是对的,只是我复杂了,实际只需要将光标移到最后" ...
- Netty4具体解释三:Netty架构设计
读完这一章,我们基本上能够了解到Netty全部重要的组件,对Netty有一个全面的认识.这对下一步深入学习Netty是十分重要的,而学完这一章.我们事实上已经能够用Netty解决一些常规的问 ...
- openfireserver和jdk环境删除命令
一.卸载jdk1.8 终端依次运行以下的命令 sudo rm -fr /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin sudo rm -rf / ...
- ITIL学习心笔记总结
四:价值: 被验证的价值1:革新意识---管理也是第一生产力 被验证的价值2:统一思路---这不是一个人的战斗 被验证的价值3:体系的价值---‘新木桶原理’ ITSM的实施经验表明,“”一流的工程师 ...
- Entity Framework Code First使用者的福音 --- EF Power Tool使用记之一(转载)
好像蛮长时间没有新文章带给大家了.前几天出差再加上忙着公司里的活儿,几乎都没时间上博客园了.今天正好有些时间,为大家简单介绍EF产品组新发布的一个牛逼的小工具——EF Power Tool(翻译的话, ...