js Object 所有知識點彙總

在js中所有對象都是Object，可以說他是js的靈魂+核心，幾乎所有js數據類型的問題往上倒三代必然就會面對它，es6新語法也是着重在object上進行了擴展，另外目前流行的vue，react，angular框架基本上都引用到object的新方法，本文就Object靈魂三問：Object是什麼？Object有哪些屬性方法？Object這些屬性方法怎麼用？做一個全面的整理總結：

js中Object的定義

首先我們必須對Object和Object()做區分；

1.Object是原型對象，它來自於 new Object()。

作爲原形對象所具有的屬性方法：

Object()是構造函數創建一個對象包裝器。本質上就是原型對象的構造函數

作爲對象包裝器所具有的屬性和方法：

3.當以非構造函數形式被調用時，Object 等同於 new Object()。即
var o = Object() 和var o = Object 效果是一樣的。

所以以上我們僅僅只是爲了說明這兩者之間是有區別的，但在實際使用中作爲構造函數使用的情況更多（傳不同的實現不同對象），所以本文更多細節是關於Object()的。

語法

// 對象初始化器（Object initialiser）或對象字面量（literal）
{ [ nameValuePair1[, nameValuePair2[, ...nameValuePairN] ] ] }

// 以構造函數形式來調用
new Object([value])

Object的屬性

1. Object.length

Object.length 值爲1，該屬性基本沒有什麼用處。

2. Object.prototype

可以爲所有 Object 類型的對象添加屬性。例如我們給所有原型對象加一個console方法

    let o = Object;
    let oj = new Object;

    let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    let arry = new Array();

    //length屬性
    console.log(Object.length);
    //prototyp屬性
    Object.prototype.sayHello=function(){
        console.log("你好，世界！")
    }

    obj.sayHello();
    o.sayHello();
    oj.sayHello();
    arry.sayHello();

因爲所有對象都繼承與Object所以所有定義的對象都具有sayHello()方法。

要爲原型對象擴展方法或者屬性就必須在prototype上,只有這樣其他所有繼承自Object的對象實例才能共有這個方法，這也是js實現繼承的根基。

Object.sd = function (){
        console.log("sd");
    }
    Object.sd();
    obj.sd();
    o.sd();
    oj.sd();
    arry.sd();

Object 構造函數的方法

1. Object.assign()

定義：通過複製一個或多個對象來創建一個新的對象。方法用於將所有可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。

語法：Object.assign(target, ...sources)

參數 target目標對象。ources源對象。


    let cc1 = {
        name:"cc",
        age:25
    }
    let cc2 = {
        job:"programmer",
        do:function(){
            console.log("你好！")
        }
    }

    let cc = Object.assign(cc1,cc2);
    console.log(cc1);
    console.log(cc2);
    console.log(cc);
    console.log(cc === cc1)

2. Object.create()

定義：使用指定的原型對象和屬性創建一個新對象。使用現有的對象來提供新創建的對象的__proto__。
語法：Object.create(proto[, propertiesObject])
參數：proto新創建對象的原型對象。
propertiesObject可選。如果沒有指定爲 undefined，則是要添加到新創建對象的不可枚舉（默認）屬性（即其自身定義的屬性，而不是其原型鏈上的枚舉屬性）對象的屬性描述符以及相應的屬性名稱。這些屬性對應Object.defineProperties()的第二個參數。

