一些忘了的东西(二)

news2024/10/7 11:23:10

Symbol出现的原因/作用

①作为属性 避免属性冲突重复,就是使用它来表示唯一值;
问题是我们什么情况下 要保障属性一定不冲突重复 覆盖呢?
在vue里 有this.$ parent ,this.$ options ,this.$ set 这些,使用$命名开头就是想通过命名约定来减少重复覆盖,
可是通过命名约定没有强制执行,还是存在被新生低级程序员覆盖的可能
在没有Symbol之前 采用 Object.freeze 冻结一个对象 也可以做到 一定不会覆盖修改属性的问题,但是它带来的问题就是失去了灵活性,只想一个属性不被覆盖重复,结果把整个对象都冻结了,这得不偿失。

还要Object.defineProperty(obj,‘a’,{ writable:false }) 这样通过屏蔽一个属性的可写性 来达到不能覆盖一个属性的目的,不好的地方就是麻烦。用symbol最简单。
** 作用一:防止变量名冲突,挂在window下的全局方法属性对象等,还有全局状态等,有很多地方需要保障唯一性。**

//订单已付款 
if(orderStatus==='payed'){
//就干点啥
}
//订单已经取消 就干点啥
if(orderStatus==='cancel'){
//就干点啥
}

这个写法存在的问题是什么呢
1.payed cancel字符串可能在多个地方使用时 书写时出现错误;
2.字符串可能会需要修改,认为它表意不准确
3.别人难以一看就知道 orderStatus到底有哪些状态
改成如下:

const OrderStatus={
payed:Symbol('payed'),
cancel:Symbol('cancel')
}
//订单已付款 
if(orderStatus===OrderStatus.payed){
//就干点啥
}
//订单已经取消 就干点啥
if(orderStatus===OrderStatus.cancel){
//就干点啥
}

** 作用二:替代字符串 ,规范代码,减少错误。**

BigInt的作用和使用

作用:
BigInt 是一种数字类型的数据,它可以表示任意精度格式的整数,使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了 Number 能够表示的安全整数范围。
使用:

  let max = Number.MAX_SAFE_INTEGER;//Number的最大安全整数
  console.log(max);
  console.log(max + 1);
  //超过number的最大数值范围,运算就会出错
  console.log(max + 2);
  
  console.log(BigInt(max));
  //BigInt数据类型不能直接和普通数据类型进行运算
  console.log(BigInt(max) + BigInt(1));
 console.log((BigInt(max) + BigInt(2)));
 console.log((BigInt(max) + BigInt(2)).toString());

bigint后面都有一个n,区分Number类型,bigint上可以调用tostring方法转为字符串
在这里插入图片描述

现在typeof symbol和typeof bigint返回symbol和bigint

对堆和栈的理解

1.stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小也不一定会自动释放
2.引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象
3.基本数据类型存栈,引用数据类型存堆
在这里插入图片描述

instanceof

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

可以看到,instanceof只能正确判断引用数据类型,而不能判断基本数据类型。instanceof 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

constructor判断类型

console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true

constructor有两个作用,一是判断数据的类型,二是对象实例通过 constrcutor 对象访问它的构造函数。需要注意,如果创建一个对象来改变它的原型,constructor就不能用来判断数据类型了:
这里刨析下(2).constructor === Number)或

var str1 = "oujm";
var str2 = str1.substring(2);

一个基本类型不应该有constructor和substring这些属性和方法,那为什么我们可以调用这些呢?
我们忽略了,在JS的世界中有一种对象类型叫包装对象
实际上,每当读取一个基本类型的时候,后台就会创建一个对应的基本包装类型的对象。
再来看上面那个?,str1 很明显是一个基本类型实例,问题就出在 str1.substring(2) 字符串怎么会有方法。其实,为了让我们更好的操作基本类型的实例对象,后台进行了一系列的操作:

创建String的实例
在实例上调用指定的方法
销毁这个实例

从这里能够看到,一般的引用类型和包装类型唯一的区别就在于对象的生命周期。包装类型的对象生命周期很短,只有代码执行的一瞬间,然后就被销毁了,所以这也就是为什么我们不能在运行的时候为基本类型的值添加属性和方法。
这也解答了我曾经的一个疑问

var str1 = "oujm";
var str2 = new String("ethan");

console.log(str1.__proto__ === str2.__proto__); // true
console.log(str1 instanceof String); // false 
console.log(str2 instanceof String); // true 

