閱讀(805) 書簽贊(0) 我要糾錯

JavaScript Object 對象的相關(guān)方法

2023-03-20 15:52 更新

JavaScript 在Object對象上面，提供了很多相關(guān)方法，處理面向?qū)ο缶幊痰南嚓P(guān)操作。本章介紹這些方法。

Object.getPrototypeOf()

Object.getPrototypeOf方法返回參數(shù)對象的原型。這是獲取原型對象的標準方法。

var F = function () {};
var f = new F();
Object.getPrototypeOf(f) === F.prototype // true

上面代碼中，實例對象f的原型是F.prototype。

下面是幾種特殊對象的原型。

// 空對象的原型是 Object.prototype
Object.getPrototypeOf({}) === Object.prototype // true

// Object.prototype 的原型是 null
Object.getPrototypeOf(Object.prototype) === null // true

// 函數(shù)的原型是 Function.prototype
function f() {}
Object.getPrototypeOf(f) === Function.prototype // true

Object.setPrototypeOf()

Object.setPrototypeOf方法為參數(shù)對象設(shè)置原型，返回該參數(shù)對象。它接受兩個參數(shù)，第一個是現(xiàn)有對象，第二個是原型對象。

var a = {};
var b = {x: 1};
Object.setPrototypeOf(a, b);

Object.getPrototypeOf(a) === b // true
a.x // 1

上面代碼中，Object.setPrototypeOf方法將對象a的原型，設(shè)置為對象b，因此a可以共享b的屬性。

new命令可以使用Object.setPrototypeOf方法模擬。

var F = function () {
  this.foo = 'bar';
};

var f = new F();
// 等同于
var f = Object.setPrototypeOf({}, F.prototype);
F.call(f);

上面代碼中，new命令新建實例對象，其實可以分成兩步。第一步，將一個空對象的原型設(shè)為構(gòu)造函數(shù)的prototype屬性（上例是F.prototype）；第二步，將構(gòu)造函數(shù)內(nèi)部的this綁定這個空對象，然后執(zhí)行構(gòu)造函數(shù)，使得定義在this上面的方法和屬性（上例是this.foo），都轉(zhuǎn)移到這個空對象上。

Object.create()

生成實例對象的常用方法是，使用new命令讓構(gòu)造函數(shù)返回一個實例。但是很多時候，只能拿到一個實例對象，它可能根本不是由構(gòu)建函數(shù)生成的，那么能不能從一個實例對象，生成另一個實例對象呢？

JavaScript 提供了Object.create()方法，用來滿足這種需求。該方法接受一個對象作為參數(shù)，然后以它為原型，返回一個實例對象。該實例完全繼承原型對象的屬性。

// 原型對象
var A = {
  print: function () {
    console.log('hello');
  }
};

// 實例對象
var B = Object.create(A);

Object.getPrototypeOf(B) === A // true
B.print() // hello
B.print === A.print // true

上面代碼中，Object.create()方法以A對象為原型，生成了B對象。B繼承了A的所有屬性和方法。

實際上，Object.create()方法可以用下面的代碼代替。

if (typeof Object.create !== 'function') {
  Object.create = function (obj) {
    function F() {}
    F.prototype = obj;
    return new F();
  };
}

上面代碼表明，Object.create()方法的實質(zhì)是新建一個空的構(gòu)造函數(shù)F，然后讓F.prototype屬性指向參數(shù)對象obj，最后返回一個F的實例，從而實現(xiàn)讓該實例繼承obj的屬性。

下面三種方式生成的新對象是等價的。

var obj1 = Object.create({});
var obj2 = Object.create(Object.prototype);
var obj3 = new Object();

如果想要生成一個不繼承任何屬性（比如沒有toString()和valueOf()方法）的對象，可以將Object.create()的參數(shù)設(shè)為null。

var obj = Object.create(null);

obj.valueOf()
// TypeError: Object [object Object] has no method 'valueOf'

上面代碼中，對象obj的原型是null，它就不具備一些定義在Object.prototype對象上面的屬性，比如valueOf()方法。

使用Object.create()方法的時候，必須提供對象原型，即參數(shù)不能為空，或者不是對象，否則會報錯。

Object.create()
// TypeError: Object prototype may only be an Object or null
Object.create(123)
// TypeError: Object prototype may only be an Object or null

Object.create()方法生成的新對象，動態(tài)繼承了原型。在原型上添加或修改任何方法，會立刻反映在新對象之上。

