js的深拷贝和浅拷贝?啥情况讲解下??底层堆栈空间??object.prototype.toString.call(),还有bind,的具体使用?

作者:神の愛日期:2026/4/19

js的深拷贝和浅拷贝?啥情况讲解下??底层堆栈空间??object.prototype.toString.call(),还有bind,的具体使用?还有instanceof对象的实例,还有哪个方法可以直接获取到我定义的数据是什么类型的。哟哪几种数据类型?包括哪些?

1. 堆(Heap)与 栈(Stack):内存的真相

在 JS 里,内存被分为两块:

  • 栈(Stack):空间小、速度快。存放基本数据类型(String, Number, Boolean, Null, Undefined, Symbol, BigInt)和引用类型的地址
  • 堆(Heap):空间大。存放引用数据类型(Object, Array, Function)。

2. 深拷贝 vs 浅拷贝

这是由于“堆栈分离”导致的现象:

  • 浅拷贝(Shallow Copy)
    • 情况:只复制了栈里的“地址”。
    • 后果:新旧对象指向同一个堆空间。改了新对象的属性,旧对象的也跟着变。
    • 实现Object.assign(){...obj}arr.slice()
  • 深拷贝(Deep Copy)
    • 情况:在堆里开辟了一块全新的空间,把内容全写进去。
    • 后果:两者完全独立,互不影响。
    • 实现
      1. JSON.parse(JSON.stringify(obj))(简单粗暴,但不能处理函数和循环引用)。
      2. 递归手写(面试最爱)。
      3. structuredClone(obj)(现代浏览器原生支持)。

3. 类型检测:到底我是谁?

JS 有 8 种 数据类型:

  • 基本类型Number, String, Boolean, Undefined, Null, Symbol, BigInt
  • 引用类型Object(包括 Array, Function, Date 等)。
怎么获取准确类型?
  1. typeof:快,但对 nullArray 都会返回 "object"(这是 JS 的陈年 BUG)。
  2. instanceof:判断对象实例是否属于某个构造函数(顺着原型链找)。比如 [] instanceof Arraytrue
  3. [Object.prototype.toString.call()](function toString() { [native code] })终极方案): 它可以直接穿透一切伪装,告诉你的底层“户籍”。
    JavaScript
1Object.prototype.toString.call([]);      // "[object Array]"  
2Object.prototype.toString.call(123);     // "[object Number]"  
3Object.prototype.toString.call(null);    // "[object Null]"  
4Object.prototype.toString.call(new Date()); // "[object Date]"  

4. bind 的具体使用

bindcallapply 的兄弟,但它最特别。

  • 作用:创建一个新函数,强制把这个新函数的 this 绑定到你指定的对象上。
  • 区别call/apply 会立即执行函数,而 bind 是返回一个新函数,不立即执行

实战场景: 在 Vue2 或者是旧的 React 类组件里,防止方法里的 this 丢失。

JavaScript

1const device = {
2  name: '感应器',
3  getName: function() {
4    console.log(this.name);
5  }
6};
7
8const unboundGet = device.getName;
9unboundGet(); // undefined (因为此时 this 指向全局)
10
11const boundGet = device.getName.bind(device);
12boundGet(); // '感应器' (强制锁定了 this)
13

5. instanceof 的底层原理

它其实就是在玩**“连连看”**。 L instanceof R 的原理是:看 L 的 [__proto__]([object Object]) 是不是等于 Rprototype。如果不等于,就继续往 L 的爷爷辈([__proto__.__proto__]([object Object]))找,直到找到或者到头为止。

js的深拷贝和浅拷贝还不明白??本博主教育你!!

1. 核心:为什么会有这两种拷贝?

这得从 JS 的内存管理说起。JS 把数据存在两个地方:栈(Stack)堆(Heap)

  • 基本类型(数字、字符串等):直接存在里,值就在那。
  • 引用类型(对象、数组):内容存在里,但在里存了一个“地址”(就像一把指向仓库的钥匙)。

2. 浅拷贝(Shallow Copy):只复制钥匙

当你做浅拷贝时,JS 只是在栈里又配了一把一模一样的钥匙

  • 结果:两个变量指向堆里的同一个“仓库”。
  • 后果:你拿着新钥匙进仓库改了东西,老王拿着旧钥匙进去一看,东西也变了。

