JavaScript對象拷貝與賦值操作實例分析
本文實例講述了JavaScript對象拷貝與賦值操作。分享給大家供大家參考,具體如下:
今天在做公司面試題的時候,遇到了一道關于JavaScript之對象拷貝與賦值的問題,突然覺得很有意義,想和大家一起來分享一下!
首先,先擺出代碼,如下:
/**
* Created by Administrator on 2016/12/7.
*/
var obj={
name:"dahuang",
age:10
}
var newObj=obj;
newObj.name="xiaohuang";
console.log(obj.name);
console.log(newObj.name);
這個程序的結(jié)果是兩個都輸出了被修改后的名字:xiaohuang。
上述代碼使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun得到如下運行結(jié)果:

那么,大家是不是感覺到很奇怪呢,明明只修改了newObj這個對象的name值,為什么obj對象的name值也被篡改了呢?
其實原因很簡單,這是因為實際上newObj對象獲得的只是一個內(nèi)存地址,而不是真正的拷貝,所以obj對象被篡改。
但是當我們用Object.create這個函數(shù)創(chuàng)建一個對象時,obj對象就不會被篡改,話不多說,先上代碼:
var obj2 = {
name: "dahuang",
age: 10
}
var newObj2 = Object.create(obj2);
newObj2.name = "xiaohuang";
console.log(obj2.name);
console.log(newObj2.name);
這個程序的結(jié)果是newobj2.name的值為xiaohuang,而obj2.name的值為dahuang,仍然保持不變。
上述代碼使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun得到如下運行結(jié)果:

使用Object.create()方法進行對象的拷貝,Object.create()方法可以創(chuàng)建一個具有指定原型對象和屬性的新對象。
Object.create()方法簡介:
Object.create()方法創(chuàng)建一個擁有指定原型和若干個指定屬性的對象。
語法
Object.create(proto, [ propertiesObject ])
參數(shù)
proto 一個對象,作為新創(chuàng)建對象的原型。 propertiesObject可選。該參數(shù)對象是一組屬性與值,該對象的屬性名稱將是新創(chuàng)建的對象的屬性名稱,值是屬性描述符(這些屬性描述符的結(jié)構與
Object.defineProperties()的第二個參數(shù)一樣)。注意:該參數(shù)對象不能是 undefined,另外只有該對象中自身擁有的可枚舉的屬性才有效,也就是說該對象的原型鏈上屬性是無效的。
拋出異常
如果 proto 參數(shù)不是 null 或一個對象值,則拋出一個 TypeError 異常。
eg:
//Shape - superclass
function Shape() {
this.x = 0;
this.y = 0;
}
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info("Shape moved.");
};
// Rectangle - subclass
function Rectangle() {
Shape.call(this); //call super constructor.
}
Rectangle.prototype = Object.create(Shape.prototype);
var rect = new Rectangle();
rect instanceof Rectangle //true.
rect instanceof Shape //true.
rect.move(1, 1); //Outputs, "Shape moved."
上述代碼使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun得到如下運行結(jié)果:

更多關于JavaScript相關內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JavaScript+Canvas實現(xiàn)文字粒子流特效
看到大師級的canvas文字粒子動畫,要10個jq幣才能下載啊,我內(nèi)心的小鹿蠢蠢欲動,我也要寫一個。所以本文就來用Canvas實現(xiàn)簡單的文字粒子流特效,希望對大家有所幫助2023-01-01
javascript實現(xiàn)拖動層效果代碼(符合標準且兼容IE,chrome,firefox)
javascript實現(xiàn)拖動層,原理很簡單,就是根據(jù)鼠標的位置實時設置層的left和top2013-06-06
js技巧之十幾行的代碼實現(xiàn)vue.watch代碼
相信很多的用vue的人都知道vue雙向綁定的原理建立在,給屬性綁定了getter和setter,在屬性被改變的同時觸發(fā)視圖的再渲染。而本期也是借助這兩個內(nèi)置方法實現(xiàn)vue內(nèi)的watch2018-06-06
JavaScript獲取客戶端計算機硬件及系統(tǒng)等信息的方法
本文為大家詳細介紹下如何使用JavaScript獲取客戶端計算機硬件及系統(tǒng)等信息,下面有個不錯的示例,感興趣的朋友可以參考下2014-01-01
JS button按鈕實現(xiàn)submit按鈕提交效果
今天在使用表單是同時使用POST更新、刪除操作。然而form表單的 submit 且一旦提交則全部提交,所以想到的實現(xiàn)方法就是 使用button實現(xiàn),怎么實現(xiàn)呢?下面小編給大家分享JS button按鈕實現(xiàn)submit按鈕提交效果,感興趣的朋友參考下吧2016-11-11
Javascript快速實現(xiàn)瀏覽器系統(tǒng)通知
這篇文章給大家介紹了Javascript快速實現(xiàn)瀏覽器系統(tǒng)通知的方法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-08-08

