Object est un type que nous utilisons souvent en JavaScript, et tous les objets en JS héritent de l'objet Object. Bien que nous utilisions généralement simplement l'objet Object pour stocker des données et n'utilisons pas beaucoup d'autres fonctions, l'objet Object contient en fait de nombreuses propriétés et méthodes utiles, en particulier les méthodes ajoutées par ES5. Par conséquent, cet article commencera par la fin. Introduction de base, les méthodes et applications courantes d'Object sont expliquées en détail.

Introduction de base

Création d'objets

Tout d'abord, nous savons tous qu'un objet est une collection de données similaires et des fonctions. Nous l'utilisons pour simuler des objets dans notre monde réel. En Javascript, il existe généralement deux manières de créer des objets : les constructeurs et les littéraux d'objet.

nouvelle méthode de constructeur

var person = new Object();
person.name = "狼狼的藍(lán)胖子";
person.age = 25;

Cette méthode utilise le mot-clé new, suivi du constructeur Object, puis ajoute dynamiquement différents attributs à l'instance d'objet. Cette méthode est relativement lourde et il est généralement recommandé d'utiliser des littéraux d'objet pour créer des objets.

Littéral d'objet

Le littéral d'objet est facile à comprendre. Il crée des objets directement sous forme de clé/valeur, ce qui est simple et pratique.

var person = {
    name: “狼狼的藍(lán)胖子”,
    age: 25
};

Cette méthode enveloppe directement les attributs de l'objet avec des accolades, utilise la clé/valeur pour créer des attributs d'objet et sépare chaque attribut par des virgules.
Remarque?: S'il s'agit du dernier attribut, n'ajoutez pas de virgule après, car une erreur sera signalée dans certains anciens navigateurs.

Propriétés et méthodes des instances d'objet

Quelle que soit la méthode utilisée pour créer une instance d'objet, l'instance aura les propriétés et méthodes suivantes, qui seront expliquées une par une ci-dessous.

attribut constructeur

L'attribut constructeur est le constructeur qui enregistre l'objet actuel. Dans l'exemple précédent, le constructeur enregistre la méthode Object.

var obj1 = new Object();
obj1.id = "obj1";
var obj2 = {
    "id": "obj2"
};

console.log(obj1.constructor);//function Object(){}
console.log(obj2.constructor);//function Object(){}

Méthode hasOwnProperty(propertyName)

La méthode hasOwnProperty re?oit un paramètre de cha?ne, qui représente le nom de la propriété et est utilisée pour déterminer si la propriété est dans le courant instance d'objet, plut?t que dans la cha?ne de prototypes de l'objet. Jetons un coup d'?il à l'exemple suivant?:

var arr = [];        
console.log(arr.hasOwnProperty("length"));//true
console.log(arr.hasOwnProperty("hasOwnProperty"));//false

Dans cet exemple, d'abord en définissant une instance arr d'un objet tableau, nous savons que l'objet tableau hérite en fait de l'objet Objet via la cha?ne de prototypes, et puis possède la sienne. Pour certaines propriétés, nous utilisons la méthode hasOwnProperty pour déterminer que length est la propre propriété d'arr et que hasOwnProperty est une propriété sur la cha?ne de prototypes.

La méthode hasOwnProperty peut être combinée avec for..in pour obtenir la propre clé de l'objet.

Méthode isPrototypeOf(Object)

La méthode isPrototype re?oit un objet et est utilisée pour déterminer si l'objet actuel se trouve sur la cha?ne de prototypes de l'objet paramètre passé. un peu abstrait à dire, jetons un ?il au code.

function MyObject() {}
var obj = new MyObject();
console.log(Object.prototype.isPrototypeOf(obj));

Nous savons que MyObject hérite de l'objet Object, et dans JS, l'héritage est implémenté via un prototype, donc le prototype d'Object doit être sur la cha?ne de prototypes de l'instance d'objet MyObject. La méthode

propertyIsEnumerable(prototypeName)

prototypeIsEnumerable est utilisée pour déterminer si la propriété donnée peut être énumérée par l'instruction for..in. Regardez le code suivant?:

var obj = {
    name: "objName"
}  
for (var i in obj) {
    console.log(i);
}

