javascript --- Object.assign()浅复制解决方法

Object.assign()是浅复制(即:只复制对象得引用而,而不是新实例).它无法正确复制get属性和set属性.
看下面得例子:

// 定义一个source对象,含set方法
const source = {set foo(value) {console.log(value);}
};// 使用Object.assign进行赋值
const target1 = {};
Object.assign(target1, source);// 使用getOwnPropertyDescriptor方法获取target1中的foo 并打印到控制台
console.log(Object.getOwnPropertyDescriptor(target1 , 'foo') )

结果如下:
在这里插入图片描述
可以发现.value的属性为undefined…
下面使用ES2017引入的Object.getOwnPropertyDescriptors方法配合Object.defineProperties方法解决set方法无法复制的问题

const source = {set foo(value) {console.log(value);}
};// Object.getOwnPropertyDescriptors:返回指定对象所有自身属性(非继承属性)的描述对象
// Object.defineProperties:给某个对象定义属性.
const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
console.log(Object.getOwnPropertyDescriptor(target2, 'foo'));

在这里插入图片描述
可以看到set方法成功复制! get方法未定义故值未undefined.

// ES6写法
const shallowMerge = (target, source) => Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)
};

参考《ES6标准入门》 P177~P179

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

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

相关文章

微信小程序与Java后台的通信

一、写在前面 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的,然后查找资料发现…

面向对象初识④

抽象类与接口类 接口类 继承有两种用途: 一:继承基类的方法,并且做出自己的改变或者扩展(代码重用) 二:声明某个子类兼容于某基类,定义一个接口类Interface,接口类中定义了一些接口…

部署项目的问题(三)—— node启动服务时listen监听的端口被占用

Error: listen EADDRINUSE :::8888表示的就是listen监听的端口被占用 查询什么进程占用了8888端口 sudo fuser -n tcp 8888 (指令一) 或者 netstat -tln | grep 8888 (指令二)反复执行指令一,总得到不同结果&#x…

es6 --- 内置的Symbol值

Symbol.hasInstance // Symbol.hasInstance class MyClass {[Symbol.hasInstance] (foo) {return foo instanceof Array;} } [1, 2, 3] instanceof new MyClass() // true// symbol.hasInstance:会在[1, 2, 3] instanceof 时 自动调用 [Symbol.hasInstance] (foo) 方法... //…

对象的克隆

对象的克隆 1、克隆即复制的意思,对象的克隆,意味着生成一个对象,这个对象和某个对象的属性和行为是一致的,但是这个对象和源对象是两个不同的对象。实现对象的克隆,方法是实现Cloneable接口,否则会报异常C…

15 调试

1. pdb pdb是基于命令行的调试工具,非常类似gnu的gdb(调试c/c)。 def getAverage(a,b):result abprint("result is %s"%result)return resulta 10 b 20 c ab ret getAverage(a,b) print(ret) 2.执行时调试 程序启动&#xff0…

html5播放视频只有声音不出现画面?

一开始网上大神们都是要把MP4的编码格式转换成AVC(H264),然后赶紧用格式工厂把它给换了,结果!! 没用!!还是黑屏???咋回事啊,然后自己又…

vue项目代码改进(一)login组件

Login登录组件 1. 新增登录头像(css样式回顾) 1)div.avatar 2)子绝父相定位,left…top… 3)border 4)placeholder 5)box-shadow box-shadow: offset-x offset-y blur spread color …

es6 --- set实现并集(Union)、交集(Intersect)和差集(Difference)

Set:类似于数组,但是成员的值都是唯一的 let a new Set([1, 2, 3]); let b new Set([4, 3, 2]);// 并集 let union new Set([...a, ...b]);// 交集 let intersect new Set([...a].filter(x > b.has(x)));// 差级 let difference new Set( [...a].filter(x > !b.has…

解析DBF文件

上周,公司给了许多DBF后缀的数据文件让我进行解析。 因为是DBF文件我发现mysql,和Oracle都能直接对DBF文件进行导入。在导入过程中发现这些数据库并不能识别这些文件。 通过百度找到了打开这种文件的软件Visual FoxPro、Access,用它们打开后出…

Scrum 冲刺 第一日

Scrum 冲刺 第一日 站立式会议燃尽图Alpha 阶段认领任务明日任务安排项目预期任务量成员贡献值计算规则今日贡献量参考资料站立式会议 返回目录 燃尽图 返回目录 Alpha 阶段认领任务 学号组员分工用时20162309邢天岳补充说明书&部分测试18h20162311张之睿编写代码20h201623…

浅析 NodeJs 的几种文件路径

Node 中的文件路径大概有 __dirname, __filename, process.cwd(), ./ 或者 ../,前三个都是绝对路径,为了便于比较,./ 和 ../ 我们通过 path.resolve(./)来转换为绝对路径。 先看一个简单的栗子: 假如我们有这样的文件结构&#xf…

Vue项目代码改进(二)—— element-UI的消息显示时间修改

Message 消息提示 Options duration 显示时间, 毫秒。设为 0 则不会自动关闭 — 默认值3000 全局重写 element 的message 消息提示,修改时间,在main.js里 Vue.prototype.$message function (msg) {ElementUI.Message(msg) } Vue.prototype.$message.success func…

es6 --- 使用node的memoryUsage检测WeakMap()

打开node命令行 $ node --expose-gc// --expose-gc:表示允许手动执行垃圾回收机制// 手动执行一次垃圾回收,保证获取的内存使用状态准确 > global.gc();// 查看内存占用的初始状态, > process.memoryUsage();可以发现初始用了4.7MB左右 // 创建一个WeakMap()实例wm >…

遍历字典

Python支持对字典的遍历,有多种遍历字典的方式:所有的键值对,键或者值。 遍历所有的键值对: people {name:winter, age:25, sex:man, }for key,value in people.items():print("\nkey:"key)print("value…

Flexbox 布局

Flexbox 是 flexible box 的简称(愚人码头注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox &a…

利用jQuery和bootstrap更改radio样式

<div class"container body-content"><div class"row"><div class"text-center col-xs-12"><h3>标题</h3><div class"well well-sm"><div class"btn-group" data-toggle"butto…

将markdown编译为HTML和PDF

使用gulp搭建markdown编译环境 1. 执行npm init 进行项目初始化得到package.json 2. 全局安装gulp &#xff1a;npm install gulp --global; 3. 在项目中安装gulp依赖&#xff1a;npm install gulp --save-dev; 4. 创建gulpfile.js文件设置任务&#xff1a; var gulp require…

捕获异常的两种方式

捕获异常的两种方式方法一 #codingutf-8 import systry:with open("ddd.txt", "r") as f:data f.read()print data except:err sys.exc_info()print errsys.exc_info()返回三元组&#xff0c;分别是&#xff0c;异常类型、异常值、异常追溯地址方法二 #c…

Vue项目代码改进(三)—— Cookie、LocalStorage和SessionStorage的使用

存在问题&#xff1a; 如果在退出页面时&#xff0c;没有点击“退出”按钮&#xff0c;而是直接关闭页面&#xff0c;token并没有被清除&#xff0c;依然能通过访问http://localhost:8080/#/ 直接进入主页。 原因&#xff1a; 使用了localStorage而非sessionStorage或Cookie 一…