整理Object的一些方法

時間 2019-12-08

標籤整理 object 一些方法简体版

原文原文鏈接

ES5 和 ES6 中 Object 添加了不少新的方法，如今不少開源代碼中有用到了這些，今天來整理一番。數組

Object.assign()

這是ES6新添加的方法，Object.assign()用來複制源對象的全部可枚舉屬性複製到目標對象中，方法返回目標對象。語法以下：ide

Object.assign(target, ...source);

source對象能夠有不少個，好比：函數

let target = {name: 'target'};
let source1 = {age: 23};
let source2 = {email: 'zhanglun1410@gmail.com'};
// ...
// let sourceN ={.....};
traget = Object.assign(target, source1, source2);

若是源對象和目標對象的屬性的key相同，目標對象的屬性將會被源對象中的屬性覆蓋。對於多個源對象來講，若是有相同的key，右邊的屬性將覆蓋左邊的屬性。這個方法只能將源對象的可枚舉對象和本身的屬性複製給目標對象。學習

什麼是可枚舉對象（）？
可枚舉屬性是指那些內部「可枚舉」標誌設置爲true的屬性，對於經過直接的賦值和屬性初始化的屬性，該標識值默認爲即爲true，對於經過Object.defineProperty等定義的屬性，該標識值默認爲false。可枚舉的屬性能夠經過 for...in 循環進行遍歷（除非該屬性名是一個 Symbol）。測試

對於源對象，Object.assign使用[[Get]]，而在目標對象上使用[[Set]]，也就是說，使用這個方法會源對象的getter和目標對象的setters。因此其本質就是定義或者複製一個新的屬性。若是等待合併的源對象包含了getters，那就不太適合用來將源對象合併到原型中。假如複製的屬性到原型裏，包括它們的可枚舉屬性，那麼應該使用 Object.getOwnPropertyDescriptor() 和 Object.defineProperty() 。String 和 Symbol 屬性都是會被複制的。this

若是遇到了一個錯誤，好比目標對象的某個屬性是不可修改的，會拋出一個TypeError的錯誤嗎，目標對象保持不變prototype

var foo = {}
Object.defineProperty(foo, 'name', {
  writable: false,
  value: 'zhanglun'
});
Object.assign(foo, {name: 'zhangxiaolun'}); // TypeError: Cannot assign to read only property '1' of object '#<Object>'

若是源對象是null或者undefined，Object.assign()不會拋出錯誤：code

var foo = {name: 'zhanglun'};
Object.assign(foo, null, undefined);
console.log(foo); // foo: {name: 'zhanglun'}

Object.create()

經過指定的原型對象和屬性，建立一個新的對象。語法以下：對象

Object.create(proto, [,. propertiesObject]);

第一個參數是一個對象，能夠是一個普通的對象，好比：{name: 'zhanglun'}，也能夠是一個新建立的對象的原型（prototype），好比：new Array().prototype。不管是那種，都是 JavaScript 中的 Object，其屬性都被添加到返回的對象原型中；第二個參數是可選的，可是不能是undefined，該對象自身擁有的可枚舉屬性會被添加到新建立的對象上，其原型鏈上的屬性是無效的。若是第一個參數不是null或者一個對象值，將會拋出TypeError異常。繼承

Object.create()最直接的做用是基於一個對象建立新的對象，更多時候用在了原型鏈繼承上，先來看看 JavaScript
中建立對象的幾種方法：

對象字面量

var o = {a: 1};

// o這個對象繼承了Object.prototype上面的全部屬性
// 因此能夠這樣使用 o.hasOwnProperty('a').
// hasOwnProperty 是Object.prototype的自身屬性。
// Object.prototype的原型爲null。
// 原型鏈以下:
// o ---> Object.prototype ---> null

var a = ["yo", "whadup", "?"];

// 數組都繼承於Array.prototype 
// (indexOf, forEach等方法都是從它繼承而來).
// 原型鏈以下:
// a ---> Array.prototype ---> Object.prototype ---> null

function f(){
  return 2;
}

// 函數都繼承於Function.prototype
// (call, bind等方法都是從它繼承而來):
// f ---> Function.prototype ---> Object.prototype ---> null