Exécutez ce code pour afficher la cha?ne "name", ce qui signifie que l'attribut name de obj peut être obtenu via l'instruction for...in, mais nous savons que il existe de nombreux attributs de obj , tels que constructeur, hasOwnPrototype, etc., mais ils ne sont pas affichés, ce qui indique que ces propriétés ne peuvent pas être énumérées par for...in et peuvent être obtenues via la méthode propertyIsEnumerable.

console.log(obj.propertyIsEnumerable("constructor"));//false

Déterminez si le "constructeur" peut être énuméré et affichez false pour indiquer qu'il ne peut pas être énuméré.

Méthode toLocaleString()

La méthode toLocalString renvoie la représentation sous forme de cha?ne de l'objet, qui est liée à l'environnement d'exécution du code.

var obj = {};
console.log(obj.toLocaleString());//[object Object]  

var date = new Date();
console.log(date.toLocaleString());//2016/2/28 下午1:39:27

méthode toString()

toString est utilisée pour renvoyer la représentation sous forme de cha?ne de l'objet.

var obj = {};
console.log(obj.toString());//[object Object]

var date = new Date();
console.log(date.toString());//Sun Feb 28 2016 13:40:36 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

Méthode valueOf()

La méthode valueOf renvoie la valeur originale de l'objet, qui peut être une cha?ne, une valeur numérique ou une valeur booléenne, etc., en fonction de l'objet spécifique.

var obj = {
    name: "obj"
};
console.log(obj.valueOf());//Object {name: "obj"}

var arr = [1];
console.log(arr.valueOf());//[1]

var date = new Date();
console.log(date.valueOf());//1456638436303

Comme indiqué dans le code, trois instances d'objet différentes appellent valueOf pour renvoyer des données différentes.

Types d'attributs

En Javascript, il existe deux types d'attributs, à savoir les attributs de données et les attributs d'accesseur. Voyons ce que sont ces deux attributs.

Attributs de données

Les attributs de données peuvent être compris comme les attributs que nous attribuons lorsque nous définissons habituellement des objets, et ils peuvent être lus et écrits. Cependant, ES5 définit certains attributs, qui sont utilisés pour décrire diverses caractéristiques des attributs. Les attributs sont des valeurs internes et ne sont pas accessibles directement. Les attributs sont représentés par deux crochets, tels que [[Enumerable]]. Les caractéristiques de l'attribut auront des valeurs par défaut. Pour modifier la valeur par défaut de l'attribut, vous devez utiliser la nouvelle méthode Object.defineProperty définie par ES5 pour la modifier.

L'attribut data possède 4 fonctionnalités qui décrivent ses caractéristiques. Chaque fonctionnalité sera expliquée tour à tour ci-dessous?:

(1) [[Configurable]]?: Cette fonctionnalité indique si elle peut être supprimée via l'opérateur de suppression Supprime l'attribut. La valeur par défaut est true.

var obj = {};
obj.name = "myname";

delete obj.name;
console.log(obj.name);//undefined

Ce code est évident. Après avoir supprimé l'attribut name de obj via delete, nous ne pouvons plus accéder à l'attribut name.

我們通過(guò)Object.defineProperty方法來(lái)修改[[Configurable]]特性。

var obj = {};
obj.name = "myname";
Object.defineProperty(obj, "name", {
    configurable: false
})                

delete obj.name;
console.log(obj.name);//myname

通過(guò)將configurable特性設(shè)置成false之后，delete就無(wú)法刪除name屬性了，如果在嚴(yán)格模式下，使用delete去刪除就會(huì)報(bào)錯(cuò)。

（2）[[Enumerable]]：表示是否能夠通過(guò)for…in語(yǔ)句來(lái)枚舉出屬性，默認(rèn)是true

我們來(lái)看看前面的例子：

var obj = {
    name: "objName"
}  
for (var i in obj) {
    console.log(i);//name
}

這段代碼只輸出了name屬性，我們來(lái)將constructor屬性的[[Enumerable]]設(shè)置為true試試。

var obj = {
        name: "objName"
}
Object.defineProperty(obj, "constructor", {
    enumerable: true
})

for (var i in obj) {
    console.log(i);//name,constructor
}
console.log(obj.propertyIsEnumerable("constructor"));//true

這段代碼中，for…in循環(huán)得到了name和constructor兩個(gè)屬性，而通過(guò)propertyIsEnumerable方法來(lái)判斷constructor也返回了true。

（3）[[Writable]]：表示屬性值是否可以修改，默認(rèn)為true
如果[[Writable]]被設(shè)置成false，嘗試修改時(shí)將沒(méi)有效果，在嚴(yán)格模式下會(huì)報(bào)錯(cuò)

