关于 typeof 与 instanceof 区别引出的原型对象问题

一、关于 typeof 与 instanceof 区别:

typeof 和 instanceof 是 JavaScript 中用于检查变量类型的两个不同操作符,它们在使用上有着明显的区别和不同的适用场景。

typeof

typeof 是一个一元操作符,用于返回一个变量或表达式的数据类型的字符串表示。它对于原始数据类型(如字符串、数字和布尔值)特别有用,但对于识别具体的对象类型(如区分数组和对象)则不那么有效。

语法:typeof operand

返回值:返回值为以下几种字符串之一:“undefined”、“object”、“boolean”、“number”、“string”、“function” 和 “symbol”。

特点:

对于原始类型,typeof 能够准确返回其类型。
对于所有对象(除了函数,函数会返回 “function”)和数组,typeof 都返回 “object”,这限制了它在区分数组、普通对象以及其他类型的对象(如日期和正则表达式)时的能力。
typeof null 返回 “object”,这是一个历史遗留的问题,需要特别注意。

instanceof

instanceof 是一个二元操作符,用于检查一个对象是否为一个特定构造函数的实例,或者说对象的原型链上是否存在构造函数的 prototype 属性(更准确地说,它检查右侧构造函数的 prototype 属性是否存在于左侧对象的原型链上。)。

语法:object instanceof constructor

返回值:如果对象是指定构造函数的实例,则返回 true;否则,返回 false。

特点:

instanceof 能够检查一个对象的原型链,因此它适用于判断对象的具体类型。
不能用于原始数据类型
。例如,一个字符串字面值不是 String 构造函数的实例,但如果你用 new String() 创建一个字符串对象,则 instanceof String 会返回 true。
它只适用于对象类型,不适用于原始数据类型。

二、instanceof 关于原型对象原型链的延伸知识

栗子
let c = '重庆'
c instanceof String //falselet d = new String('重庆') 
d instanceof String // trueconsole.log(c.__proto__) // String {'', anchor: ƒ, at: ƒ, big: ƒ, blink: ƒ, …
console.log(d.__proto__) // String {'', anchor: ƒ, at: ƒ, big: ƒ, blink: ƒ, …
//等价于 c.__proto__ === d.__proto__ //true
console.log(String.prototype) //String {'', anchor: ƒ, at: ƒ, big: ƒ, blink: ƒ, …}
由上面的例子产生疑问,为什么 c instanceof String 与 d instanceof String 输入不一样???

先来看看 MDN 对 js原型对象与原型链的解释

原型(Prototype)

在 JavaScript 中,原型是一个使对象能够继承属性和方法的特殊对象。每个 JavaScript 对象在创建时都会与另一个对象关联起来,这个对象就是它的原型,每个对象都从原型“继承”属性和方法。

JavaScript 使用构造函数来创建对象。每个构造函数都有一个 prototype 属性,这个属性是一个对象,包含应该被构造函数的实例继承的属性和方法。当你创建一个对象实例时,新对象内部的 [[Prototype]](或者通过 proto 属性暴露出的原型链)指向构造函数的 prototype 对象。

