對象的經常使用方法以及對象的拷貝

時間 2019-12-07

標籤對象經常使用方法以及拷貝简体版

原文原文鏈接

一、對象的理解

對象是一個包含相關數據和方法的集合（一般由一些變量和函數組成，咱們稱之爲對象裏面的屬性和方法）數組

1.1 對象能夠當作是Object對象構造出來的

所以，Object對象能夠看作是一個構造函數，能夠創造新對象；
同時Object對象自己能夠看成工具方法使用；函數

1.2 Object對象做爲工具方法

Object對象自身的方法

Object對象自己做爲工具方法能夠根據參數的數據類型不一樣返回對應的包裝對象實例；工具

不過，實際操做中使用Object對象生成對應包裝對象的實例並不直觀，因此建議不要採用Object方法生成包裝對象的實例；this

Object對象的靜態方法

所謂「靜態方法」，指部署在Object對象上的方法，更爲直觀的理解是靜態方法等同於一直呆在Object對象這個「靜態」的對象上，非靜態方法是部署在原型對象prototype上的方法，要在實例被構造函數動態建立才能使用；spa

Object.keys()和Object.getOwnPropertyNames()

兩個方法都能遍歷對象的屬性（自身的屬性而不是繼承的），不一樣之處在於Object.keys()只能遍歷可枚舉（enumberable）屬性；prototype

Object.defineProperty()和Object.defineProperties()

前面咱們已經經過delete命令對象Object.defineProperty方法有了必定的瞭解；3d

這個方法還有一個比較有意思的應用，就是實現數據的綁定；指針

<div id="name"></div>
//js
var obj = Object.defineProperty({},"name",{
  set:function(name){
    document.getElementById('name').innerHTML=name
  },
  get:function(){
   console.log( document.getElementById('name').innerHTML
     ) 
   },
})
obj.name = "hello world"
obj.name

Object.defineProperties能夠一次性配置對象的多個屬性；

Object.create()能夠建立一個實例對象，但一般用於從原型對象生成新的實例對象以實現繼承機制；

var  Person = {
    race: 'monkey'
}
var Asian = Object.create(Person)
//等價於
var Person = function(){
    this.race='monkey'
}
var Asian = new Person()

Object.getPrototypeOf()和Object.setPrototypeOf()

若是還沒了解JavaScript的原型和繼承的知識點的，這部分能夠先跳過；
Object.getPrototypeOf()返回一個對象的原型，這是獲取原型對象的標準方法；
Object.setPrototypeOf方法能夠爲現有對象設置原型，返回一個新對象，該方法接受兩個參數，第一個是現有對象，第二個是原型對象；code

1.3 Object對象的實例方法

Object做爲構造函數

Object做爲構造函數能夠建立實例對象；cdn

var person = new Object();
var pesoon = new Object(new);
//建立對象方法還有；
var person = {};
var person = Object.create(null);

構造函數內能夠傳參；

var person = new Object();
person.name = "teren";
person.age = 18;
//等價於
var person = new Object({name:"teren",age:18});

Object構造函數的實例的屬性個方法

由Object構造函數構造的實例的屬性和方法，即部署在Object.prototype對象的屬性和方法，屬於全部實例的「公共屬性和方法」

部署在Object.prototype對象的常見方法包括：

constructor屬性

constructor屬性返回實例的構造函數，即哪一個構造函數創造了實例；
上述person實例的構造函數就是Object這一構造函數；

hasOwnProperty()方法

hasOwnProperty()方法判斷傳入的參數是不是實例自身的屬性；

上圖顯示name是實例自身的屬性，toString是繼承自Object.prototype對象的屬性；

isPrototypeOf()方法

isPrototypeOf()方法用於判斷實例是不是做爲參數傳入的另外一個對象的原型對象；

上圖teren_son由teren創造，因此teren是teren_son的原型對象，故teren.isPrototypeOf(teren_son)爲true；

valueOf()方法和toString()方法

其餘類型數據在轉換爲數值和字符串過程當中js引擎就調用這兩個方法；

valueOf()方法

很好理解的是valueOf()方法就是返回實例的值，實例是什麼數據類型值就返回什麼類型；

具體經過調用valueOf()方法進行數據轉換的規則

toString()方法

toString()方法返回實例對象的字符串；
實例對象直接調用toString()方法返回對應字符串，注意對象類型和數組類型數據比較特殊；

使用Object.prototype.toString.call()方法調用將返回數據類型數組；

二、對象的拷貝之深淺拷貝

2.1數據類型

數據分爲基本數據類型(String, Number, Boolean, Null, Undefined，Symbol)和對象數據類型。

基本數據類型的特色：直接存儲在棧(stack)中的數據
引用數據類型的特色：存儲的是該對象在棧中引用，真實的數據存放在堆內存裏

引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體。

2.2 深淺拷貝

深拷貝和淺拷貝是隻針對Object和Array這樣的引用數據類型的。
深拷貝和淺拷貝的示意圖大體以下：

淺拷貝只複製指向某個對象的指針，而不復制對象自己，新舊對象仍是共享同一塊內存。但深拷貝會另外創造一個如出一轍的對象，新對象跟原對象不共享內存，修改新對象不會改到原對象。

2.3 賦值和淺拷貝的區別

當咱們把一個對象賦值給一個新的變量時，賦的實際上是該對象的在棧中的地址，而不是堆中的數據。也就是兩個對象指向的是同一個存儲空間，不管哪一個對象發生改變，其實都是改變的存儲空間的內容，所以，兩個對象是聯動的。
淺拷貝是按位拷貝對象，它會建立一個新對象，這個對象有着原始對象屬性值的一份精確拷貝。若是屬性是基本類型，拷貝的就是基本類型的值；若是屬性是內存地址（引用類型），拷貝的就是內存地址，所以若是其中一個對象改變了這個地址，就會影響到另外一個對象。即默認拷貝構造函數只是對對象進行淺拷貝複製(逐個成員依次拷貝)，即只複製對象空間而不復制資源。

咱們先來看兩個例子，對比賦值與淺拷貝會對原對象帶來哪些改變？

上面例子中，obj1是原始數據，obj2是賦值操做獲得，而obj3淺拷貝獲得。咱們能夠很清晰看到對原始數據的影響，具體請看下錶：

2.4 淺拷貝的實現方式

Object.assign()

Object.assign() 方法能夠把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，而後返回目標對象。可是 Object.assign()進行的是淺拷貝，拷貝的是對象的屬性的引用，而不是對象自己。

注意：當object只有一層的時候，是深拷貝

Array.prototype.concat()

修改新對象會改到原對象:

Array.prototype.slice()

一樣修改新對象會改到原對象：

關於Array的slice和concat方法的補充說明：Array的slice和concat方法不修改原數組，只會返回一個淺複製了原數組中的元素的一個新數組。

原數組的元素會按照下述規則拷貝：

若是該元素是個對象引用(不是實際的對象)，slice 會拷貝這個對象引用到新的數組裏。兩個對象引用都引用了同一個對象。若是被引用的對象發生改變，則新的和原來的數組中的這個元素也會發生改變。
對於字符串、數字及布爾值來講（不是 String、Number 或者 Boolean 對象），slice 會拷貝這些值到新的數組裏。在別的數組裏修改這些字符串或數字或是布爾值，將不會影響另外一個數組。

可能這段話晦澀難懂，咱們舉個例子，將上面的例子小做修改：