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.pswp.cn/news/251432.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251432.shtml
英文地址,請注明出處:http://en.pswp.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 一…