構造函數

在 JavaScript 中，構造器其實就是一個普通的函數。當使用 new 操做符來做用這個函數時，它就能夠被稱爲構造方法（構造函數）。若是沒有 new 關鍵字而是直接調用的話，至關因而在當前做用域上調用，此時函數中若是有 this 的話，this 指向的是當前做用域。

function Graph() {
  this.vertexes = [];
  this.edges = [];
}

Graph.prototype = {
  addVertex: function(v){
    this.vertexes.push(v);
  }
};

var g = new Graph();
// g是生成的對象,他的自身屬性有'vertices'和'edges'.
// 在g被實例化時,g.[[Prototype]]指向了Graph.prototype.
Graph();
console.log(window.vertexes); // 在全局做用域中調用，意外地增長了全局變量

使用 Object.create()

var a = {a: 1}; 
// a ---> Object.prototype ---> null

var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (繼承而來)

var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, 由於d沒有繼承Object.prototype

ES6 中的 Class 關鍵字

ES6 引入了一套新的關鍵字用來實現 class。這是一個語法糖，其本質仍是基於原型的。這些新的關鍵字包括 class, constructor, static, extends, 和 super。關於 Class的使用，回頭再開一篇文章深刻學習。

"use strict";

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

var square = new Square(2);

使用 Object.create() 實現繼承

下面是一個使用 Object.create()實現類的繼承的例子。

function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父類的原型方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// 子類
function Rectangle() {
  Shape.call(this); // 調用構造函數
}

// 子類繼承父類
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle);// true
console.log('Is rect an instance of Shape?', rect instanceof Shape);// true
rect.move(1, 1); // Outputs, 'Shape moved.'

Object.create VS new

前面說到的，Object.create其實是將第一個參數（不管是原型對象仍是普通對象）的屬性添加到新建立對象的原型中，這也就意味着，經過new Function()中定義的屬性和方法是沒法經過 create()方法添加到新建立對象中的。

Object.create建立一個新的對象，這個對象「繼承」了第一個參數。構造函數新建立的對象「繼承」構造函數的prototype。

let o = new SomeConstructor();  // o 直接繼承自`SomeConstructor.prototype`。

二者的最明顯的不一樣之處在於：若是 Object.create()的第一個參數是null，新建立的對象不會「繼承」自任何地方，沒有原型，也沒有往上追溯的原型；在使用構造函數時，若是將其原型設置爲 null，SomeConstructor.prototype = null;，新建立的對象將會「繼承」自 Object 的 prototype。

Object.freeze()

字面意思就是將一個 object「凍住」：不能添加新的屬性；不能刪除現有的屬性；不能修改現有屬性，包括屬性的enumerability, configurability和 writability。這個方法返回一個不可修改的對象，使用語法：

Object.freeze(obj)

任未嘗試修改該對象的操做都會失敗，多是靜默失敗，也可能會拋出異常。在嚴格模式中會拋出異常（本地測試下來嚴格模式也不會報錯）。數據屬性的值不可更改，訪問器屬性（有getter和setter）也一樣，但因爲是函數調用，給人一種修改了這個屬性的錯覺。若是一個屬性的值是個對象，則這個對象中的屬性是能夠修改的，除非它也是個凍結對象。

let foo = {
  name: 'zhanglun',
  age: 23,
}

console.log(foo.name); // 'zhanglun'
console.log(foo.age); // 23

foo.name = 'zhanglun1410';
foo.age = 24;

console.log(foo.name); // 'zhanglun1410'
console.log(foo.age); // 24

Object.freeze(foo);

foo.name = 'zzzz'; // 靜默失敗
console.log(foo.name); // 'zhanglun1410'

'use strict';
foo.name = 'zzzz'; // TypeError 或者 靜默失敗
console.log(foo.name); // 'zhanglun1410'

Object.freeze VS const

被凍結的對象是不可改變的。可是它不必定是常量。對常量而言，它的全部引用，不管是直接的仍是間接的都是引用的不可改變的對象。string，number，和 boolean 老是不可變的（當你把一個變量從字符串 A 修改到字符串 B時，A 和 B 都是不可變的，A 仍是 A，B 也仍是 B，只不過變量的以前指向的是 A,修改以後指向了 B）。一般來講，通常不會建立一個對象常量，也不存在freezeAll()這樣的方法。

