JS知识点(包括原型,原型对象,数据类型,数据类型的检测)

news2024/12/25 9:35:33

目录

1、JavaScript有哪些数据类型,它们的区别?

2、基本数据类型和引用数据类型地区别:

 3、数据类型检测的方式有哪些:

4、判断数组的方式有那些?

5、null和undefined区别:

6、为什么typeOf null得到object而不是null

7、null == undefined得到true而 null === undefined得到false?

8、instanceOf操作符的实现原理及实现


1、JavaScript有哪些数据类型,它们的区别?

 1️⃣:基本数据类型:number、string、boolean、Undefined、NaN、Symbol

 2️⃣:引用数据类型:Object、Array、function

基本数据类型:放在内存的栈中

引用类型数据:放在内存的堆中

3️⃣:区别

NaN是JS中的特殊值,表示非数字,他不等于任何值,包括自身,在布尔运算时被当作false,NaN与任何值运算的结果都是NaN

Symbol和BigInt是ES6中新增的数据类型:

- Symbol代表创建独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题

- BigInt可以安全地存储和操作大整数,即使这个数已经超过Number能狗表示地安全整数范围。

2、基本数据类型和引用数据类型地区别:

1️⃣:基本数据类型是按值访问的,操作保存在变量中的实际的值。

2️⃣:基本数据类型的值是不可变的,变量名只是指向变量的一个指针,变量重新赋值改变的是指针的指向,该变量是不变的。

3️⃣:基本数据类型不可以添加属性和方法,但是引用类型可以。

4️⃣:基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值,会在变量对象上创建一个新值。

变量对象:变量对象是JS中内部的数据结构,用于存储在执行上下文声明的变量和函数

5️⃣: 基本数据类型的比较是值的比较,引用类型的比较是引用的比较

引用类型的比较是比较引用地址,如果有两

个对象即使key和value都相同,但是当用(===)全等符号比较时,返回的是false。

 3、数据类型检测的方式有哪些:

 1️⃣:typeOf

typeOf对数组、对象、null,function都会判断为object

JS将数组和对象视为对象,将null视为一个特殊的空对象指针。

数组是一种特殊的对象,其键名是以数字为下标的一组有序属性。

  2️⃣:instance of

function Foo = {}
let fo = new Foo()
console.log(fo instanceOf Foo)

instanceof只能判断对象的类型,无法判断基本数据类型。

内部运行机制是判断其原型链中能否找到该类型的原型。

instanceof可以用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性

3️⃣:constructor

constructor有两个作用:

- 是判断数据的类型

- 是对象实例通过constructor对象访问它的构造函数

❗❗ :如果创建一个对象改变它的原型,constructor就不能用来判断数据类型

function Fn(){};
Fn.prototype = new Array();
var f = new Fn();
console.log(f.constructor===Fn); // false
console.log(f.constructor===Array); // true

4️⃣:Object.prototype.toString.call()

var a = Object.prototype.toString
console.log(a.call(2)) //Number
console.log(a.call(true)) //Boolean

obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样:

原因:toString是Object的原型方法,而Array、function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toStrin()方法时,调用的是对应的重写之后的toString方法,而不会去调用Object上原型toString方法。

4、判断数组的方式有那些?

 1️⃣:通过Object.prototype.toString.call()做判断

Object.prototype.toString.apply/call(变量) === [OBJECT ARRAY]

  2️⃣:通过原型链做判断

const ary = new Array()
console.log(ary.__proto__ === Array.prototype);

3️⃣:通过ES6的Array.isArray()方法做判断

const ary = new Array()
console.log(Array.isArray(ary));

4️⃣:通过instanceOf做判断

const ary = new Array()
console.log(obj instanceof Array);

5️⃣:通过Array.prototype.isPrototypeOf做判断

const ary = new Array()
console.log(Array.prototype.isPrototypeOf(ary));

5、null和undefined区别:

🔰undefined:

  • 使用var或let声明了变量但没有初始化
  • 访问对象上不存在的属性
  • 未声明的变量使用typeof返回的依旧是undefined
  • 函数定义了形参,但没有传递形参
  • 使用函数的返回值,当没有return操作符时,就默认返回一个原始的状态,就是undefined,表明函数的返回值未被定义。
  • 使用void对表达式求值:void操作符对任何表达式求值都返回undefined

🔰:null代表空对象指针

区别:

- 不要对一个变量显示的赋值undefined,当需要变量需要保存对象,直接赋值为null即可

- 当对这两种类型使用typeOf进行判断时,null会返回object,undefined依然返回的是undefined。

- undefined是为了明确空对象指针和未初始化变量的区别

6、为什么typeOf null得到object而不是null

