JavaScript 複習之 Object物件的相關方法

DreamTruth發表於2019-02-28
JavaScriptObject物件

Object.getPrototypeOf()

返回引數物件的原型。

幾種特殊物件的原型。

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

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

// 函式的原型是 Function.prototype
function f() {}
Object.getPrototypeOf(f) === Function.prototype // true
複製程式碼

Object.setPrototypeOf()

為引數物件設定原型，返回該引數物件。它接受兩個引數，第一個是現有物件，第二個是原型物件。

Object.create()

方法接受一個物件作為引數，然後以它為原型，返回一個例項物件。該例項完全繼承原型物件的屬性。

//原型物件
let A = {
    print:function(){
        console.log('hello');
    }
}

//例項物件
let B = Object.create(A);

Object.getPrototypeOf(B) === A // true
B.print() // hello
B.print === A.print // true
複製程式碼
if (typeof Object.create !== 'function') {
  Object.create = function (obj) {
    function F() {}
    F.prototype = obj;
    return new F();
  };
}
複製程式碼

上面程式碼表明，Object.create方法的實質是新建一個空的建構函式F，然後讓F.prototype屬性指向引數物件obj，最後返回一個F的例項，從而實現讓該例項繼承obj的屬性。

Object.create方法生成的新物件，動態繼承了原型。在原型上新增或者修改任何方法，會立刻反應在新物件上。

Object.create還可以接收第二個引數，該引數是一個屬性描述物件，會新增到例項物件，作為該物件自身的屬性。

Object.create方法生成的物件，繼承了它的原型物件的建構函式。

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

b.constructor === A // true
b instanceof A // true
複製程式碼

Object.prototype.isPrototypeOf()

判斷物件是否為引數物件的原型。

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

o2.isPrototypeOf(o3) // true
o1.isPrototypeOf(o3) // true
複製程式碼

Object.prototype.proto

返回該物件的原型，該屬性可讀寫。

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

obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true
複製程式碼

Object.getOwnPropertyNames()

方法返回一個陣列，成員是引數物件本身的所有屬性的鍵名，不包含繼承的屬性鍵名。

Object.prototype.hasOwnProperty()

方法返回一個布林值，用於判斷某個屬性定義在物件自身，還是定義在原型鏈上。

in 運算子和 for...in 迴圈

in運算子返回一個布林值，表示一個物件是否具有某個屬性。

獲得物件的所有可遍歷屬性（不管是自身的還是繼承的），可以使用for...in迴圈。

物件的拷貝

拷貝一個物件，需要做到下面兩件事：

  • 確保拷貝後的物件，與原物件具有同樣的原型
  • 確保拷貝後的物件，與原物件具有同樣的例項屬性
function copyobj(obj){
    var copy = Object.create(obj.prototype);
    coopyOwnPropertiesFrom(copy,obj);
    return copy;
}
function coopyOwnPropertiesFrom(target,source){
    Object
    .getOwnPropertyNames(source)
    .forEarch(funciton(propKey){
        var desc = Object.getOwnPropertyDescriptor(source,peopKey);
        Object.defineProperty(target, propKey, desc);
    });
    
    return target;
}
複製程式碼

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

function copyObject(orig) {
  return Object.create(
    Object.getPrototypeOf(orig),
    Object.getOwnPropertyDescriptors(orig)
  );
}
複製程式碼

相關文章