instanceof运算符简介

在 JavaScript 中

判断一个变量的类型常常会用 typeof 运算符

判断一个实例是否属于某种类型会使用instanceof

与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。

常规用法

var oStringObject = new String("hello world");
console.log(oStringObject instanceof String); // 输出 "true" // 判断 foo 是否是 Foo 类的实例
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true

继承关系中的用法

// 判断 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

复杂用法

 console.log(Function instanceof Function) // true
console.log(Object instanceof Object); // true
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true
console.log(Function instanceof String); // false
console.log(String instanceof Object); // true
console.log(String instanceof Function); // true
console.log(String instanceof Number); // false
console.log(Array instanceof Number); // false
console.log(Number instanceof Array); // false
console.log(String instanceof Array); // false
console.log(Array instanceof Object); // true
console.log(Array instanceof Function); // true

instanceof的定义

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__;
}
}

讲解 instanceof 复杂用法

有了上面 instanceof 运算符的 JavaScript 代码和原型继承图,再来理解 instanceof 运算符将易如反掌。下面将详细讲解 Object instanceof Object,Function instanceof Function 和 Foo instanceof Foo 三个示例,其它示例读者可自行推演。

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

Function instanceof Function

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

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

下篇文章将介绍JavaScript的原型继承

JavaScript instanceof 运算符的更多相关文章

  1. JavaScript instanceof 运算符深入剖析

    简介: 随着 web 的发展,越来越多的产品功能都放在前端进行实现,增强用户体验.而前端开发的主要语言则是 JavaScript.学好 JavaScript 对开发前端应用已经越来越重要.在开发复杂产 ...

  2. JavaScript instanceof 运算符深入剖析【转载】

    http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/   instanceof 运算符简介 在 JavaScript ...

  3. instanceof 运算符简介

    文章摘自: http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/ https://developer.mozilla. ...

  4. JavaScript原型链和instanceof运算符的暧昧关系

    时间回到两个月前,简单地理了理原型链.prototype以及__proto__之间的乱七八糟的关系,同时也简单了解了下typeof和instanceof两个运算符,但是,anyway,试试以下两题: ...

  5. javascript特殊运算符(in,instanceof,typeof,delete,void,逗号)

    in运算符                 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该 运算符左边的值是右边对象的一个属性名,则返回true, ...

  6. javascript中的instanceof运算符

    instanceof运算符希望左操作数是一个对象,右操作数表示对象的类:如果左侧的对象是右侧类的实例,则返回true,否则返回false.由于js中对象的类是通过初始化它们的构造函数来定义的,因此in ...

  7. javascript特殊运算符

    in运算符                 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该 运算符左边的值是右边对象的一个属性名,则返回true, ...

  8. 匿名函数自执行原理和instanceof运算符执行原理

    今天收到RSS订阅中有一篇<Javascript – Arraylike的7种实现>,看第一种实现方式是,瞬间被!function(){}()这种匿名函数自执行方式给亮瞎了眼睛.这种写法绝 ...

  9. javascript instanceof

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

随机推荐

  1. js 对url进行某个参数的删除,并返回url

    两种情况 1对当前页面的url进行操作 function funcUrlDel(name){ var loca = window.location; var baseUrl = loca.origin ...

  2. appium+python3+pycharm踩得坑

    错误: selenium.common.exceptions.WebDriverException: Message: A new session could not be created. (Ori ...

  3. sdoi2018旧试题 证明

  4. ajax基本用法介绍

    使用ajax需要同时在模板中引用jQuery,ajax基本使用方法如下: $.ajax({ url:'url', type:'POST', data:{'k1':v1,'k2':v2,}, dataT ...

  5. HBase Filter及对应Shell

    比较运算符 CompareFilter.CompareOp比较运算符用于定义比较关系,可以有以下几类值供选择: EQUAL 相等 GREATER 大于 GREATER_OR_EQUAL 大于等于 LE ...

  6. leetcode实战

    leetcode记录 两数之和 题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案. ...

  7. [IoC容器Unity]第四回:使用范例

    1.引言 前面几个章节介绍了Unity的基本使用,主要分为程序和配置文件两种方法的使用,可以参考一下链接, [IoC容器Unity]第一回:Unity预览 [IoC容器Unity]第二回:Lifeti ...

  8. 支付宝支付之App支付

    与微信支付对比,支付宝支付就没有那么多坑了,毕竟支付宝开放平台的文档还是描述的很详细的. 支付宝开放平台地址:https://docs.open.alipay.com/204/105297/ 支付宝支 ...

  9. 防cc攻击策略

    黑客攻击你的网站,会采取各种各样的手段,其中为了降低你网站的访问速度,甚至让你的服务器瘫痪,它会不断的刷新你的网站,或者模拟很多用户同一时间大量的访问你的网站, 这就是所谓的CC攻击,这就需要我们在程 ...

  10. 遇到的Cocos2dx问题

    平时工作中,多多少少,总会遇到些棘手的问题,此文章会不断更新,避免下次再入坑  Cocos 官方相关下载 https://github.com/fusijie/Cocos-Resource Easin ...