为了巩固基础，我会通过实例来详细说明，让我们一起搞懂 typeof 和 instanceof。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <script>

  console.log(   'typeof 123', ':', typeof 123   );

  // number

  console.log(   "typeof 'str'", ':', typeof 'str'   );

  // string

  console.log(   "typeof !'0'", ':', typeof !'0'   );

  // boolean

  console.log(   "typeof new Function()", ':', typeof new Function()   );

  // function

  console.log(   'typeof myname', ':', typeof myname   );

  // undefined

  console.log(   'typeof null', ':', typeof null   );

  // object

  console.log(   "typeof {name: 'hello'}", ':', typeof {name: 'hello'}   );

  // object

  console.log(   "typeof [1,2,3]", ':', typeof [1,2,3]   );

  // object

  console.log(   "[1,2] instanceof Array", ':', [1,2] instanceof Array   );

  // true

  console.log(   "Array.isArray([1,2])", ':', Array.isArray([1,2])  );

  // true

  console.log(   "({name: 'he'}) instanceof Object", ':', ({name: 'he'}) instanceof Object   );

  // true

  console.log(   "new Date() instanceof Date", ':', new Date() instanceof Date   );

  function Person(){}

  console.log(    new Person() instanceof Person   );

  // true

  // 接下來是繼承

  function Parent(){};

  function Child(){};

  function Other(){};

  Child.prototype = new Parent();

  let child = new Child();

  console.log(   child instanceof Child   ); // true

  console.log(   child instanceof Parent   ); // true

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

  console.log(   child instanceof Other   ); // false

  console.log(   Parent.prototype.__proto__ === Object.prototype   ); // true

  // instanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型。

  function fun() {}

console.log(typeof fun); // function

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

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

  </script>

</body>

</html>

基础文之-----typeof 和 instanceof的更多相关文章

  1. JS基础-数据类型判断typeof、instanceof、Object.prototype.toString

    typeof用在基本数据类型和函数时,返回其对应类型的描述,对于引用类型都返回为object. instanceof无法判断基本数据类型,对于引用类型数据,返回其其对应类型. Object.proto ...

  2. 深入了解typeof与instanceof的使用场景及注意事项

    JavaScript中的数据类型分为两类,undefined,number,boolean,string,symbol,bigint,null[1]组成的基础类型和Object.Function.Ar ...

  3. JS中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: Typeof typeof 是一个一元运算,放在一个运算数之前 ...

  4. js中typeof和instanceof

    对于typeof和instanceof,我们经常用来检测数据的类型.typeof可以检测Number.Boolean.String.Undefined类型,对于其他类型的数据都返回为object:而i ...

  5. JS typeof与instanceof的区别

    typeof 与 instanceof 通常是用来判断一个变量的类型,二者有如下区别: typeof: 判断一个变量的类型,返回值是字符串形式,返回结果有如下几种: number,boolean,st ...

  6. JS面向对象（1） -- 简介，入门，系统常用类，自定义类，constructor，typeof，instanceof，对象在内存中的表现形式

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  7. 原生JS：delete、in、typeof、instanceof、void详解

    delete.in.typeof.instanceof.void详解 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/doc ...

  8. typeof和instanceof

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

  9. 面向对象的程序设计（二）理解各种方法和属性typeof、instanceof、constructor、prototype、__proto__、isPrototypeOf、hasOwnProperty

    //理解各种方法和属性typeof.instanceof.constructor.prototype.__proto__.isPrototypeOf.hasOwnProperty. //1.typeo ...

随机推荐

  1. Rock18框架之整体框架介绍

    1. 总体框架图 2.框架能解决哪些问题? 问题1: 自动化设备包含龙门架.机械手.伺服.步进等电机.IO控制.定位及纠偏.界面展示等部分.其中硬件(伺服.IO等)是需要更换的,硬件的更换不影响整套系 ...

  2. jquery datatable 粗犷

    需要学习: HTML.CSS.Javascript Bootstrap: 基于以上三个的一个框架 jQuery:一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程 ...

  3. Java代码审计sql注入

    java_sec_code 该项目也可以叫做Java Vulnerability Code(Java漏洞代码). 每个漏洞类型代码默认存在安全漏洞(除非本身不存在漏洞),相关修复代码在注释里.具体可查 ...

  4. 基于SqlSugar的开发框架循序渐进介绍（22）-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理

    在工作流页面中,除了特定的业务表单信息外,往往也需要同时展示通用申请单的相关信息,因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理,本篇随笔介绍Vue3+TypeScript+El ...

  5. 网络编程:软件开发架构、架构总结、网络编程前戏、OSI七层协议简介、OSI七层协议之物理连接层、数据链路层、网络相关专业名词、OSI七层协议之网络层

    目录 软件开发架构 架构总结 网络编程前戏 OSI七层协议简介 OSI七层协议之物理连接层 OSI七层协议之数据链路层 网络相关专业名词 OSI七层协议之网络层 OSI七层协议之传输层 软件开发架构 ...

  6. 从 Numpy+Pytorch 到 TensorFlow JS：总结和常用平替整理

    demo展示 这是一个剪刀石头布预测模型,会根据最近20局的历史数据训练模型,神经网络输入为最近2局的历史数据. 如何拥有较为平滑的移植体验? 保持两种语言,和两个框架的API文档处于打开状态,并随时 ...

  7. layui文件上传+ThinkPHP

    1.前端html代码 <div class="layui-form-item"> <label class="layui-form-label" ...

  8. chrome设置socket5代理

    利用自带的参数命令打破一个死循环. chrome可执行文件 --show-app-list --proxy-server="SOCKS5://127.0.0.1:1080"

  9. 基于.net C# Socket WinForm MQTT 客户端开发

    1.什么是MQTT? MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的&quo ...

  10. 多表查询、Navicat软件、PyMySQL模块

    目录 多表查询.Navicat软件.PyMySQL模块 一.多表查询的两种方法 1.准备工作 2.第一种:连表操作 3.第二种:子查询 总结与结论: 二.多表查询练习题 1.课堂多表查询练习题 2.以 ...