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) 方法... //…

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 …

解析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…

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

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

利用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…

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

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

es6 --- Proxy实例的get方法

写一个拦截函数,访问目标对象不存在属性时,会抛出不存在该属性的错误 如果存在该属性时,就返回其值. var person {name: "张三" };var proxy new Proxy(person, {get: function(target, property) {if (property in target) {return target[property];} else {thr…

Vue项目代码改进(四)—— 在使用ElementUI时点击同一个路由,页面报错

这个不可描述的问题是&#xff1a;在使用ElementUI时点击同一个路由&#xff0c;页面报错。 错误代码如下&#xff1a; element-ui.common.js?ccbf:3339 NavigationDuplicated {_ name: "NavigationDuplicated", name: "NavigationDuplicated", message…

关于jQuery对象(类数组对象)以及DOM对象相互转化问题——[object Object]和[object HTMLInputElement]

之前在某官网课程上看有关jQuery和bootstrap的相关教程&#xff0c;有一节课是教我们如何制作价格菜单的按钮以及总价问题 选中按钮&#xff0c;按钮样式会发生变化&#xff0c;右上角价格会自动运算 6个菜单的html结构差不多&#xff0c;先贴出一个菜单的html&#xff0c;如下…

如何去掉bootstrap table中表格样式中横线竖线

修改之前&#xff0c;表格看上去比较拥挤&#xff0c;因为bootstrap table插件中自带斑马线表格样式&#xff0c;有横线和竖线分栏&#xff0c;现在我们不需要这些。应UI设计的要求&#xff0c;要去掉中间的横线和竖线&#xff0c;使用了修改需求中一种简单粗暴的修改方法&…

Vue项目代码改进(五)—— 将侧边栏菜单改造为动态后,如何按需显示不同图标

将侧边栏菜单改造为动态后&#xff0c;目前侧边栏每项的小图标都相同 <el-aside class"aside" width"200px"><el-col :span"24"><el-menudefault-active"2"class"el-menu-vertical-demo"open"handleOpe…

es6 --- Reflect的静态方法

Reflect.get(target, name, receiver): 查找并返回 target对象的 name属性,若没有,返回undefined var myObject {foo: 1,bar: 2,get baz() {return this.foo this.bar;}, }Reflect.get(myObject, foo); // 1// 若name属性部署了读取函数(getter),则读取函数的this 绑定rece…

canvas画出简陋版随鼠标转动眼睛且会眨眼的可爱樱桃小丸子

可到我的github上下载文件 需求&#xff1a; 刚加载时鼠标不移动&#xff0c;眼睛会不停地眨眼眼球会跟随鼠标移动而移动鼠标不移动时恢复眨眼效果提示&#xff1a; 除了眼睛是动态以外&#xff0c;其他静态绘制都在static()函数中利用椭圆的短轴长度先变短后恢复长度来模拟…