function Person(name) {this.name = name;
}
Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}`);
};const person1 = new Person("John");
person1.sayHello(); // 输出: Hello, my name is John
console.log(person1.__proto__ === Person.prototype); // 输出: true

在上面的例子中,person1 对象的原型是 Person.prototype,因此 person1 可以访问 sayHello 方法。

原型链(Prototype Chain)

原型链是 JavaScript 实现继承和查找对象属性的机制。当试图访问一个对象的属性时,如果对象本身没有这个属性,解释器就会去对象的原型(proto 属性指向的对象)中查找。如果原型对象也没有这个属性,解释器再去原型的原型中查找,如此递归下去,形成了所谓的“原型链”。

如果一直查找到原型链的顶端(Object.prototype),仍然没有找到指定的属性,就会返回 undefined。这个查找过程就是 JavaScript 中的原型继承机制。

function Animal(name) {this.name = name;
}
Animal.prototype.eat = function() {console.log(`${this.name} eats.`);
};function Dog(name) {Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;Dog.prototype.bark = function() {console.log('Woof!');
};const dog1 = new Dog("Rex");
dog1.eat(); // 输出: Rex eats.
dog1.bark(); // 输出: Woof!

在这个例子中,Dog 的实例 dog1 既可以访问 Dog.prototype 上定义的 bark 方法,也可以访问 Animal.prototype 上定义的 eat 方法,因为 Dog.prototype 的原型是 Animal.prototype,这就形成了一个原型链。

总结

原型是一个对象,其他对象可以通过它实现属性和方法的继承。
原型链是一种机制,它提供了属性查找的路径,使得对象可以访问原型中定义的属性和方法。原型链的末端是 Object.prototype,所有的JavaScript对象都直接或间接地继承自 Object.prototype。
即:构造函数的.prototype(显示原型) 指向了(===)实例对象的.proto (隐式原型)

为什么 c instanceof String 与 d instanceof String 输入不一样???

在这里插入图片描述

① 结合上面instanceof 的含义内容,(它检查右侧构造函数的 prototype 属性是否存在于左侧对象的原型链上);由于 c 是通过字面量创建的是一个原始字符串。原始字符串不是一个对象,它仅仅只是 JavaScript 中的一种原始数据类型;
② String 对象:当d使用 new String(‘重庆’) 时,创建的是一个 String 对象。这个对象包装了字符串值,使得您能够在它上面调用各种字符串方法,但它是通过 String 构造函数生成的一个对象实例。
③ instanceof 操作符 检查的是一个对象的原型链上是否存在一个构造函数的 prototype 属性。因此,c instanceof String 返回 false,因为 c 是一个原始字符串,而不是一个对象。原始类型(如字符串字面量、数字、布尔值)不是通过构造函数创建的,因此它们的 instanceof String 检查会返回 false。
④相反,c instanceof String 返回 true,因为 d 是通过 String 构造函数创建的对象,它的原型链上确实存在 String.prototype。
⑤__proto__ 属性 是对象特有的属性,它指向该对象的原型。对于通过 new String(‘重庆’) 创建的 String 对象,d.proto 实际上指向了 String.prototype,这是所有 String 对象共享的原型。

虽然原始字符串不是对象,但当您尝试访问原始字符串的属性或方法时(比如调用字符串的 .length 属性或 .toUpperCase() 方法),JavaScript 引擎会临时将原始字符串通过内置的 String 对象包装起来,以便可以访问 String.prototype 上定义的方法。这是一个自动的、内部的包装过程,但并不改变原始字符串不是对象的事实。

因此,c instanceof String 和 d instanceof String 的不同结果,准确地反映了原始字符串和 String 对象之间的区别,以及 JavaScript 如何处理这两种不同类型的字符串的细节。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/726702.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单认识算法

什么是算法? 解决某个实际问题的过程和方法。 排序算法 1.冒泡排序 打印结果: 2.选择排序 打印结果: 优化选择排序:因为每一轮都需要以当前位置为基准与后面元素比较,太过繁琐,所以可以找到后面元素中较小…

Long使用==

1、背景:测试程序的时候发生了没数据的bug,于是在sevice层的一堆代码中调试,最后发现问题是在stream的filter方法中对两个Long使用造成的问题。 2、测试代码: Long a Long.valueOf(340);Long b Long.valueOf(340);System.out.println(a b)…

指针的学习4

目录 回调函数 qsort使用样例 使用qsort函数排序整形数据 使用qsort函数排序结构体 回调函数 回调函数就是一个通过函数指针调用的函数。如果把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时&#xf…

想打造爆款AI应用?ai虚拟数字人制作助你一臂之力

如今,随着人工智能技术的飞速发展,AI应用已经渗透到我们生活的方方面面。而在这个充满竞争和创新的时代,不少企业都在努力寻找打造爆款AI应用的机会。其中,AI虚拟数字人制作可以为他们提供一臂之力。 AI虚拟数字人制作是指利用人…

六氟化硫SF6气体怎么监测泄漏?

在当今的电力工程领域中,六氟化硫是一种应用广泛的电负性气体,从它发明至今已有百年历史。六氟化硫耐电强度为同一压力下氮气的2.5倍,击穿电压是空气的2.5倍,灭弧能力是空气的100倍,是一种优于空气和油之间的新-代超高压绝缘介质材料。 六氟化硫以其良好的绝缘性能和灭弧性能,在…

解决ts报错:类型“entry”上不存在属性“$AppTools”

uniapp ts 项目,已经将AppTools挂在了vue的原型上,但是在vue页面使用时报错,如图: 解决: 在项目根目录下的tsconfig.json文件添加如下配置: "include": ["src/**/*"],这样报错就消失…

使用移动云短信服务发送普通短信与模板短信

今天使用到了用移动云短信服务发送短信功能,顺便记录下 apid,secretKey和集团名称分别为如下图用户名,密码,所属分组 package com.keyou.proj.authentication.service.utils;import cn.hutool.crypto.SecureUtil; import cn.hutool.http.HttpRequest; import cn.hutool.json.J…

Vue.js+SpringBoot开发天然气工程业务管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、使用角色3.1 施工人员3.2 管理员 四、数据库设计4.1 用户表4.2 分公司表4.3 角色表4.4 数据字典表4.5 工程项目表4.6 使用材料表4.7 使用材料领用表4.8 整体E-R图 五、系统展示六、核心代码6.1 查询工程项目6.2 工程物资…

JuiceSSH结合Cpolar实现公网远程SSH访问内网Linux系统

文章目录 1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? cpolarJuiceSSH 实现手机端远程连接Linux虚拟机(内网穿透,手机端连接Linux虚拟机) …

【Python】新手入门(8):什么是迭代?迭代的作用是什么?

【Python】新手入门(8):什么是迭代?迭代有什么应用? 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】…

SpringBoot集成ElasticSearch(ES)

ElasticSearch环境搭建 采用docker-compose搭建,具体配置如下: version: 3# 网桥es -> 方便相互通讯 networks:es:services:elasticsearch:image: registry.cn-hangzhou.aliyuncs.com/zhengqing/elasticsearch:7.14.1 # 原镜像elasticsearch:7.…

基于Mindspore,通过Resnet50迁移学习实现猫十二分类

使用平台介绍 使用平台:启智AI协作平台 使用数据集:百度猫十二分类 数据集介绍 有cat_12_train和cat_12_test和train_list.txt train_list.txt内有每张图片所对应的标签 Minspore部分操作科普 数据集加载 Mindspore加载图片数据集就直接调整成这种…

什么?!你居然连个内存泄漏都排查不出来

公众号:程序员白特,欢迎一起交流学习~ 在日常的业务开发中,偶尔会出现内存泄漏的情况,那么我们该怎么排查呢?现在跟着文章一起学习下吧~ 使用Chrome devTools查看内存情况 打开Chrome的无痕模式,以屏蔽Ch…

k个一组反转链表

题目 题目链接 . - 力扣&#xff08;LeetCode&#xff09; 题目描述 代码实现 class Solution { public:ListNode* reverseKGroup(ListNode* head, int k) {if(k 1) return head;//特殊情况ListNode *cur head;for(int i 1; i < k; i){if(cur nullptr ||cur->nex…

Seurat 中的数据可视化方法

本文[1]将使用从 2,700 PBMC 教程计算的 Seurat 对象来演示 Seurat 中的可视化技术。您可以从 SeuratData[2] 下载此数据集。 SeuratData::InstallData("pbmc3k")library(Seurat)library(SeuratData)library(ggplot2)library(patchwork)pbmc3k.final <- LoadData(…

【wine】解决 0024:fixme:msctf:KeystrokeMgr_TestKeyUp STUB:(00A3D508)

故障日志 0024:fixme:msctf:KeystrokeMgr_TestKeyUp STUB:(00A3D508) AI分析 这些消息表示Wine对IE内核组件以及IME&#xff08;Input Method Editor&#xff0c;输入法编辑器&#xff09;的支持不完全。特别是涉及文本输入、拖放事件、属性变化通知等功能。 解决 winetrick…

【论文阅读】单词级文本攻击TAAD2.2

TAAD2.2论文概览 0.前言1-101.Bridge the Gap Between CV and NLP! A Gradient-based Textual Adversarial Attack Frameworka. 背景b. 方法c. 结果d. 论文及代码 2.TextHacker: Learning based Hybrid Local Search Algorithm for Text Hard-label Adversarial Attacka. 背景b…

python爬虫(一)

一、python中的NumPy模块&#xff08;数据的存储和处理&#xff09; 这里是下载完成之后的表现 &#xff08;1&#xff09;创建数组 1、使用array&#xff08;&#xff09;函数创建数组 使用array函数可以创建任意维度的的数组 下面是一个创建二维数组的代码示例 下面是代码…

java集合(泛型数据结构)

1.泛型 1.1泛型概述 泛型的介绍 泛型是JDK5中引入的特性&#xff0c;它提供了编译时类型安全检测机制 泛型的好处 把运行时期的问题提前到了编译期间 避免了强制类型转换 泛型的定义格式 <类型>: 指定一种类型的格式.尖括号里面可以任意书写,一般只写一个字母.例如: …

【力扣 - 三数之和】

题目描述 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。…