var obj1 = { p: 1 };
var obj2 = Object.create(obj1);

obj1.p = 2;
obj2.p // 2

上面代碼中，修改對象原型obj1會影響到實例對象obj2。

除了對象的原型，Object.create()方法還可以接受第二個參數(shù)。該參數(shù)是一個屬性描述對象，它所描述的對象屬性，會添加到實例對象，作為該對象自身的屬性。

var obj = Object.create({}, {
  p1: {
    value: 123,
    enumerable: true,
    configurable: true,
    writable: true,
  },
  p2: {
    value: 'abc',
    enumerable: true,
    configurable: true,
    writable: true,
  }
});

// 等同于
var obj = Object.create({});
obj.p1 = 123;
obj.p2 = 'abc';

Object.create()方法生成的對象，繼承了它的原型對象的構(gòu)造函數(shù)。

function A() {}
var a = new A();
var b = Object.create(a);

b.constructor === A // true
b instanceof A // true

上面代碼中，b對象的原型是a對象，因此繼承了a對象的構(gòu)造函數(shù)A。

Object.prototype.isPrototypeOf()

實例對象的isPrototypeOf方法，用來判斷該對象是否為參數(shù)對象的原型。

var o1 = {};
var o2 = Object.create(o1);
var o3 = Object.create(o2);

o2.isPrototypeOf(o3) // true
o1.isPrototypeOf(o3) // true

上面代碼中，o1和o2都是o3的原型。這表明只要實例對象處在參數(shù)對象的原型鏈上，isPrototypeOf方法都返回true。

Object.prototype.isPrototypeOf({}) // true
Object.prototype.isPrototypeOf([]) // true
Object.prototype.isPrototypeOf(/xyz/) // true
Object.prototype.isPrototypeOf(Object.create(null)) // false

上面代碼中，由于Object.prototype處于原型鏈的最頂端，所以對各種實例都返回true，只有直接繼承自null的對象除外。

Object.prototype.proto

實例對象的__proto__屬性（前后各兩個下劃線），返回該對象的原型。該屬性可讀寫。

var obj = {};
var p = {};

obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true

上面代碼通過__proto__屬性，將p對象設(shè)為obj對象的原型。

根據(jù)語言標準，__proto__屬性只有瀏覽器才需要部署，其他環(huán)境可以沒有這個屬性。它前后的兩根下劃線，表明它本質(zhì)是一個內(nèi)部屬性，不應該對使用者暴露。因此，應該盡量少用這個屬性，而是用Object.getPrototypeOf()和Object.setPrototypeOf()，進行原型對象的讀寫操作。

原型鏈可以用__proto__很直觀地表示。

var A = {
  name: '張三'
};
var B = {
  name: '李四'
};

var proto = {
  print: function () {
    console.log(this.name);
  }
};

A.__proto__ = proto;
B.__proto__ = proto;

A.print() // 張三
B.print() // 李四

A.print === B.print // true
A.print === proto.print // true
B.print === proto.print // true

上面代碼中，A對象和B對象的原型都是proto對象，它們都共享proto對象的print方法。也就是說，A和B的print方法，都是在調(diào)用proto對象的print方法。

獲取原型對象方法的比較

如前所述，__proto__屬性指向當前對象的原型對象，即構(gòu)造函數(shù)的prototype屬性。

var obj = new Object();

obj.__proto__ === Object.prototype
// true
obj.__proto__ === obj.constructor.prototype
// true

上面代碼首先新建了一個對象obj，它的__proto__屬性，指向構(gòu)造函數(shù)（Object或obj.constructor）的prototype屬性。

因此，獲取實例對象obj的原型對象，有三種方法。

obj.__proto__
obj.constructor.prototype
Object.getPrototypeOf(obj)

上面三種方法之中，前兩種都不是很可靠。__proto__屬性只有瀏覽器才需要部署，其他環(huán)境可以不部署。而obj.constructor.prototype在手動改變原型對象時，可能會失效。

var P = function () {};
var p = new P();

var C = function () {};
C.prototype = p;
var c = new C();

c.constructor.prototype === p // false

上面代碼中，構(gòu)造函數(shù)C的原型對象被改成了p，但是實例對象的c.constructor.prototype卻沒有指向p。所以，在改變原型對象時，一般要同時設(shè)置constructor屬性。

C.prototype = p;
C.prototype.constructor = C;

var c = new C();
c.constructor.prototype === p // true

因此，推薦使用第三種Object.getPrototypeOf方法，獲取原型對象。