同样的道理,在调用__proto__ 属性的瞬间,也是使用new String() 先来实例化一个对象,所以那一瞬间他们的构造函数以及原型对象是相同的,但也仅仅是那一瞬间。

Object.prototype.toString.call()和直接调用toString的区别

这是因为toString是Object的原型方法,而Array、function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串…),而不会去调用Object上原型toString方法(返回对象的具体类型),所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object原型上的toString方法。

判断数组的方法

Object.prototype.toString.call()
obj.proto === Array.prototype;同instanceof
通过ES6的Array.isArray()做判断
a.constructor===Array

typeof null 的结果为什么是Object?

在 JavaScript 第一个版本中,所有值都存储在 32 位的单元中,每个单元包含一个小的 类型标签(1-3 bits) 以及当前要存储值的真实数据。类型标签存储在每个单元的低位中,共有五种数据类型:

000: object   - 当前存储的数据指向一个对象。
  1: int      - 当前存储的数据是一个 31 位的有符号整数。
010: double   - 当前存储的数据指向一个双精度的浮点数。
100: string   - 当前存储的数据指向一个字符串。
110: boolean  - 当前存储的数据是布尔值。

如果最低位是 1,则类型标签标志位的长度只有一位;如果最低位是 0,则类型标签标志位的长度占三位,为存储其他四种数据类型提供了额外两个 bit 的长度。
有两种特殊数据类型:

undefined的值是 (-2)30(一个超出整数范围的数字);
null 的值是机器码 NULL 指针(null 指针的值全是 0)

那也就是说null的类型标签也是000,和Object的类型标签一样,所以会被判定为Object。

valueOf作用

返回给定对象的原始值
在这里插入图片描述
在这里插入图片描述
也可以使用valueOf方法将包装类型倒转成基本类型:

var a = 'abc'
var b = Object(a)
var c = b.valueOf() // 'abc'

箭头函数继承来的this指向永远不会改变,call()、apply()、bind()等方法不能改变箭头函数中this的指向,箭头函数没有prototype

