关于 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.hqwc.cn/news/522298.html

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

相关文章

【C++】十大排序算法之 归并排序 快速排序

本次介绍内容参考自:十大经典排序算法(C实现) - fengMisaka - 博客园 (cnblogs.com) 排序算法是《数据结构与算法》中最基本的算法之一。 十种常见排序算法可以分为两大类: 比较类排序:通过比较来决定元素间的相对次序…

MySQL面试题-锁(答案版)

锁 1、MySQL 有哪些锁? (1)全局锁 加了全局锁之后,整个数据库就处于只读状态了,这时其他线程执行以下操作,都会被阻塞: 对数据的增删改操作,比如 insert、delete、update等语句&…

UDP实现文件的发送、UDP实现全双工的聊天、TCP通信协议

我要成为嵌入式高手之3月7日Linux高编第十七天!! ———————————————————————————— 回顾 重要程序 1、UDP实现文件的发送 发端: #include "head.h"int main(void) {int sockfd 0;struct sockaddr_i…

每日一练 | 华为认证真题练习Day195

1、下面是路由器RTD的部分输出信息,关于输出信息描述正确的是: A. 该接口使能的IGMP版本是版本1。 B. 该接口的IGMP状态是DOWN的。 C. 该接口上配置发送IGMP查询消息的时间间隔60S D. 该接口上IGMP查询报文中包含的最大响应时间0s 2、下面是一台路由器…

Leetcode : 1137. 高度检查器

学校打算为全体学生拍一张年度纪念照。根据要求,学生需要按照 非递减 的高度顺序排成一行。 排序后的高度情况用整数数组 expected 表示,其中 expected[i] 是预计排在这一行中第 i 位的学生的高度(下标从 0 开始)。 给你一个整数…

TypeScript 哲学 - Object Types

readonly 修饰对象和数组的 双向可分配性是不同的 Combind types 交叉类型对 值类型可以识别 never 但是 Object 类型识别不了 Tuple

白话模电:1.绪论与半导体(考研面试常问问题)

一、什么是信号?什么是电信号? 信号反映消息的物理量,电信号是反应电压或电流变化的物理量。 二、什么是模拟信号?什么是数字信号? 模拟信号是时间和数值上均连续的信号,数字信号是时间和数值上均离散的信号…

Python中的泛型编程

目录 1. 前言1.1 函数模板1.2 类模板1.3 Python中的泛型 2. TypeVar2.1 函数模板与类模板2.2 构造函数2.3 约束2.4 协变与逆变 Ref 1. 前言 泛型编程的引入主要是为了解决代码重用的问题。在没有泛型的情况下,如果你想要实现一个功能(比如排序或查找&am…

Redis与 Memcache区别

Redis与 Memcache区别 1 , Redis 和 Memcache 都是将数据存放在内存中,都是内存数据库。不过 Memcache 还可用于缓存 其他东西,例如图片、视频等等。 2 , Memcache 仅支持key-value结构的数据类型,Redis不仅仅支持简单的key-value类型的数据&…

记一次edu证书站的挖洞经历

前言 前几天在网上冲浪的时候无意间看到了一个Edu的站点,是一个很常见的类似MOOC的那种在线学习系统,对外开放,同时有注册和登录功能。对于我这种常年低危的菜鸡来说,这是最愿意看到的,因为一个Web网站有了登录功能&a…

【C++】浅谈 vector 迭代器失效 深拷贝问题

目录 前言 一、底层空间改变 【错误版本1】 🌟【解答】正确版本 ​ 【错误版本2】 🌟【解答】正确版本 二、指定位置元素的删除操作--erase 【错误版本1】 🌟【解答】 【错误版本2】 🌟【解答】 三、深拷贝问题 前言 迭…

什么是智慧公厕?智慧公厕设备有哪些

在现代社会,公共厕所作为城市基础设施的重要一环,承载着城市卫生、居民生活品质的重要责任。然而,传统公厕存在的问题仍然不可忽视:脏乱差、资源浪费、安全隐患等等。 为了解决这些问题,针对公共厕所日常使用、运营管…