常见操作:

  • Object.assign({}, oldObj)
  • { ...oldObj } (展开运算符)
  • Array.prototype.slice()

代码演示:

JavaScript

1let a = { name: '张三', favorite: { food: '火锅' } };
2let b = { ...a }; // 浅拷贝
3
4b.name = '李四'; 
5console.log(a.name); // '张三' (基本类型在栈里,互不影响)
6
7b.favorite.food = '串串';
8console.log(a.favorite.food); // '串串' (引用类型指向同一个堆,一起变了!)
9

3. 深拷贝 (Deep Copy):直接克隆一个新仓库

深拷贝会把堆里的东西全部复制一份,塞进一个新的堆空间,并给你一把指向新空间的钥匙。

  • 结果:两个变量完全独立。
  • 后果:你在新仓库里把天拆了,老王的旧仓库也纹丝不动。

常见操作:

  1. 最简单(有缺陷)JSON.parse(JSON.stringify(obj))
    • 缺点:不能拷贝函数、undefined、正则,会丢失原型链。
  2. 现代原生structuredClone(obj)
    • 优点:2022年后的浏览器原生支持,非常强大。
  3. 终极武器:手写递归或使用 Lodash_.cloneDeep

4. 怎么获取数据类型?(你要的那个方法)

你刚才问有没有一个方法能直接看穿所有类型?有!就是我提到的 “万能判定法”

typeof 太弱了(数组、对象、null 它都说是 object),我们要用这个:

JavaScript

特性浅拷贝深拷贝
复制内容复制对象的引用(地址)复制对象的所有层级结构
内存位置栈中地址不同,堆中内容相同栈中地址不同,堆中内容也不同
相互影响修改嵌套对象时,会互相影响彻底隔离,互不影响
性能慢(递归耗时)
1function getType(target) {
2    // 截取字符串,只保留中间的类型名,比如 "Array"
3    return Object.prototype.toString.call(target).slice(8, -1);
4}
5
6console.log(getType([]));        // "Array"
7console.log(getType({}));        // "Object"
8console.log(getType(null));      // "Null"
9console.log(getType(new Date())); // "Date"

js的深拷贝和浅拷贝?啥情况讲解下??底层堆栈空间??object.prototype.toString.call(),还有bind,的具体使用?》 是转载文章,点击查看原文


相关推荐


如何实现分布式锁
哈里谢顿2026/4/10

分布式锁是分布式系统中协调多个节点对共享资源访问的关键机制。我来从原理到实现,系统性地讲解。 核心要求 一个可靠的分布式锁必须满足: 特性说明互斥性同一时间只有一个客户端能持有锁防死锁锁必须有过期机制,避免客户端崩溃后锁永远不被释放可重入性(可选)同一客户端可以多次获取同一把锁容错性大部分节点存活时,锁服务仍能正常工作 方案一:基于 Redis(最常用) 1. 基础版(SETNX + EXPIRE) SETNX lock:resource "


Ospf网络类型:P2P和Broadcast
24zhgjx-fuhao2026/4/2

一、P2P (一)、P2P的作用及特点 P2P(点到点)网络类型 1.作用: 适用于连接两台路由器的链路‌,例如通过PPP(点对点协议)或HDLC(高级数据链路控制)封装的串行链路。不需要进行DR(指定路由器)和BDR(备份指定路由器)的选举。路由器之间可以直接建立邻接关系(Full状态),无需通过DR/BDR进行LSA(链路状态通告)的泛洪。 2.特点: 无需选举DR/BDR‌:因为只有两个设备通信。自动发现邻居‌:通过发送Hello报文自动发现邻居。组播发送协议报文‌:使用组播地


Linux中基础IO知识全解
顶点多余2026/3/25