實例：1用Object.creat()實現繼承

   let Person = function(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.do = function(str){
        console.log(`我是${this.name},我在${str}`)
    }
    let CC = function(name,age){
        Person.call(this,name,age);
    }
    CC.prototype = Object.create(Person.prototype);
    CC.prototype.construct = CC;

    let cc = new CC('cc',25);
    console.log(cc);

2.用Objec.create()創建新對象；

 let Person = function(name,age){
        this.name = name;
        this.age = age;
    }
    let per = new Person("xx",22);
    let personB = Object.create(per);
    console.log(personB)

注意：新對象的_proto_上掛載被複制對象的方法屬性。

3.Object.defineProperty()

定義：給對象添加一個屬性並指定該屬性的配置。方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回這個對象。

語法：Object.defineProperty(obj, prop, descriptor)

參數：
obj
要在其上定義屬性的對象。
prop
要定義或修改的屬性的名稱。
descriptor
將被定義或修改的屬性描述符。

實例：

 let o = {};
    Object.defineProperty(o, "name", {
        value : "cc",
        writable : false,
        enumerable : false,
        configurable : false
    });
    o.name = "g"
    console.log(o)
    console.log(o.name)//cc

configurable
當且僅當該屬性的 configurable 爲 true 時，該屬性描述符才能夠被改變，同時該屬性也能從對應的對象上被刪除。默認爲 false。
enumerable
當且僅當該屬性的enumerable爲true時，該屬性才能夠出現在對象的枚舉屬性中。默認爲 false。
writable
當且僅當該屬性的writable爲true時，value才能被賦值運算符改變。默認爲 false。
注意：在ES6中，由於 Symbol類型的特殊性，用Symbol類型的值來做對象的key與常規的定義或修改不同，而Object.defineProperty 是定義key爲Symbol的屬性的方法之一。

4.Object.defineProperties()

給對象添加多個屬性並分別指定它們的配置。用法與3相同

實例：

 let o = {};
    Object.defineProperties(o, {"name": {
        value : "cc",
        writable : false,
        enumerable : false,
        configurable : false
    },
    "age":{
        value : 25,
        writable : false,
        enumerable : false,
        configurable : false
    }});    
    o.name = "g"
    console.log(o)
    console.log(o.name)

5.Object.entries()

方法返回一個給定對象自身可枚舉屬性的鍵值對數組，其排列與使用 for…in 循環遍歷該對象時返回的順序一致（區別在於 for-in 循環還會枚舉原型鏈中的屬性）。
實例：


    let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    console.log(Object.entries(obj))

6.Object.freeze()

凍結對象：其他代碼不能刪除或更改任何屬性。
方法可以凍結一個對象。一個被凍結的對象再也不能被修改；凍結了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個對象後該對象的原型也不能被修改。freeze() 返回和傳入的參數相同的對象。

實例：

 let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    // console.log(Object.entries(obj))
    var o = Object.freeze(obj);
    o === obj; // true
    Object.isFrozen(obj); // === true

    o.name = "gg"
    console.log(o)

7.Object.getOwnPropertyDescriptor()

返回對象指定的自有屬性配置。自有屬性指的是直接賦予該對象的屬性，不需要從原型鏈上進行查找的屬性

語法
Object.getOwnPropertyDescriptor(obj, prop)
參數
obj
需要查找的目標對象
prop
目標對象內屬性名稱

實例：

let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }

    let d = Object.getOwnPropertyDescriptor(obj, "do");
    console.log(d)

8.Object.getOwnPropertyNames()

返回一個數組，它包含了指定對象所有的可枚舉或不可枚舉的屬性名。方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作爲名稱的屬性）組成的數組。

實例：

 let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    console.log(Object.getOwnPropertyNames(obj));

9.Object.getOwnPropertySymbols()

返回一個數組，它包含了指定對象自身所有的符號屬性。

實例：

var a = Symbol("a");
    var b = Symbol.for("b");

    obj[a] = "localSymbol";
    obj[b] = "globalSymbol";

    var objectSymbols = Object.getOwnPropertySymbols(obj);
    console.log(objectSymbols);

10.Object.getPrototypeOf()

返回指定對象的原型對象。內部[[Prototype]]屬性的值。

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

11.Object.is()

比較兩個值是否相同。所有 NaN 值都相等（這與和=不同）。

語法
Object.is(value1, value2);
參數
value1
第一個需要比較的值。
value2
第二個需要比較的值。
返回值
表示兩個參數是否相同的布爾值。

Object.is() 判斷兩個值是否相同。如果下列任何一項成立，則兩個值相同：

兩個值都是 undefined
兩個值都是 null
兩個值都是 true 或者都是 false
兩個值是由相同個數的字符按照相同的順序組成的字符串
兩個值指向同一個對象
兩個值都是數字並且
都是正零 +0
都是負零 -0
都是 NaN
都是除零和 NaN 外的其它同一個數字
注意：
這種相等性判斷邏輯和傳統的 == 運算不同，== 運算符會對它兩邊的操作數做隱式類型轉換（如果它們類型不同），然後才進行相等性比較，（所以纔會有類似 “” == false 等於 true 的現象），但 Object.is 不會做這種類型轉換。
這與 === 運算符的判定方式也不一樣。=== 運算符（和== 運算符）將數字值 -0 和 +0 視爲相等，並認爲 Number.NaN 不等於 NaN。

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false

Object.is(null, null);       // true

// 特例
Object.is(0, -0);            // false
Object.is(0, +0);            // true
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

12.Object.isExtensible()

判斷對象是否可擴展。默認情況下，對象是可擴展的：即可以爲他們添加新的屬性。以及它們的 proto 屬性可以被更改。Object.preventExtensions，Object.seal 或 Object.freeze 方法都可以標記一個對象爲不可擴展（non-extensible）

語法
Object.isExtensible(obj)
參數
obj
需要檢測的對象
返回值
表示給定對象是否可擴展的一個Boolean 。

// 密封對象是不可擴展的.
var sealed = Object.seal({});
Object.isExtensible(sealed); // === false

// 凍結對象也是不可擴展.
var frozen = Object.freeze({});
Object.isExtensible(frozen); // === false

13.Object.isFrozen()

判斷對象是否已經凍結。一個對象是凍結的是指它不可擴展，所有屬性都是不可配置的，且所有數據屬性（即沒有getter或setter組件的訪問器的屬性）都是不可寫的。

