最近开始在整理ES6/ES7/ES8/ES9的知识点(已经上传到 我的博客 上),碰到一些知识点是自己已经忘记(用得少的知识点),于是也重新复习了一遍。

这篇文章要复习的 instanceof 是我在整理过程中遇到的,那就整理下来吧,不然容易忘记。

要是哪里写得不妥,欢迎各位大佬指点。

1.定义

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。 —— MDN

简单理解为:instanceof可以检测一个实例是否属于某种类型。

比如:

function F (){
// ...
}
let a = new F (); a instanceof F; // true
a instanceof Object; // true 后面介绍原因

还可以在继承关系中用来判断一个实例是否属于它的父类型。

比如:

function F (){};
function G (){};
function Q (){};
G.prototype = new F(); // 继承 let a = new G();
a instanceof F; // true
a instanceof G; // true
a instanceof Q; // false

2.使用方法

语法为: object instanceof constructor

  • object : 需要测试的函数
  • constructor : 构造函数

即:用instanceof运算符来检测constructor.prototype 是否存在参数object的原型链。

function F (){};
function G (){};
let a = new F (); a instanceof F; // true 因为:Object.getPrototypeOf(a) === F.prototype
a instanceof Q; // false 因为:F.prototype不在a的原型链上
a instanceof Object; // true 因为:Object.prototype.isPrototypeOf(a)返回true
F.prototype instanceof Object; // true,同上

注意

  1. a instanceof F 返回 true 以后,不一定永远都都返回为trueF.prototype属性的值有可能会改变。
  2. 原表达式a的值也会改变,比如 a.__proto__ = {}之后,a instanceof F就会返回false了。

检测对象是不是特定构造函数的实例:

// 正确
if (!(obj instanceof F)) {
// ...
} // 错误 因为
if (!obj instanceof F); // 永远返回false
// 因为 !obj 在instanceof之前被处理 , 即一直使用一个布尔值检测是否是F的实例

3.实现instanceof

/**
* 实现instanceof
* @param obj{Object} 需要测试的对象
* @param fun{Function} 构造函数
*/
function _instanceof(obj, fun) {
let f = fun.prototype; // 取B的显示原型
obj = obj.__proto__; // 取A的隐式原型
while (true) {
//Object.prototype.__proto__ === null
if (obj === null)
return false;
if (f === obj) // 这里重点:当 f 严格等于 obj 时,返回 true
return true;
obj = obj.__proto__;
}
}

4.instanceof 与 typeof 对比

相同

instanceoftypeof都能用来判断一个变量的类型。

区别

instanceof 只能用来判断对象、函数和数组,不能用来判断字符串和数字等:

let a = {};
let b = function () {};
let c = [];
let d = 'hi';
let e = 123; a instanceof Object; // true
b instanceof Object; // true
c instanceof Array; // true
d instanceof String; // false
e instanceof Number; // false

typeof :用于判断一个表达式的原始值,返回一个字符串。

typeof 42;         // "number"
typeof 'blubber'; // "string"
typeof true; // "boolean"
typeof aa; // "undefined"

一般返回结果有:

  • number
  • boolean
  • string
  • function(函数)
  • object(NULL,数组,对象)
  • undefined。

判断变量是否存在

不能使用:

if(a){
//变量存在
}
// Uncaught ReferenceError: a is not defined

原因是如果变量未定义,就会报未定义的错,而应该使用:

if(typeof a != 'undefined'){
//变量存在
}

5.参考资料

  1. MDN instanceof

  2. IBM instanceof

  3. js中typeof和instanceof用法区别

