JavaScript里的 深浅拷贝
一、深浅拷贝
首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象,简单来说,浅拷贝只复制一层对象的属性,二深拷贝则复制了所有的层级。
对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会 改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。
const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小pink'}}// 把对象转换为 JSON 字符串// console.log(JSON.stringify(obj))const o = JSON.parse(JSON.stringify(obj))console.log(o)o.family.baby = '123'console.log(obj)
二、this
了解函数中 this 在不同场景下的默认值,知道动态指定函数 this 值的方法。
1.1 默认值
this
是 JavaScript 最具“魅惑”的知识点,不同的应用场合 this
的取值可能会有意想不到的结果,在此我们对以往学习过的关于【 this
默认的取值】情况进行归纳和总结。
普通函数
普通函数的调用方式决定了 this
的值,即【谁调用 this
的值指向谁】
<script>// 普通函数function sayHi() {console.log(this) }// 函数表达式const sayHello = function () {console.log(this)}// 函数的调用方式决定了 this 的值sayHi() // windowwindow.sayHi()// 普通对象const user = {name: '小明',walk: function () {console.log(this)}}// 动态为 user 添加方法user.sayHi = sayHiuesr.sayHello = sayHello// 函数调用方式,决定了 this 的值user.sayHi()user.sayHello()
</script>
注: 普通函数没有明确调用者时 this
值为 window
,严格模式下没有调用者时 this
的值为 undefined
箭头函数
箭头函数中的 this
与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在 this
!箭头函数中访问的 this
不过是箭头函数所在作用域的 this
变量。
<script>console.log(this) // 此处为 window// 箭头函数const sayHi = function() {console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致}// 普通对象const user = {name: '小明',// 该箭头函数中的 this 为函数声明环境中 this 一致walk: () => {console.log(this)},sleep: function () {let str = 'hello'console.log(this)let fn = () => {console.log(str)console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致}// 调用箭头函数fn();}}// 动态添加方法user.sayHi = sayHi// 函数调用user.sayHi()user.sleep()user.walk()
</script>
在开发中【使用箭头函数前需要考虑函数中 this
的值】,事件回调函数使用箭头函数时,this
为全局的 window
,因此DOM事件回调函数不推荐使用箭头函数,如下代码所示:
<script>// DOM 节点const btn = document.querySelector('.btn')// 箭头函数 此时 this 指向了 windowbtn.addEventListener('click', () => {console.log(this)})// 普通函数 此时 this 指向了 DOM 对象btn.addEventListener('click', function () {console.log(this)})
</script>
同样由于箭头函数 this
的原因,基于原型的面向对象也不推荐采用箭头函数,如下代码所示:
<script>function Person() {}// 原型对像上添加了箭头函数Person.prototype.walk = () => {console.log('人都要走路...')console.log(this); // window}const p1 = new Person()p1.walk()
</script>
this指向
以上归纳了普通函数和箭头函数中关于 this
默认值的情形,不仅如此 JavaScript 中还允许指定函数中 this
的指向,有 3 个方法可以动态指定普通函数中 this
的指向:
使用 call
方法调用
<script>// 普通函数function sayHi() {console.log(this);}let user = {name: '小明',age: 18}let student = {name: '小红',age: 16}// 调用函数并指定 this 的值sayHi.call(user); // this 值为 usersayHi.call(student); // this 值为 student// 求和函数function counter(x, y) {return x + y;}// 调用 counter 函数,并传入参数let result = counter.call(null, 5, 10);console.log(result);
</script>
函数,同时指定函数中 this
的值,使用方法如下代码所示:
call
方法能够在调用函数的同时指定this
的值使用
call
方法调用函数时,第1个参数为this
指定的值call
方法的其余参数会依次自动传入函数做为函数的参数
apply
使用 call
方法调用函数,同时指定函数中 this
的值,使用方法如下代码所示:
<script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}let student = {name: '小红',age: 16}// 调用函数并指定 this 的值sayHi.apply(user) // this 值为 usersayHi.apply(student) // this 值为 student// 求和函数function counter(x, y) {return x + y}// 调用 counter 函数,并传入参数let result = counter.apply(null, [5, 10])console.log(result)
</script>
总结:
apply
方法能够在调用函数的同时指定this
的值使用
apply
方法调用函数时,第1个参数为this
指定的值apply
方法第2个参数为数组,数组的单元值依次自动传入函数做为函数的参数
bind
bind
方法并不会调用函数,而是创建一个指定了 this
值的新函数,使用方法如下代码所示:
<script>// 普通函数function sayHi() {console.log(this)}let user = {name: '小明',age: 18}// 调用 bind 指定 this 的值let sayHello = sayHi.bind(user);// 调用使用 bind 创建的新函数sayHello()
</script>
注:bind
方法创建新的函数,与原函数的唯一的变化是改变了 this
的值。
防抖节流
防抖(debounce) 所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间
节流(throttle) 所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数
JavaScript里的 深浅拷贝相关推荐
- php深浅拷贝,JavaScript 中的深浅拷贝
工作中经常会遇到需要复制 JavaScript 数据的时候,遇到 bug 时实在令人头疼:面试中也经常会被问到如何实现一个数据的深浅拷贝,但是你对其中的原理清晰吗?一起来看一下吧! 一.为什么会有深浅 ...
- JavaScript专题(五)深浅拷贝
JavaScript专题之深浅拷贝 了解拷贝背后的过程,避免不必要的错误,Js专题系列之深浅拷贝,我们一起加油- 目录 一.拷贝示例 二.浅拷贝 三.深拷贝的方法? 四.自己实现深浅拷贝 一.拷贝示例 ...
- JavaScript学习笔记(四)---闭包、递归、柯里化函数、继承、深浅拷贝、设计模式
JavaScript学习笔记(四)---闭包.递归.柯里化函数.继承.深浅拷贝.设计模式 1. 匿名函数的使用场景 2.自运行 3.闭包 3.1前提: 3.2闭包 4.函数对象的三种定义方式 5.th ...
- JS(JavaScript)中实现深浅拷贝的几种方式(详细阅读 非常重要)。
在了解深浅拷贝之前,我们先一起来简单来了解一下,JavaScript 数据存储的方式,以及数据类型(). JavaScript 中数据存储分为 简单数据类型和复杂数据类型(引用数据类型) 其中 5 种 ...
- JavaScript进阶教程(6)—硬核动图让你轻松弄懂递归与深浅拷贝
目录 一.递归 1.1 概念 1.2 出口 1.3 递归经典问题:递归求斐波那契数列 1.4 递归经典问题:递归求阶乘 1.5 递归求一个数字各个位数上的数字的和 1.6 递归遍历DOM树 二 深浅拷 ...
- JavaScript 的 深浅 拷贝
深浅 拷贝 所谓的 深拷贝 浅拷贝 是 对 引用 数据类型而言的 如果变量储存的数据是 基本数据类型 例如 字符串,数值,布尔值等 没有所谓的 深浅拷贝 浅拷贝所谓的 浅拷贝 只是 复制变量中存储的内 ...
- JavaScript的深浅拷贝
首先,要知道基本类型是没有深浅拷贝之分的,因为基本类型在进行复制时,就是将值直接复制给另一个: 而引用类型在进行复制时,由于占用内存比较大,只会复制引用地址,相当于复制只是共用了同一个对象/数组. 这 ...
- python里clear和copy_python (集合和深浅拷贝)
一. 知识点补充 1. 列表和字典不能在循环过程中进行增删操作,因为列表索引在循环过程会发生改变,字典规定循环不可改变. 删除方法: 将需要大量删除的列表或者字典遍历取出要删除的对象,放入一个空列表, ...
- boolean类型_JS核心理论之《数据类型、类型转换、深浅拷贝与参数传递》
数据类型 基本类型:共7种,也被称为值类型,是一种既非对象也无方法的数据.包括:string.number.bigint.boolean.null.undefined.symbol. 除了 null ...
- python基础(三元运算+深浅拷贝+函数参数)
三元运算 三元运算,又称三目运算,主要作用是减少代码量,是对简单的条件语句的缩写. 1 书写格式: 2 result = 值1 if 条件 else 值2 3 即如果条件成立,则将值1赋给result ...
最新文章
- vmware安装mac终于成功
- JDK源码解析 InputStream类就使用了模板方法模式
- svm 交叉验证 python_【python机器学习笔记】SVM实例:有毒蘑菇预测
- SAP S/4HANA生产订单创建之后,为什么会自动执行action
- python学习笔记第四节
- 微服务项目部署在docker容器运行
- AI YOLO目标检测算法
- Apache-一个IP多个主机域名
- Badboy下载安装超详细教程
- Finance reading list(Mar.2019,by Stephen Nie)
- iview表格中,鼠标滑过单元格展示提示信息
- redis指定配置文件启动不生效_Windows Redis默认配置文件,Redis配置不生效解决方案...
- 用python画圆锥_用python画一幅美瞳,今日份来自程序员的浪漫
- 两个double之间的运算
- PhoneApplicationFrame以及设置Obscured/Unobscured的event handler
- 基于深度表征学习特征的抗癌肽预测
- 几种常用的噪声估计算法(二)
- java让gif图停止,JS控制GIF图片的停止与显示
- VUE 超级详细教程
- 视频如何转格式mp4?视频格式转换mp4格式
热门文章
- 2007年9-11月
- python的运行机制是什么_Python 程序运行机制
- 计算机窗口弹不出来桌面怎么弄,桌面显示不出来怎么办 桌面显示不出来解决方法【图文】...
- 网络狂飙(netspeeder) v3.28 游戏版 怎么用
- sin40度不用计算机怎么求,sin40度怎么算 sin40度如何算
- iPhone屏幕尺寸(包含7p)
- 新手配置Intel NUC8i5INH的Ubuntu 16.04 时无法上网
- Beamer简易教学 | 4 文本盒子
- dropping incoming packet
- Matlab图形中输入希腊字母