Object.getOwnPropertyNames()

Object.getOwnPropertyNames方法返回一個數(shù)組，成員是參數(shù)對象本身的所有屬性的鍵名，不包含繼承的屬性鍵名。

Object.getOwnPropertyNames(Date)
// ["parse", "arguments", "UTC", "caller", "name", "prototype", "now", "length"]

上面代碼中，Object.getOwnPropertyNames方法返回Date所有自身的屬性名。

對象本身的屬性之中，有的是可以遍歷的（enumerable），有的是不可以遍歷的。Object.getOwnPropertyNames方法返回所有鍵名，不管是否可以遍歷。只獲取那些可以遍歷的屬性，使用Object.keys方法。

Object.keys(Date) // []

上面代碼表明，Date對象所有自身的屬性，都是不可以遍歷的。

Object.prototype.hasOwnProperty()

對象實例的hasOwnProperty方法返回一個布爾值，用于判斷某個屬性定義在對象自身，還是定義在原型鏈上。

Date.hasOwnProperty('length') // true
Date.hasOwnProperty('toString') // false

上面代碼表明，Date.length（構(gòu)造函數(shù)Date可以接受多少個參數(shù)）是Date自身的屬性，Date.toString是繼承的屬性。

另外，hasOwnProperty方法是 JavaScript 之中唯一一個處理對象屬性時，不會遍歷原型鏈的方法。

in 運算符和 for...in 循環(huán)

in運算符返回一個布爾值，表示一個對象是否具有某個屬性。它不區(qū)分該屬性是對象自身的屬性，還是繼承的屬性。

'length' in Date // true
'toString' in Date // true

in運算符常用于檢查一個屬性是否存在。

獲得對象的所有可遍歷屬性（不管是自身的還是繼承的），可以使用for...in循環(huán)。

var o1 = { p1: 123 };

var o2 = Object.create(o1, {
  p2: { value: "abc", enumerable: true }
});

for (p in o2) {
  console.info(p);
}
// p2
// p1

上面代碼中，對象o2的p2屬性是自身的，p1屬性是繼承的。這兩個屬性都會被for...in循環(huán)遍歷。

為了在for...in循環(huán)中獲得對象自身的屬性，可以采用hasOwnProperty方法判斷一下。

for ( var name in object ) {
  if ( object.hasOwnProperty(name) ) {
    /* loop code */
  }
}

獲得對象的所有屬性（不管是自身的還是繼承的，也不管是否可枚舉），可以使用下面的函數(shù)。

function inheritedPropertyNames(obj) {
  var props = {};
  while(obj) {
    Object.getOwnPropertyNames(obj).forEach(function(p) {
      props[p] = true;
    });
    obj = Object.getPrototypeOf(obj);
  }
  return Object.getOwnPropertyNames(props);
}

上面代碼依次獲取obj對象的每一級原型對象“自身”的屬性，從而獲取obj對象的“所有”屬性，不管是否可遍歷。

下面是一個例子，列出Date對象的所有屬性。

inheritedPropertyNames(Date)
// [
//  "caller",
//  "constructor",
//  "toString",
//  "UTC",
//  ...
// ]

對象的拷貝

如果要拷貝一個對象，需要做到下面兩件事情。

確?？截惡蟮膶ο螅c原對象具有同樣的原型。
確?？截惡蟮膶ο?，與原對象具有同樣的實例屬性。

下面就是根據(jù)上面兩點，實現(xiàn)的對象拷貝函數(shù)。

function copyObject(orig) {
  var copy = Object.create(Object.getPrototypeOf(orig));
  copyOwnPropertiesFrom(copy, orig);
  return copy;
}

function copyOwnPropertiesFrom(target, source) {
  Object
    .getOwnPropertyNames(source)
    .forEach(function (propKey) {
      var desc = Object.getOwnPropertyDescriptor(source, propKey);
      Object.defineProperty(target, propKey, desc);
    });
  return target;
}

另一種更簡單的寫法，是利用 ES2017 才引入標準的Object.getOwnPropertyDescriptors方法。

function copyObject(orig) {
  return Object.create(
    Object.getPrototypeOf(orig),
    Object.getOwnPropertyDescriptors(orig)
  );
}

參考鏈接

Dr. Axel Rauschmayer, JavaScript properties: inheritance and enumerability

以上內(nèi)容是否對您有幫助：

← JavaScript 對象的繼承

JavaScript 嚴格模式 →

寫筆記

我要補充