（4）[[Value]]：表示屬性的值，默認(rèn)為undefined

我們通過(guò)一個(gè)簡(jiǎn)單的例子來(lái)看看這兩個(gè)特性：

var obj = {
    name: "name"
};
console.log(obj.name);//name        

Object.defineProperty(obj, "name", {
    value: "newValue",
    writable: false
})
console.log(obj.name);//newValue

obj.name = "oldValue";
console.log(obj.name);//newValue

我們首先定義了obj對(duì)象的name屬性值為“name”，然后通過(guò)defineProperty方法來(lái)修改值，并且將其設(shè)置為不可修改的。接著我們?cè)傩薷膎ame屬性的值，可以發(fā)現(xiàn)修改無(wú)效。

如果我們通過(guò)defineProperty來(lái)修改name屬性的值，是否可以修改呢？答案是可以的：

Object.defineProperty(obj, "name", {
    value: "oldValue"
})
console.log(obj.name); //oldValue

訪問(wèn)器屬性

訪問(wèn)器屬性有點(diǎn)類(lèi)似于C#中的屬性，和數(shù)據(jù)屬性的區(qū)別在于，它沒(méi)有數(shù)據(jù)屬性的[[Writable]]和[[Value]]兩個(gè)特性，而是擁有一對(duì)getter和setter函數(shù)。

[[Get]]：讀取屬性時(shí)調(diào)用的函數(shù)，默認(rèn)是undefined
[[Set]]：設(shè)置屬性時(shí)調(diào)用的函數(shù)，默認(rèn)是undefined

getter和setter是一個(gè)很有用的東西，假設(shè)有兩個(gè)屬性，其中第二個(gè)屬性值會(huì)隨著第一個(gè)屬性值的變化而變化。這種場(chǎng)景在我們平時(shí)的編碼中起始是非常常見(jiàn)的。在之前的做法中，我們往往要去手動(dòng)修改第二個(gè)屬性的值，那現(xiàn)在我們就可以通過(guò)get和set函數(shù)來(lái)解決這個(gè)問(wèn)題?？聪旅孢@個(gè)例子：

var person = {
    age: 10
}

Object.defineProperty(person, "type", {
    get: function () {
        if (person.age > 17) {
            return "成人";
        }
        return "小孩";
    }
})

console.log(person.type);//小孩

person.age = 18;
console.log(person.type);//成人

通過(guò)修改age的值，type的值也會(huì)相應(yīng)的修改，這樣我們就不用再手動(dòng)的去修改type的值了。

下面這種方式也是可以實(shí)現(xiàn)同樣的效果：

var person = {
    _age: 10,
    type: "小孩"
} 

Object.defineProperty(person, "age", {
    get: function () {
        return this._age;
    },
    set: function (newValue) {
        this._age = newValue;
        this.type = newValue > 17 ? "成人" : "小孩";
    }
})
console.log(person.type);

person.age = 18;
console.log(person.type);

關(guān)于訪問(wèn)器屬性，有幾點(diǎn)要注意：

1、嚴(yán)格模式下，必須同時(shí)設(shè)置get和set
2、非嚴(yán)格模式下，可以只設(shè)置其中一個(gè)，如果只設(shè)置get，則屬性是只讀的，如果只設(shè)置set，屬性則無(wú)法讀取
3、Object.defineProperty是ES5中的新方法，IE9（IE8部分實(shí)現(xiàn)，只有dom對(duì)象才支持）以下瀏覽器不支持，一些舊的瀏覽器可以通過(guò)非標(biāo)準(zhǔn)方法defineGetter()和defineSetter()來(lái)設(shè)置，這里就不說(shuō)明了，有興趣的同學(xué)可以查找相關(guān)資料。

特性操作的相關(guān)方法

ES5提供了一些讀取或操作屬性特性的方法，前面用到的Object.defineProperty就是其中之一。我總結(jié)了一些比較常用的方法如下：

（1）Object.defineProperty

定義一個(gè)對(duì)象的屬性，這個(gè)方法前面我們已經(jīng)用到多次，簡(jiǎn)單說(shuō)說(shuō)其用法。

Object.defineProperty(obj,propName,descriptor);