var id = 'GLOBAL';
Object.prototype.id='111'
var obj = {
  id: 'OBJ',
  a: function(){
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};
new obj.a()  // 111
new obj.b()  // Uncaught TypeError: obj.b is not a constructor

new操作最后一步注意

(1)首先创建了一个新的空对象
(2)设置原型,将对象的原型设置为函数的 prototype 对象。
(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)
(4)判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。
判断return的result逻辑

result && (typeof result === "object" || typeof result === "function");

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

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

相关文章

BLIP使用教程

文章目录 准备测试示例一示例二: 结论源代码 原理篇: BLIP2-图像文本预训练论文解读 准备 如果无网络需提前下载相关模型 安装torch、transformers pip install torch trtransformers测试 测试blip基于图片生成文本描述能力(Caption&…

《嵌入式系统》知识总结8:寄存器编程方式操纵GPIO

方式1: 查手册找到相关寄存器的地址,自行编写代码,定义指针指向该地址,并根据需要进行寄存器读写。 举例: //方式1举例:自定义GPIOB_ODR寄存器 #define GPIOB_ODR (*(volatile unsigned int *)0x40010C0…

Vivado时序约束基础

今天这篇博客,笔者向大家简单介绍Xilinx FPGA中的Vivado时序约束基础知识,也为后续的学习打好铺垫。 Xilinx Design Constraints (XDC) 概述 • XDC 在本质上就是Tcl 语言,但其仅支持基本的Tcl 语法,如变量、列表和运算符等等&a…

Go 语言基础

文章目录 Go 语言基础1. 程序基础2. 数据类型3. 字符串与复合数据类型4. 函数、方法、接口和反射5. 并发编程(核心重点)6. 包和代码测试7. 综合实战案例框架部分探索深度 Go 语言基础 1. 程序基础 了解常量和遍历【const var 关键词】 : 初始化以及赋值…

微服务如何治理

微服务远程调用可能有如下问题: 注册中心宕机; 服务提供者B有节点宕机; 服务消费者A和注册中心之间的网络不通; 服务提供者B和注册中心之间的网络不通; 服务消费者A和服务提供者B之间的网络不通; 服务提供者…

Redux And Redux Toolkit

笔记介绍了react_redux和redux_toolkit react_redux只介绍了原理图,为理解redux_toolkit做铺垫。 本笔记是对一下课程做的输出,若大家有不理解的地方,可看完课程后,再借助课程理解笔记内容,同时也鼓励大家对自己的听…

【环境搭建】40系一些奇奇怪怪的环境问题

【设备信息】我的设备是4070ti,支持cuda12.0,但是目前用的还是11.7 1)fatal error: cusparse.h: No such file or directory 因为cuda版本和改名的原因,这个在cuda版本中比较有效的解决办法是: sudo apt search libcusparse得到…

matplotlib实操

matplotlib实操 问题1.分析离网用户的基本特征:包括但不限于地市、年龄、网龄、融合类型、套餐分布、用户价值等,年龄、网龄、用户价值(ARPU)、MOU、DOU;数据预处理处理异常值地市分布县级分布年龄分布网龄分布性别与年龄分布融合类型套餐分布用户价值(ARPU)MOU(每用…

vulnhub靶场之hackme2-DCHP

Burp联动xray 1.信息收集 探测存活主机,输入:netdiscover -r 192.168.239.0/24 ,发现192.168.239.179存活。 对目标主机192.168.239.179进行端口扫描,发现存活22、80端口。 在浏览器上输入:http://192.168.239.179&a…

axios解决跨域问题

Vue3中使用axios访问聚合的天气API,出现跨域问题,需要在前端进行一些配置: 首先是修改vue.config.js: const { defineConfig } require(vue/cli-service) module.exports defineConfig({transpileDependencies: true,devServe…

vue2.0基础

文章目录 VUEVue2.0vue特点事件处理键盘事件计算属性监听watch深度监视绑定class样式条件渲染列表渲染列表过滤列表排序Vue.set()的使用Vue检测数组的原理Vue监测原理总结指令生命周期Vue componentVue配置文件vue.config.JS其他:组件自定义事件组件自定义事件解绑全…

【Mysql数据库从0到1】-入门基础篇--用户与权限管理

【Mysql数据库从0到1】-入门基础篇--用户与权限管理 🔻一、Mysql 用户管理1.1 🍃 Mysql服务器登录1.2 🍃 用户创建1.3 🍃 用户修改1.4 🍃 用户删除1.5 🍃 用户密码修改1.6 🍃 用户密码管理 &…

深入浅出C语言—【函数】上

目录 1.函数的概念 2.C语言函数的分类 2.1 库函数 2.1.1 strcpy库函数举例学习方式 2.1.2 库函数扩展知识 2.2 自定义函数 2.2.1求两个整数中的较大值 3. 函数的参数 3.1 实际参数(实参) 3.2 形式参数(形参) 4. 函数的…

Linux安全之账户安全

账户安全 Linux用户账户概述: 用户账号 超级用户root系统用户普通用户组账号 基本组(私有组----每一个私有组里面只有一个用户)附加组(公共组----每一个用户都可以加入到这个组里面) UID和GID: UID&…

【minio】Ubuntu安装MinIO文件服务器并通过C++上传下载

😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍MinIO的使用。 学其所用,用其所学。——梁启超 欢迎来到我的博客,一起学习知识,共同进步。 喜欢的朋友可以关注一下,下次更新不迷路&…

pandas速学-DataFrame

一、理解DataFrame 他是一个表格结构:DataFrame 是一个表格型的数据结构 他是有序的,不同值类型:它含有一组有序的列,每列可以是不同的值类型(数值、字符串、布尔型值)。 他可以被看做一个由series组成的…

chatgpt赋能python:PythonIP匹配

Python IP匹配 随着互联网的不断发展,IP地址已成为人们最常使用的一种网络标识。在网络分析和开发中,经常会用到IP地址的相关操作,如IP地址的匹配。Python作为一种性能比较好的语言,也可以很好地完成IP地址的匹配工作。本文将介绍…

【学习日记2023.6.4】之 Linux入门

1. Linux简介 1.1 主流操作系统 不同领域的主流操作系统,主要分为以下这么几类: 桌面操作系统、服务器操作系统、移动设备操作系统、嵌入式操作系统。接下来,这几个领域中,代表性的操作系统是那些? 1). 桌面操作系统 操作系统特…

数据链路层:虚拟局域网(VLAN)

数据链路层:虚拟局域网(VLAN) 笔记来源: 湖科大教书匠:虚拟局域网(VLAN)概述 湖科大教书匠:虚拟局域网(VLAN)实现机制 声明:该学习笔记来自湖科大…

mybatis源码学习之mybatis执行流程分析

Mybatis执行流程分析 mybatis全局配置文件 mybatis全局配置文件中涉及的标签如下图所示 配置文件解析 public static void main(String[] args) throws IOException {// 读取配置文件InputStream is Resources.getResourceAsStream("org/apache/ibatis/builder/Mappe…