因为JS中不同对象在底层都表示为二进制,而JS中会把二进制的前三位都为0判断为object类型,而null的二进制表示全都是0,自然前三位也是0, 所以执行typeof时会返回object。

7、null == undefined得到true而 null === undefined得到false?

  要比较null和undefined相等性之前,不能将null和undefined转化为其他类型值再比较,但null==undefined得到的是true。是因为undefined值是派生自null值。ECMA规定对二者进行相等性测试返回ture。

8、instanceOf操作符的实现原理及实现

instanceOf用于判断构造函数的prototype属性是否出现在对象的原型链上:
fo  instanceOf Foo 

左边fo是右边Foo构造函数的实例化对象

function myInstanceOf(left,right){
    //获取对象的原型对象
   let proto = Object.getPrototypeOf(left)
   //获取构造函数的prototype属性
   let prototype = right.prototype
   //判断构造函数的prototype对象是否在对象的原型链上
   while(true){
    if(!proto) return false
    if(proto === prototype) return true
   //如果么有找到,就继续从原型上找
    proto = Object.getPrototypeOf(proto)
    }
}
    

 🔰知识点补充:

1. getPrototypeOf():

Object.getPrototypeOf() 方法返回的为对象,该对象就是传入对象的原型对象

const prototype1 = {};
const object1 = Object.create(prototype1); //创建新对象

console.log(Object.getPrototypeOf(object1) === prototype1);

💨 Object.getPrototypeOf()可以方便的取得原型对象上自定义属性的值

function Person() { }
        Person.prototype.name = 'CMY'
        let newPerson = new Person()
        console.log(Object.getPrototypeOf(newPerson).name); 输出为CMY

2. setPrototypeOf()方法:

语法:

Object.setPrototypeOf(obj, prototype)

参数:

- obj :要设置其原型的对象。

- prototype:该对象的新原型(一个对象或 null)。

   let biped = {numLegs:2}
        let person = {name:'CMY'}
        Object.setPrototypeOf(person,biped)
        console.log(Object.getPrototypeOf(person) === biped); 输出为true

3 原型对象,原型

⏩:原型对象就是prototype,而prototype是一个对象,所以称为原型对象

⏩:对象的原型,指的就是该对象的prototype属性

⏩:只要创建一个函数,就会按照特定的规则为这个函数创建一个prototype属性。默认情况下,所有的原型对象自动获得一个constructor的属性

  function Person() { }
        console.log(Person.prototype);

输出的结果:

⏩:正常的原型链都会终止于Object的原型对象,Object原型的原型是NULL

⏩:构造函数实例是通过__proto__链找到原型对象

 function Person() { }
        let newPerson = new Person()
        console.log(newPerson.__proto__);

     构造函数通过prototype属性链接到原型对象。

⏩:实例构造函数没有直接的关系,与构造函数的原型对象有直接联系

 function Person() { }
        let newPerson = new Person()
        console.log(newPerson.__proto__ === Person.prototype); 输出true

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

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

相关文章

22个提升生产力的工具推荐,稳了

子曰:工欲善其事,必先利其器。 本文给大家推荐22个提高生产力的工具,总有一款符合你的需求。😄😄😄 提高生产效率工具推荐 滴答清单/Todoist文件检索利器:Everything文件管理软件-Allen Explor…

基于SpringBoot的大学生租房系统

背景 大学生租房系统设计的目的是建立一个高效的平台,采用简洁高效的Java语言与Mysql数据库等技术,设计和开发了本大学生租房系统设计。该系统主要实现了用户和房主通过系统注册用户,登录系统后能够编辑自己的个人信息、查看首页&#xff0c…

【电子学会】2023年03月图形化三级 -- 猫猫的儿童节

猫猫的儿童节 儿童节到了,给小猫绘制一个七彩的气球。 1. 准备工作 (1)保留小猫角色; (2)选择“Button2”角色,添加文字“开始”; (3)默认白色背景。 2…

有人抱怨Android找不到工作,有人却收到了好几个Offer~

不知不觉,往年常说的面试黄金季就这样过去了,相信现在很多人都会抱怨说,现在是市场岗位缩水裁员季。有人抱怨,自然也有人喜悦,有失业人群在,自然就业人群也有,有人想找一份合理工作很难&#xf…

C高级(day1)

作业: 初始工作路径不在家目录下,在不切换路径的情况下,在家目录下创建一个subdir目录,在subdir这个目录下,创建subdir1和subdir2,并且把/etc/passwd拷贝到subdir1中,把/etc/group文件拷贝到subdir2中&…

David Silver Lecture 5: Model-Free Control

1 Introduction 1.1 内容 上一章是对一个unknown MDP进行value function的预测,相当于policy evaluation。这一章是对unknown MDP找到一个最优的policy, optimise value function. 1.2 On and Off-Policy Learning On-policy learning learn on the…

