JavaScript 之物件拷貝與賦值

HuangQinJian發表於2017-03-23
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);複製程式碼

這個程式的結果是兩個都輸出了被修改後的名字：xiaohuang。

JavaScript 之物件拷貝與賦值
這裡寫圖片描述

那麼，大家是不是感覺到很奇怪呢，明明只修改了newObj這個物件的name值，為什麼obj物件的name值也被篡改了呢？

其實原因很簡單，這是因為實際上newObj物件獲得的只是一個記憶體地址，而不是真正的拷貝，所以obj物件被篡改。

但是當我們用Object.create這個函式建立一個物件時，obj物件就不會被篡改，話不多說，先上程式碼：

var obj2 = {
    name: "dahuang",
    age: 10
}

var newObj2 = Object.create(obj2);
newObj2.name = "xiaohuang";
console.log(obj2.name);
console.log(newObj2.name);複製程式碼

這個程式的結果是newobj2.name的值為xiaohuang，而obj2.name的值為dahuang，仍然保持不變。

JavaScript 之物件拷貝與賦值
這裡寫圖片描述

使用Object.create()方法進行物件的拷貝，Object.create()方法可以建立一個具有指定原型物件和屬性的新物件。

Object.create()方法簡介：

Object.create() 方法建立一個擁有指定原型和若干個指定屬性的物件。

語法

Object.create(proto, [ propertiesObject ])

引數

proto 一個物件，作為新建立物件的原型。 propertiesObject可選。該引數物件是一組屬性與值，該物件的屬性名稱將是新建立的物件的屬性名稱，值是屬性描述符（這些屬性描述符的結構與Object.defineProperties()的第二個引數一樣）。注意：該引數物件不能是 undefined，另外只有該物件中自身擁有的可列舉的屬性才有效，也就是說該物件的原型鏈上屬性是無效的。

丟擲異常

如果 proto 引數不是 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."複製程式碼

相關文章