1.什么是文件 文件是指内容+属性,所以文件永远不是只有内容; 1.1狭义上: ①文件的存储特性 永久性存储:磁盘是永久性存储介质,文件在磁盘上的存储是永久性的(断电不丢失) ②磁盘的设备属性 外部设备:磁盘属于外设(I/O设备) 双重角色:既是输出设备(写入数据),也是输入设备(读取数据) ③文件操作的本质 I/O操作:对磁盘上文件的所有操作,本质上都是对外设的输入和输出 统称IO:所有文件读写操作,都可以简称为IO 1.2广义上: Linux 下⼀切皆⽂件(键盘、显⽰器、⽹卡、


Windows 11 上搭建 YouTube 视频下载工具:yt-dlp + FFmpeg
liulilittle2026/3/17

Windows 11 上搭建 YouTube 视频下载工具:yt-dlp + FFmpeg 作为经常需要下载 YouTube 视频的人,你一定遇到过这样的烦恼:在线下载网站不稳定、广告多,或者限制大小。今天我就来分享一套本地搭建的下载方案,使用 yt-dlp(youtube-dl 的活跃分支)配合 FFmpeg,在 Windows 11 上轻松下载单条视频或整个播放列表,全部转为 MP4 格式。最重要的是,完全免费、无广告、速度快! 准备工作 一台 Windows 11 电脑,且有管理


Android MediatorLiveData
louisgeek2026/3/8

Android MediatorLiveData 可以监听多个 LiveData 源,并且能动态添加和移除源 合并多个 LiveData 源 public class CombineViewModel extends ViewModel { private final MutableLiveData<One> _oneLiveData = new MutableLiveData<>(); public final LiveData<One> oneLiveData = _on


【AI个人学习】npm本地安装claude code白嫖minimax模型
汐瀼2026/2/28

安装nodejs 下载 需要自取,下一步傻瓜式操作 通过网盘分享的文件:node-v24.13.0-x64.msi 链接: https://pan.baidu.com/s/1eJhCowFZ211oV2yxAfPvQA?pwd=sayg 提取码: sayg –来自百度网盘超级会员v7的分享 系统变量添加全局包路径 打开CMD敲命令 npm config get prefix # 获取npm全局包路径,获取后复制 添加路径到系统变量即可,添加系统变量网上教程一大堆 安装claude


你是不是觉得 R8 很讨厌,但 Android 为什么选择 R8 ?也许你对 R8 还不够了解
恋猫de小郭2026/2/20

本篇是来自 Android Developers 的播客 《What’s so great about R8?》 的整合,核心是讨论了 Android R8 编译器以及它对性能的影响,参与讨论的嘉宾包括来自 Android 工具团队、R8 团队和平台性能团队的专家(Tor Norby, Romain Guy, Sean, Chris, Shai)。 这是一篇让你对 R8 不再误解的内容。 D8 与 R8 编译器的区别 首先可能不少人还不理解 D8 与 R8 的区别,在 Android 开发里


如何零成本搭建个人站点
mCell2026/2/12

同步至个人站点:如何零成本搭建个人站点 站点地址:stack.mcell.top,包含完整的:写作、评论、部署、MCP支持... 我经常写作,最开始是在一些平台上,比如稀土掘金。后面慢慢写多了,就想有个自己的博客平台。 最初搭建的博客很简单:一个纯静态的 HTML 文件,内容也不复杂,写点自我介绍,当作个人站点。直接托管到 GitHub Pages,域名用的也是它默认那串。 但很快就发现:功能太少了。 比如发布文章?评论?甚至想加点扩展能力都很难——纯 HTML 又没框架,后面越改越痛苦。


PostgreSQL全文检索中文分词器配置与优化实践
MarsBighead2026/2/3

引言 在构建RAG(检索增强生成)系统的过程中,提升检索效率与准确性是一个持续优化的课题。除了常见的嵌入向量检索外,结合全文检索技术能进一步改善系统表现。本文基于PostgreSQL数据库,分享中文全文检索分词器的配置、索引创建与使用实践,记录在真实场景中遇到的问题与解决方案。 一、背景 为了提升RAG系统的检索效果,我们探索了全文检索与向量检索结合的混合检索方案。PostgreSQL内置了强大的全文检索功能,并支持扩展插件实现多语言分词。针对中文场景,我们选用了 zhparser 分词插件,


怎么理解 HttpServletRequest @Autowired注入
それども2026/1/24

在你的代码中,@Autowired(required = false) private HttpServletRequest req 的 required = false 是多余的,甚至可能带来潜在问题。以下是详细分析: 1. 为什么 required = false 是多余的? (1) HttpServletRequest 的特殊性 由 Servlet 容器(如 Tomcat)管理:HttpServletRequest 是 Web 请求的上下文对象,在 Servlet 环境中必然存在(

首页编辑器站点地图

本站内容在 CC BY-SA 4.0 协议下发布

Copyright © 2026 XYZ博客