const 用於聲明常量，將變量綁定到一個不可修改的對象，常量最終指向的是一個不可修改的對象，好比一個被凍結的對象，而 Object.freeze 做用在對象的值上，將一個對象變成不可修改的對象。

深度凍結對象

前面提到的，Object.freeze做用在對象的屬性上，使對象的屬性不可修改。而若是屬性值也是一個對象的話，依然可以修改，除非這個對象也被凍結了。所以，能夠把 Object.freeze 理解成是「淺凍結」。能夠編寫額外的代碼來實現「深凍結」：

obj1 = {
  internal: {}
};

Object.freeze(obj1);
obj1.internal.a = 'aValue';

obj1.internal.a // 'aValue'

// 深度凍結
function deepFreeze(obj) {

  // 獲取到對象的屬性的名字
  var propNames = Object.getOwnPropertyNames(obj);

  // 先凍結內部的對象
  propNames.forEach(function(name) {
    var prop = obj[name];

    // Freeze prop if it is an object
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });

  // 凍結 obj
  return Object.freeze(obj);
}

obj2 = {
  internal: {}
};

deepFreeze(obj2);
obj2.internal.a = 'anotherValue';
obj2.internal.a; // undefined

Object.freeze 的注意事項

在 ES5 中，若是參數不是一個對象，是一個原始數據類型，會拋出 TypeError。在 ES6 中，不是對象的參數的會被當作是一個已經被凍結的普通對象，只是返回這個參數。

Object.defineProperty()

Object.defineProperty是ES5新增的一個方法，能夠給對象的屬性增長更多的控制。語法以下：

Object.defineProperty(obj, prop, descriptor)

前面兩個參數很簡單，修改的對象和修改或者新增的屬性，着重介紹一下第三個參數：屬性描述符。

ES5 中定義了一個名叫「屬性描述符」的對象，用於描述了的各類特徵，它自己是一個 Object。屬性描述符對象有4個屬性：

configurable：可配置性，控制着其描述的屬性的修改，表示可否修改屬性的特性，可否把屬性修改成訪問器屬性，或者可否經過delete刪除屬性從而從新定義屬性。默認值爲true。
enumerable：可枚舉性，表示可否經過for-in遍歷獲得屬性。默認值爲true。
writable：可寫性，表示可否修改屬性的值。默認值爲true。
value：數據屬性，表示屬性的值。默認值爲undefined。

和兩個存取器屬性，分別是get和set，能夠代替value和writable。

get：在讀取屬性時調用的函數。只指定get則表示屬性爲只讀屬性。默認值爲undefined。
set：在寫入屬性時調用的函數。只指定set則表示屬性爲只寫屬性。默認值爲undefined。

屬性描述符只能在Object.defineProperty或Object.defineProperties中使用。

var o = {}; // Creates a new object

// Example of an object property added with defineProperty with a data property descriptor
// 添加屬性 a,值爲37，並設置屬性描述符
Object.defineProperty(o, 'a', {
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true
});


var bValue = 38;
Object.defineProperty(o, 'b', {
  get: function() { return bValue; },
  set: function(newValue) { bValue = newValue; },
  enumerable: true,
  configurable: true
});
o.b; // 38
// o 對象中存在屬性 b，他的值爲38；
// 只要 o.b沒有從新定義，它的值永遠都是38

// 訪問器不能和 value或者 writable混在一塊兒用
Object.defineProperty(o, 'conflict', {
  value: 0x9f91102,
  get: function() { return 0xdeadbeef; }
});
// 拋出一個錯誤 Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>

Object.defineProperties()

相比 Object.defineProperty， Object.defineProperties能夠說是前者的升級版，能夠一次同時定義多個屬性，語法略有不一樣：

let obj = {};
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  },
  "property3": {
    get: function() {
      return 'Hello, Object.defineProperties';
    },
    set:function() {
      this.property2 = 'xxxxxx';
    }
  }
  // etc. etc.
});

參考資料：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。