【重温基础】instanceof运算符的更多相关文章

  1. Java基础——Instanceof 运算符

    Instanceof 运算符 java 中的instanceof 运算符是用来在运行时指出对象是否为特定类的一个实例 instanceof运算返回值:boolean类型 用法 boolean resu ...

  2. 《Java基础知识》Java instanceof 运算符

    java多态性带来一个问题,就是如何判断一个变量所实际引用对象的类型.这里java帮我们引入了 instanceof 运算符. instanceof运算符用来判断一个变量的所引用对象的实际类型,注意是 ...

  3. JavaScript instanceof 运算符深入剖析

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

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

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

  5. instanceof 运算符简介

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

  6. 【重温基础】15.JS对象介绍

    从这篇文章开始,复习 MDN 中级教程 的内容了,在初级教程中,我和大家分享了一些比较简单基础的知识点,并放在我的 [Cute-JavaScript]系列文章中. 关于[Cute-JavaScript ...

  7. instanceof 运算符

    java中的instanceof=======>二元运算符 用法: result = object instanceof class 参数: result 是boolean类型 object 是 ...

  8. instanceof运算符

    instanceof运算符:判断该对象是否是某一个类的实例. 语法格式:boolean b = 对象A instanceof 类B://判断A对象是否是B类的实例,如果是返回true. 若对象是类的实 ...

  9. Object.prototype 与 Function.prototype 与 instanceof 运算符

    方法: hasOwnProperty isPrototypeOf propertyIsEnumerable hasOwnProperty 该方法用来判断一个对象中的某一个属性是否是自己提供的( 住要用 ...

随机推荐

  1. 心里有点B树

    在说B树之前最好先看看2-3树, 2-3树是B树的一种特例, 什么B树, B树就是2-3树, 2-3-4 树 , 2-3-4-5... 树的统称, 而B+树又是B树的一种变形 性质: 什么是二节点, ...

  2. nyoj 467 中缀式变后缀式 (栈)

    中缀式变后缀式 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 人们的日常习惯是把算术表达式写成中缀式,但对于机器来说更“习惯于”后缀式,关于算术表达式的中缀式和后缀 ...

  3. nyoj 266-字符串逆序输出 (isdigit(), geline(cin, my_string))

    266-字符串逆序输出 内存限制:64MB 时间限制:3000ms 特判: No 通过数:15 提交数:18 难度:0 题目描述: 给定一行字符,逆序输出此行(空格.数字不输出) 输入描述: 第一行是 ...

  4. 简单的 smartpointer

    水水地 发第一篇blog, 瘦身版的smartpointer. template <typename T> class CountedPtr { private: T* ptr; long ...

  5. gcc在x64体系中如何传递参数,linux,mac,iOS适用

    上一篇介绍了vc(windows)平台在x64体系当中,c函数的传参方式.本篇将要介绍gcc(类linux,mac)平台在x64中,c函数是如何传参的.为节约时间和篇幅,首先来定义一个有十个参数的函数 ...

  6. 【论文阅读】The Contextual Loss for Image Transformationwith Non-Aligned Data(ECCV2018 oral)

    目录: 相关链接 方法亮点 相关工作 方法细节 实验结果 总结与收获 相关链接 论文:https://arxiv.org/abs/1803.02077 代码:https://github.com/ro ...

  7. C#学习笔记04--排序/查找/二维数组/交叉数组

    一. 冒泡排序(重点) 思路:  每次比较把较小的放在前面, 大的放到后面; 图解:下图是最坏情况下的排序 ` 冒泡排序m个元素, 就有(m-1)趟排序, 第一趟m-1次, 第二趟 m-2次....  ...

  8. ExtentTestNGIReporterListener

    package com.testng.config; import com.aventstack.extentreports.ExtentReports; import com.aventstack. ...

  9. 窗体的FormBorderStyle属性的不同效果

    查看原文:http://blog.xieyc.com/form-border-style/ 设置窗体边框可以通过设置窗体的FormBorderStyle属性设置.属性值可以通过枚举类型FormBord ...

  10. 搭建nextcloud私有云存储网盘

    简介: 搭建个人云存储一般会想到ownCloud,堪称是自建云存储服务的经典.而Nextcloud是ownCloud原开发团队打造的号称是“下一代”存储. 真正试用过后就由衷地赞同这个Nextclou ...