defineProperty有點(diǎn)類(lèi)似于定于在Object上的靜態(tài)方法，通過(guò)Object直接調(diào)用，它接收3個(gè)參數(shù)：
obj：需要定義屬性的對(duì)象
propNane：需要被定義的屬性名稱(chēng)
defineProperty：屬性描述符，包含一些屬性的特性定義

例子如下：

var obj = {};
Object.defineProperty(obj, "name", {
    value: "name",
    configurable: true,
    writable: true,
    enumerable: true
});

（2）Object.defineProperties

和defineProperty類(lèi)似，是用來(lái)定義對(duì)象屬性的，不同的是它可以用來(lái)同時(shí)定義多個(gè)屬性，我們通過(guò)命名也可以看出來(lái)，用法如下：

var obj = {};
Object.defineProperty(obj, {
    "name": {
        value: "name",
        configurable: true,
        writable: true,
        enumerable: true
    },
    "age": {
        value: 20 
    }
});

（3）Object.getOwnPropertyDescriptor

ES5中還提供了一個(gè)讀取特性值的方法，該方法接收對(duì)象及其屬性名作為兩個(gè)參數(shù)，返回一個(gè)對(duì)象，根據(jù)屬性類(lèi)型的不同，返回對(duì)象會(huì)包含不同的值。

var person = {
    _age: 10,
    type: "小孩"
}
Object.defineProperty(person, "age", {
    get: function () {
        return this._age;
    },
    set: function (newValue) {
        this._age = newValue;
        this.type = newValue > 17 ? "成人" : "小孩";
    }
})

console.log(Object.getOwnPropertyDescriptor(person, "type"));//Object {value: "成人", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(person, "age")); //Object {enumerable: false, configurable: false, get: function(),set: function ()}

Object的方法

在ES5中，Object對(duì)象上新增了一批方法，這些方法可以直接通過(guò)Object進(jìn)行訪問(wèn)，前面用到的defineProperty就是新增的方法之一。除此之外還有很多方法，我將其總結(jié)歸納如下：

對(duì)象創(chuàng)建型方法

Object.create(proto, [propertiesObject])

在前面我們提到，創(chuàng)建一個(gè)對(duì)象有兩種方法：構(gòu)造函數(shù)和對(duì)象字面量。

這兩種方法有一個(gè)缺點(diǎn)就是：如果要?jiǎng)?chuàng)建多個(gè)對(duì)象，寫(xiě)起來(lái)很繁瑣，所以后來(lái)就有了一種創(chuàng)建自定義構(gòu)造函數(shù)的方法來(lái)創(chuàng)建對(duì)象，如下所示：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var person = new Person("Jack", 15);

這種方式可以很方便的創(chuàng)建多個(gè)同樣的對(duì)象，也是目前比較常用的方法。

ES5提供的Object.create方法也是一個(gè)創(chuàng)建對(duì)象的方法，這個(gè)方法允許為創(chuàng)建的對(duì)象選擇原型對(duì)象，不需要定義一個(gè)構(gòu)造函數(shù)。用法如下：

var obj = Object.create(Object.prototype, { 
    name: {
        value: "Jack"
    }
})
console.log(obj.name);//Jack

這個(gè)方法接收的第一個(gè)參數(shù)作為被創(chuàng)建對(duì)象的原型，第二個(gè)參數(shù)是對(duì)象的屬性。注意：在這個(gè)例子中，name屬性是無(wú)法被修改的，因?yàn)樗鼪](méi)有設(shè)置writable特性，默認(rèn)則為false。

個(gè)人看法：Object.create這種創(chuàng)建對(duì)象的方式略顯繁瑣，除非是需要修改屬性的特性，否則不建議使用這種方式創(chuàng)建對(duì)象。

屬性獲取型方法

Object.keys

Object.keys是用來(lái)獲取給定對(duì)象的所有可枚舉的自身屬性的屬性名，它返回一個(gè)數(shù)組。

function Parent() {
    this.lastName = "Black"
}
function Child(firstName) {
    this.firstName = firstName;
}
Child.prototype = new Parent();

var son = new Child("Jack");
console.log(Object.keys(son));//["firstName"]

代碼中返回了firstName，并沒(méi)有返回從prototype繼承而來(lái)的lastName和不可枚舉的相關(guān)屬性。

在一些舊的瀏覽器中，我們可以使用hasOwnProperty和for…in來(lái)達(dá)到類(lèi)似的效果。

Object.keys = Object.keys ||
    function (obj) {
        var keys = [];
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                keys.push(key);
            }
        }
        return keys;
    }