[oeasy]python0050_动态类型_静态类型_编译_运行

动态类型_静态类型 回忆上次内容 上次了解了 帮助文档的 生成 开头的三引号注释 可以生成 帮助文档文档 可以写成网页 python3 本身 也有 在线的帮助手册 目前的程序 提高了 可读性 有什么方法 可以让程序 更可读么?🤔 变量名 首先 在变量名上想办…

opencv_c++学习(六)

一、视频加载与摄像头调用 视频、摄像头加载 VideoCapture(filename, CAP_ANY)对以上实例解释如下: 若读取的为本地视频,则filename为视频名称,若读取的是摄像头数据,则为int类型的摄像头id。 视频属性的获取 视频属性可以通过…

手握美团offer,结果背调红灯,哭了....

相信很多人都会包装简历,尤其是工作经历,不过也有人会填一下虚假的背景信息,比如公司leader或HR,小公司没有实力过多进行背调,但是大企业就不同了,他们有方法了解到实际的情况。 背调包括候选人以往的经历…

RHCSA之Linux的安装步骤

目录 RHCSA之环境配置 需要的软件 VMwareWorkstation安装 1.打开VMwareWorkstation安装包 2.进入安装界面点击下一步 3. 在我接受许可协议打 √ 后,点击下一步 4.在安装位置选择更改 5. 更改目标安装位置,点击确定 6.疯狂点击下一步 8.点击安装 9.…

DDIM模型代码实现

背景 前面已经出了一系列的文章来介绍大模型、多模态、生成模型。这篇文章会从更微观和更贴近实际工作的角度下手。会给大家介绍下前面讲到的diffuiosn model具体怎么来实现。文章结构如下: 1.介绍Diffusion Model包括哪些零部件,这些零部件衔接关系 …

jvm梳理

jvm是一个虚拟机,用于运行java代码,类的编译到运行主要为一下: 通过javac.exe编译,产生class文件,然后通过类加载器加入jvm: 类加载器: 引导加载器:使用c编写,负责java的…

【高项】项目绩效域,信息文档配置与变更,标准与规范管理(第4版教材第18-19,24章,项目规范知识)

文章目录 1、配置与变更管理1.1 信息文档1.2 配置管理1.3 变更管理 2、标准规范(合同管理,知识产权)2.1 合同管理2.2 知识产权和标准规范(合同法,招投标法,著作权法,政府采购法)2.3 …

力扣算题Day17

110.平衡二叉树(递归很难理解,思维很重要) 下面才是做二叉树的一种正确思维: copy他人运行代码: class TreeNode:def __init__(self, val0, leftNone, rightNone):self.val valself.left leftself.right right class Solution:def judgeDepth(self, …

自底向上分析概述

4-8自底向上的分析概述_哔哩哔哩_bilibili (开始准备期末考试)(可菜) 移入-规约分析: 每次归约的符号串称为“句柄”,一旦句柄在栈顶形成,我们立即将它规约,因此每一步规约都是最左…

[JAVA EE]创建Servlet——继承HttpServlet类笔记2

创建Servlet的方式之一:继承HttpServlet类(经常使用) 如果请求方式为get请求则调用doGet()方法; 如果请求方式为post请求则调用doPost()方法。 开发中通常不会在两个方法中写重复的代码,会造成代码冗余。 Request 一、获取请求…

[前端基础]websocket协议

(1)websocket websocket(简写为ws),是一种轻量化的协议,经过最开始的握手阶段以后,前后端之间允许自由地发送信息不受限制(建议发送json字符串).虽然理论上这个东西是属于协议内容,但是已经被疯狂封装得像框架一样了. websocket协议具有天然的优势处理前端多线程并发,并且只需…

Android---Glide的基本使用

目录 Glide 基本使用 Glide 进阶 Glide 是一个快速高效的 Android 图片加载库,可以自动加载网络、本地文件,app 资源中的图片,注重于平滑的滚动。 Glide 第一次加载一张图片后,就会自动帮我们把这张图片加入到内存中进行管理。…

Linux内核同步之RCU机制基础

Why RCU 1. 中断与抢占 当一个进程被时钟中断打断后,kernel运行tick中断处理程序(一般是top half),中断处理程序运行结束后,有两种情况: 之前的进程获得CPU继续运行。 另一个进程获得了CPU开始运行&…

AI智慧安监:打电话/玩手机智能检测,构筑安全生产新防线

1、方案背景 在油库、加油站、化工厂等场景中,安全生产是首要的监管问题,因为有易燃物品的存放,打电话很容易引起火灾爆炸等安全事故,造成巨大的生命和财产损失。因此,对人员行为的监管是安全的关键,在一些…