JS中把對象賦值給變量時出現的問題

miguel.jiang 發布于2019-08-21 15:18 / 3369人閱讀

摘要：問題剛才碰到了一個這樣的問題有一個由對象組成的數組，把其中一個對象賦值給變量，然后改變了的屬性，對應的原來數組中的對象的屬性也會隨之改變。

問題

剛才碰到了一個這樣的問題：有一個由對象組成的數組，把其中一個對象賦值給變量p，然后改變了p的屬性，對應的原來數組中的對象的屬性也會隨之改變。

var arr = [{x:0, y:0}, {x:0, y:0}]
var p = arr[0]
p.x = 1
p.y = 2
console.log(arr) // [{x:1, y:2}, {x:0, y:0}]

探究

我一開始以為這是數組的什么神奇特性，經過幾番試驗發現只有由對象組成的數組有這個問題，隱隱覺得這是對象的某個特性，然后又試了下，果然如此！

var a = {x:0, y:0}
var p = a
p.x = 1
console.log(a) // {x:1, y:0}

把a賦值給變量p之后，改變p的某個屬性，a中對應的屬性也會隨之改變。

原因

簡單地想了一下原因，不知道正確不正確：
var p = a是讓p指向了a所代表的對象。同理，var a = {x:0, y:0}是讓a指向了{x:0, y:0}這樣一個對象。所以實際上p和a指向的是同一個對象，修改其它們中任何一個都會使另一個一同改變。

解決辦法

那有沒有讓p改變之后a保持不變的辦法呢？
有的！

var a = {x:0, y:0}
var p = {}
p.x = a.x
p.y = a.y

通過這種方式把a的屬性一一對應地賦值給p，之后對p做出的任何修改都不會影響到a。但是這種方法很麻煩，特別是碰到屬性很多的對象，那么可以寫個函數來完成這個工作：

function cloneObj(obj) {
  var newObj = {}
  for(var prop in obj) {
    newObj[prop] = obj[prop]
  }
  return newObj
}

var a = {x:0}
var p = cloneObj(a)
p.x = 2
console.log(p) // {x:2}
console.log(a) // {x:0}

成功了！修改p的屬性之后a的屬性沒有隨之改變。

后來網上查了查，發現js中有深拷貝和淺拷貝這樣的區分，粗粗看了一遍。但是沒有更多的實際使用經驗所以理解也不是很深刻，如果以后有了更深的見解的話到時候再來寫一篇。

云服務器 GPU云服務器 js對象用變量賦值 php變量賦值給類 php如何賦值給變量 php 中給變量賦值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88147.html

每日 30 秒 ? 誰敢與我一戰

showImg(https://segmentfault.com/img/remote/1460000018771037?w=900&h=500); 簡介 benchmark、基準測試、jsPerf 在優雅插入數組一文中大家最多的評論就是能不能加個基準測試。小二不是不喜歡加基準測試而是現在硬件設備的性能越來越快了，有時候一些操作不是性能問題的主要原因，當然這不是我們不寫出好代碼的理由。書寫...

Dionysus_go 2019-08-23 16:18 評論0 收藏0
關于Keystone.js安裝時出現的一個新手可能會遇到的小問題的解決方法

摘要：在執行如下命令之后如果你的電腦沒有裝，那么執行就會出現如下的顯示不是內部或外部命令，也不是可運行的程序或批處理文件。是制作的生成器需要，官網是。使用來生成網站，如果沒有安裝的話，需要使用進行安裝。解決方法安裝后即可在terminal執行如下命令之后 npm install -g generator-keystone 如果你的電腦沒有裝yo，那么執行 yo keystone 就會出...

quietin 2019-06-26 17:14 評論0 收藏0
坑爹微信之讀取PKCS12流時出現的java.io.IOException: DerInputStr

摘要：背景微信退款接口需要使用到證書，我參考微信的官方進行，部分代碼如下上面的代碼，在本地調試的時候正常跑過，沒有出現任何異常，但是放到測試環境之后便會出現下面的異常，這三種異常都是從這里拋出來的。背景微信退款接口需要使用到證書，我參考微信的官方Demo進行，部分代碼如下： char[] password = config.getMchID().toCharArray(); InputS...

calx 2019-08-16 18:23 評論0 收藏0
#JavaScript# IE兼容

摘要：出現原因在子頁面關閉時，會釋放掉在子頁面中聲明賦值的對象。所以在父頁面所有對這個對象的引用操作都會產生這個錯誤。然后在父頁面中使用變成對象。在IE瀏覽器中出現的問題 1.不能執行已釋放 Script 的代碼 1.bug出現背景：在使用iframe標簽時，如果子頁面向父頁面傳遞在子頁面創建的對象（所有對象，包括數組，函數，正則等）時，會出現這個bug。 2.bug出現原因：在子頁面關...

Me_Kun 2019-08-23 16:23 評論0 收藏0
centos使用chrome-cli、chromium或wkhtmltoimage截圖時出現的中文字

摘要：后來換了各種系統環境，包括更改中文支持，依然如故，只有在自己的上是正常的。查看是否有中文字體，一般情況下是不存在的，否則也不會亂碼。再一次運行程序腳本，查看截圖是否包含正常的中文字符。在centos7環境下使用chrome-php或wkhtmltoimage截圖時出現的中文亂碼解決方案最近做了一個小項目，要求使用chrome/chromium對抓取的頁面進行截圖保存并上傳云服務，因...

ivyzhang 2019-07-01 12:37 評論0 收藏0