語法
Object.isFrozen(obj)
參數
obj
被檢測的對象。
返回值
表示給定對象是否被凍結的Boolean。

// 使用Object.freeze是凍結一個對象最方便的方法.
var frozen = { 1: 81 };
Object.isFrozen(frozen) //=== false
Object.freeze(frozen);
Object.isFrozen(frozen) //=== true

// 一個凍結對象也是一個密封對象.
Object.isSealed(frozen) //=== true

// 當然,更是一個不可擴展的對象.
Object.isExtensible(frozen) //=== false

14.Object.isSealed()

判斷對象是否已經密封。密封對象是指那些不可擴展的，且所有自身屬性都不可配置且因此不可刪除（但不一定是不可寫）的對象。

15.Object.keys()

返回一個包含所有給定對象自身可枚舉屬性名稱的數組，返回一個所有元素爲字符串的數組，其元素來自於從給定的object上面可直接枚舉的屬性。這些屬性的順序與手動遍歷該對象屬性時的一致。

例子：

   let obj = {
        name:"cc",
        age:25,
        do:function(str){
            console.log(`我是${this.name},我在${str}`)
        }
    }
    console.log(Object.keys(obj));

16.Object.preventExtensions()

防止對象的任何擴展。
如果一個對象可以添加新的屬性，則這個對象是可擴展的。Object.preventExtensions()將對象標記爲不再可擴展，因此它將永遠不會具有超出它被標記爲不可擴展的屬性。注意，一般來說，不可擴展對象的屬性可能仍然可被刪除。嘗試將新屬性添加到不可擴展對象將靜默失敗或拋出TypeError（最常見但不排除其他情況，如在strict mode中）。

Object.preventExtensions()僅阻止添加自身的屬性。但屬性仍然可以添加到對象原型。

一旦使其不可擴展，就無法再對象進行擴展。

17. Object.seal()

防止其他代碼刪除對象的屬性。封閉一個對象，阻止添加新屬性並將所有現有屬性標記爲不可配置。當前屬性的值只要原來是可寫的就可以改變。

通常，一個對象是可擴展的（可以添加新的屬性）。密封一個對象會讓這個對象變的不能添加新屬性，且所有已有屬性會變的不可配置。屬性不可配置的效果就是屬性變的不可刪除，以及一個數據屬性不能被重新定義成爲訪問器屬性，或者反之。但屬性的值仍然可以修改。嘗試刪除一個密封對象的屬性或者將某個密封對象的屬性從數據屬性轉換成訪問器屬性，結果會靜默失敗或拋出TypeError（在嚴格模式中最常見的，但不唯一）。

不會影響從原型鏈上繼承的屬性。但 proto ( ) 屬性的值也會不能修改。

返回被密封對象的引用。

18.Object.setPrototypeOf()

設置對象的原型（即內部 [[Prototype]] 屬性）。
如果對象的[[Prototype]]被修改成不可擴展(通過 Object.isExtensible()查看)，就會拋出 TypeError異常。如果prototype參數不是一個對象或者null(例如，數字，字符串，boolean，或者 undefined)，則什麼都不做。否則，該方法將obj的[[Prototype]]修改爲新的值。

Object.setPrototypeOf()是ECMAScript 6最新草案中的方法，相對於 Object.prototype.proto ，它被認爲是修改對象原型更合適的方法

語法
Object.setPrototypeOf(obj, prototype)
參數
obj
要設置其原型的對象。.
prototype
該對象的新原型(一個對象或 null).

Object.prototype 上的方法

1.Object.prototype.hasOwnProperty()

返回一個布爾值，表示某個對象是否含有指定的屬性，而且此屬性非原型鏈繼承的。

語法
obj.hasOwnProperty(prop)
參數
prop
要檢測的屬性的 String 字符串形式表示的名稱，或者 Symbol。
返回值
用來判斷某個對象是否含有指定的屬性的布爾值 Boolean。

o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

2.Object.prototype.watch() （尚未成爲標準但很有用要了解）

給對象的某個屬性增加監聽。

語法
obj.watch(prop, handler)
參數
prop
想要監視值是否發生變化的指定對象的某個屬性的屬性名稱
handler
當指定的屬性發生變化時執行的回調函數
返回值
undefined.

監視對指定對象的名爲 prop 屬性的賦值操作，只要 prop 屬性被賦值，便調用 handler(prop, oldval, newval) 回調函數，並將函數返回值保存到該屬性。通過返回修改的新值（或者返回舊值），一個監視點可以過濾（或使之爲 null ）賦值。

如果你刪除某個設置監視點的屬性，該監視點並不會消失。如果你之後重新創建這個屬性，監視點仍然有效。

要移除某個監視點，使用 unwatch() 方法。默認所有 Object 的後代都將繼承 watch 方法。

guocongcong-cc

發佈了77 篇原創文章 · 獲贊 8 · 訪問量 6864

私信關注

js Object 所有知識點彙總

文章目錄