Object.getOwnPropertyNames()

getOwnPropertyNames用來(lái)獲取對(duì)象自身的所有屬性，包括可枚舉和不可枚舉的所有屬性，如下所示：

function Parent() {
    this.lastName = "Black"
}
function Child(firstName) {
    this.firstName = firstName;
}
Child.prototype = new Parent();

var son = new Child("Jack");
Object.defineProperty(son, "age", {
    enumerable: false
})
console.log(Object.keys(son));//["firstName"]  
console.log(Object.getOwnPropertyNames(son));//["firstName", "age"]

我們定義給son對(duì)象定義了一個(gè)不可枚舉的屬性age，然后通過(guò)keys和getOwnPropertyNames兩個(gè)方法來(lái)獲取屬性列表，能明顯看出了兩者區(qū)別。

屬性特性型方法

這個(gè)主要是前面提到的三個(gè)方法：defineProperty，defineProperties和getOwnPropertyDescriptor三個(gè)方法

對(duì)象限制型方法

ES5中提供了一系列限制對(duì)象被修改的方法，用來(lái)防止被某些對(duì)象被無(wú)意間修改導(dǎo)致的錯(cuò)誤。每種限制類(lèi)型包含一個(gè)判斷方法和一個(gè)設(shè)置方法。

阻止對(duì)象擴(kuò)展

Object.preventExtensions()用來(lái)限制對(duì)象的擴(kuò)展，設(shè)置之后，對(duì)象將無(wú)法添加新屬性，用法如下：

Object.preventExtensions(obj);

該方法接收一個(gè)要被設(shè)置成無(wú)法擴(kuò)展的對(duì)象作為參數(shù)，需要注意兩點(diǎn)：

1、對(duì)象的屬性不可用擴(kuò)展，但是已存在的屬性可以被刪除
2、無(wú)法添加新屬性指的是無(wú)法在自身上添加屬性，如果是在對(duì)象的原型上，還是可以添加屬性的。

function Person(name) {
    this.name = name;
}
var person = new Person("Jack");
Object.preventExtensions(person);

delete person.name;
console.log(person.name);//undefined

Person.prototype.age = 15;
console.log(person.age);//15

Object.isExtensible方法用來(lái)判斷一個(gè)對(duì)象是否可擴(kuò)展，默認(rèn)情況是true

將對(duì)象密封

Object.seal可以密封一個(gè)對(duì)象并返回被密封的對(duì)象。

密封對(duì)象無(wú)法添加或刪除已有屬性，也無(wú)法修改屬性的enumerable，writable，configurable，但是可以修改屬性值。

function Person(name) {
    this.name = name;
}
var person = new Person("Jack");
Object.seal(person);
delete person.name;
console.log(person.name);//Jack

將對(duì)象密封后，使用delete刪除對(duì)象屬性，還是可以訪問(wèn)得到屬性。

通過(guò)Object.isSealed可以用來(lái)判斷一個(gè)對(duì)象是否被密封了。

凍結(jié)對(duì)象

Object.freeze方法用來(lái)凍結(jié)一個(gè)對(duì)象，被凍結(jié)的對(duì)象將無(wú)法添加，修改，刪除屬性值，也無(wú)法修改屬性的特性值，即這個(gè)對(duì)象無(wú)法被修改。

function Person(name) {
    this.name = name;
}
var person = new Person("Jack");
Object.freeze(person);

delete person.name;
console.log(person.name);//Jack

Person.prototype.age = 15;
console.log(person.age);//15

分析上面的代碼我們可以發(fā)現(xiàn)，被凍結(jié)的對(duì)象無(wú)法刪除自身的屬性，但是通過(guò)其原型對(duì)象還是可以新增屬性的。

通過(guò)Object.isFrozen可以用來(lái)判斷一個(gè)對(duì)象是否被凍結(jié)了。

可以發(fā)現(xiàn)：這三個(gè)限制對(duì)象的方法的限制程度是依次上升的。

總結(jié)

Object雖說(shuō)是一個(gè)我們平時(shí)開(kāi)發(fā)中最經(jīng)常用到的對(duì)象，但是它的很多功能還沒(méi)有被我們挖掘出來(lái)。本文首先介紹了Object的基本使用，接著介紹了一些比較少使用到的屬性特性，最后分析了一些比較常用的方法，尤其是ES5中提供的新方法。歡迎大家交流??！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!