Przejdź do treści

Manipulacja obiektami w JavaScript - Object

W jaki sposób manipulować obiektami w języku JavaScript?

Przekształcanie wartości na obiekt w JavaScript - Object

Jak przekształcić wartość prostą (logiczną, liczbę, tekst) na obiekt?

Object()
Object(value)
Parametry:
value - wartość do konwersji
Wartość:
Boolean - skonwertowany obiekt logiczny
Number - skonwertowany obiekt liczbowy
String - skonwertowany obiekt tekstowy
Object - nowa instancja obiektu ogólnego

Jeżeli wartość value wynosi null, undefined albo nie została podana, zwracana jest nowa instancja obiektu ogólnego - czyli to samo, co w przypadku: new Object(). W pozostałych przypadkach następuje konwersja podanej wartości na odpowiedni typ obiektowy.

Przykład Object

Object(true);      // new Boolean(true)
Object(1);         // new Number(1)
Object("test");    // new String("test")
Object();          // new Object()
Object(null);      // new Object()
Object(undefined); // new Object()

Tworzenie nowego obiektu w JavaScript - new Object

Jak utworzyć nowy obiekt?

new Object()
new Object(value)
Parametry:
value - wartość na podstawie której zostanie utworzony obiekt
Wartość:
Boolean - skonwertowany obiekt logiczny
Number - skonwertowany obiekt liczbowy
String - skonwertowany obiekt tekstowy
value - przekazana instancja obiektu wbudowanego

Jeżeli wartość value wynosi null, undefined albo nie została podana, zwracana jest nowa instancja obiektu ogólnego. W przypadku podania wartości logicznej, liczby albo tekstu, nastąpi konwersja podanej wartości na odpowiedni typ obiektowy. Natomiast jeżeli jako wartość value zostanie podany inny obiekt wbudowany, powinien on zostać zwrócony bez tworzenia nowej instancji.

Przykład new Object

new Object(true);        // new Boolean(true)
new Object(1);           // new Number(1)
new Object("test");      // new String("test")
new Object();            // {}
new Object(null);        // {}
new Object(undefined);   // {}
 
var obj = {};
new Object(obj) === obj; // true
new Object(obj) === {};  // false

Pobieranie prototypu obiektu w JavaScript - getPrototypeOf

W jaki sposób pobrać prototyp podanej instancji obiektu?

(interpretuje: Internet Explorer 9, Firefox 3.5, Opera 12, Chrome)

Object.getPrototypeOf(O)
Parametry:
O - obiekt, którego prototyp ma zostać zwrócony
Wartość:
Object - prototyp obiektu
Wyjątki:
TypeError - wartość O nie jest obiektem

Zwraca prototyp podanego obiektu.

Przykład Object.getPrototypeOf

Object.getPrototypeOf({});
Object.getPrototypeOf(true);   // TypeError
Object.getPrototypeOf(1);      // TypeError
Object.getPrototypeOf("test"); // TypeError
Object.getPrototypeOf(null);   // TypeError

Deskryptor właściwości obiektu w JavaScript - getOwnPropertyDescriptor

Jak pobrać deskryptor właściwości podanej instancji obiektu?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome oraz częściowo Internet Explorer 8)

Object.getOwnPropertyDescriptor(O, P)
Parametry:
O - obiekt, którego deskryptor właściwości ma zostać pobrany
String P - nazwa właściwości obiektu O
Wartość:
Object - deskryptor właściwości
Undefined - obiekt nie posiada podanej właściwości
Wyjątki:
TypeError - wartość O nie jest obiektem

Zwraca tzw. deskryptor właściwości, który pozwala sterować dostępem do podanej właściwości obiektu [zobacz: Object.defineProperty]. Nie uwzględnia właściwości przejętych z prototypu, a jedynie bezpośrednio przypisane do obiektu.

Przykład Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor({p: 1}, "p"); // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor({}, "p");     // undefined
 
var Cls = function () {
    this.p = 1;
};
Cls.prototype.m = function () {};
var obj = new Cls();
Object.getOwnPropertyDescriptor(obj, "p");    // {value: 1, writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(obj, "m");    // undefined
 
Object.getOwnPropertyDescriptor(true, "p");   // TypeError
Object.getOwnPropertyDescriptor(1, "p");      // TypeError
Object.getOwnPropertyDescriptor("test", "p"); // TypeError
Object.getOwnPropertyDescriptor(null, "p");   // TypeError

Lista właściwości obiektu w JavaScript - getOwnPropertyNames

Jak pobrać listę nazw wszystkich właściwości, które posiada obiekt?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome)

Object.getOwnPropertyNames(O)
Parametry:
O - obiekt, którego właściwości mają zostać pobrane
Wartość:
Array - lista nazw wszystkich właściwości obiektu
Wyjątki:
TypeError - wartość O nie jest obiektem

Zwraca listę nazw wszystkich właściwości obiektu - w tym normalnie niedostępnych w pętli for-in [zobacz: Object.defineProperty - enumerable]. Nie uwzględnia właściwości przejętych z prototypu, a jedynie bezpośrednio przypisane do obiektu.

Przykład Object.getOwnPropertyNames

Object.getOwnPropertyNames({p: 1}); // ["p"]
Object.getOwnPropertyNames({});     // []
 
var obj = {};
Object.defineProperty(obj, "p", {enumerable: false});
Object.getOwnPropertyNames(obj);    // ["p"]
 
var Cls = function () {
    this.p = 1;
};
Cls.prototype.m = function () {};
obj = new Cls();
Object.getOwnPropertyNames(obj);    // ["p"]
 
Object.getOwnPropertyNames(true);   // TypeError
Object.getOwnPropertyNames(1);      // TypeError
Object.getOwnPropertyNames("test"); // TypeError
Object.getOwnPropertyNames(null);   // TypeError

Tworzenie obiektu na wzorcu bez konstruktora - create

Jak utworzyć obiekt bazujący na podanym wzorcu, ale bez wywoływania konstruktora?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome)

Object.create(O)
Object.create(O, Properties)
Parametry:
Object O - wzorcowy prototyp obiektu
Object Properties - obiekt zawierający deskryptory dodatkowych właściwości tworzonego obiektu [zobacz: Object.defineProperty]
Wartość:
Object - prototyp nowego obiektu
Wyjątki:
TypeError - wartość O nie jest obiektem ani null

Pozwala utworzyć prototyp nowego obiektu na bazie wzorca. Inaczej niż w przypadku użycia operatora new użycie funkcji Object.create nie wywołuje konstruktora obiektu.

Przykład Object.create

Object.getPrototypeOf(Object.create(null)) === null;      // true
var obj = Object.create(Object.prototype);
Object.getPrototypeOf(obj) === Object.getPrototypeOf({}); // true
Object.create({}, {p: {value: 1}}).p;                     // 1
Object.create(true);                                      // TypeError
Object.create(1);                                         // TypeError
Object.create("test");                                    // TypeError

Tworzenie właściwości tylko do odczytu - defineProperty

Jak w języku JavaScript utworzyć zmienną tylko do odczytu?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome oraz częściowo Internet Explorer 8)

Object.defineProperty(O, P, Attributes)
Parametry:
Object O - obiekt
String P - nazwa właściwości
Object Attributes - atrybuty deskryptora właściwości:
  • value - aktualna wartość właściwości (domyślnie: undefined)
  • Boolean writable - czy wartość może zostać zmieniona (domyślnie: false)
  • Function|Undefined get - funkcja która zostanie wywołana w celu pobrania wartości właściwości (domyślnie: undefined)
  • Function|Undefined set - funkcja która zostanie wywołana w celu ustawienia wartości właściwości (domyślnie: undefined)
  • Boolean enumerable - czy właściwość będzie dostępna w pętli for-in (domyślnie: false)
  • Boolean configurable - czy wartość albo deskryptor właściwości mogą zostać zmienione (domyślnie: false)
Wartość:
O - przekazany obiekt
Wyjątki:
TypeError - wartość O nie jest obiektem

Definiuje tzw. deskryptor właściwości, który pozwala sterować dostępem do podanej właściwości obiektu. Dzięki niemu możemy określić, np. aby podana właściwość obiektu nigdy nie mogła zostać zmieniona. Możemy również zdefiniować funkcje, które pozwolą przekształcić wartość właściwości przed jej zapisem lub zwróceniem do/z obiektu.

Zwróć uwagę, że wartość writable, enumerable i configurable domyślnie wynosi false. Dlatego jeśli ich nie podasz przy definiowaniu deskryptora, zostanie utworzona właściwość, której nie będzie można już później zmienić ani odczytać wewnątrz pętli for-in.

Przykład Object.defineProperty

var obj = {test: 3};
Object.defineProperty(obj, "p", {value: 1});
obj.p = 2;
obj.p;                                             // 1
for (var key in obj) key;                          // "test"
 
Object.defineProperty(obj, "dynamic", {
    get: function () {
        return obj.test * 2;
    },
    set: function (value) {
        obj.test = value < 0 ? NaN : value / 2;
    }
});
obj.dynamic;                                       // 6
obj.dynamic = 4;
obj.test                                           // 2
obj.dynamic = -1;
obj.test;                                          // NaN
 
Object.defineProperty(obj, "p", {writable: true}); // TypeError
Object.defineProperty(true, "p", {});              // TypeError
Object.defineProperty(1, "p", {});                 // TypeError
Object.defineProperty("test", "p", {});            // TypeError
Object.defineProperty(null, "p", {});              // TypeError

Konfiguracja wielu właściwości obiektu - definePropertie

Jak za jednym razem skonfigurować właściwości obiektu (np. tylko do odczytu)?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome)

Object.defineProperties(O, Properties)
Parametry:
Object O - obiekt
Object Properties - deskryptory właściwości [zobacz: Object.defineProperty]
Wartość:
O - przekazany obiekt
Wyjątki:
TypeError - wartość O nie jest obiektem

Pozwala zdefiniować z jednym razem wiele deskryptorów właściwości.

Przykład Object.defineProperties

var obj = Object.defineProperties({}, {
    test: {value: 3, writable: true, enumerable: true, configurable: true},
    p: {value: 1}
});
obj.p = 2;
obj.p;                                               // 1
for (var key in obj) key;                            // "test"
 
Object.defineProperties(obj, {p: {writable: true}}); // TypeError
Object.defineProperties(true, {});                   // TypeError
Object.defineProperties(1, {});                      // TypeError
Object.defineProperties("test", {});                 // TypeError
Object.defineProperties(null, {});                   // TypeError

Opieczętowanie obiektu w JavaScript - seal

Co zrobić, aby opieczętować obiekt w taki sposób, aby jego struktura pozostała niezmienna w programie?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome 6)

Object.seal(O)
Parametry:
Object O - obiekt
Wartość:
O - przekazany obiekt
Wyjątki:
TypeError - wartość O nie jest obiektem

Wywołanie tej funkcji na podanym obiekcie sprawia, że nie będzie można dla niego definiować więcej żadnych deskryptorów właściwości, dodawać żadnych nowych właściwości ani usuwać istniejących. Natomiast będzie można normalnie zmieniać wartości właściwości, które obiekt posiadał już wcześniej. Mówimy, że obiekt został opieczętowany (ang. seal), tzn. jego struktura pozostanie niezmienna.

Przykład Object.seal

var obj = Object.defineProperty({p: 1}, "x", {configurable: true});
delete obj.p;
obj.p;                                                 // undefined
obj.test = 3;
 
Object.seal(obj);
obj.test;                                              // 3
obj.test = 2;
obj.test;                                              // 2
delete obj.test;
obj.test;                                              // 2
obj.p = 1;
obj.p;                                                 // undefined
 
Object.defineProperty(obj, "x", {configurable: true}); // TypeError
Object.defineProperty(obj, "p", {});                   // TypeError
Object.seal(true);                                     // TypeError
Object.seal(1);                                        // TypeError
Object.seal("test");                                   // TypeError
Object.seal(null);                                     // TypeError

Zamrażanie obiektu w JavaScript - freeze

Co zrobić, aby zamrozić obiekt w taki sposób, aby nie można go było już zmieniać?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome 6)

Object.freeze(O)
Parametry:
Object O - obiekt
Wartość:
O - przekazany obiekt
Wyjątki:
TypeError - wartość O nie jest obiektem

Wywołanie tej funkcji na podanym obiekcie sprawia, że nie będzie można dla niego definiować więcej żadnych deskryptorów właściwości, dodawać żadnych nowych właściwości, usuwać istniejących właściwości ani zmieniać im wartości. Mówimy, że obiekt został zamrożony (ang. freeze), tzn. jego struktura i dane pozostaną niezmienne.

Przykład Object.freeze

var obj = Object.defineProperty({p: 1}, "x", {configurable: true});
delete obj.p;
obj.p;                                                 // undefined
obj.test = 3;
 
Object.freeze(obj);
obj.test;                                              // 3
obj.test = 2;
obj.test;                                              // 3
delete obj.test;
obj.test;                                              // 3
obj.p = 1;
obj.p;                                                 // undefined
 
Object.defineProperty(obj, "x", {configurable: true}); // TypeError
Object.defineProperty(obj, "p", {});                   // TypeError
Object.freeze(true);                                   // TypeError
Object.freeze(1);                                      // TypeError
Object.freeze("test");                                 // TypeError
Object.freeze(null);                                   // TypeError

Blokowanie rozszerzania obiektu - preventExtensions

Co zrobić, aby zablokować możliwość rozszerzania struktury obiektu?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome 6)

Object.freeze(O)
Parametry:
Object O - obiekt
Wartość:
O - przekazany obiekt
Wyjątki:
TypeError - wartość O nie jest obiektem

Wywołanie tej funkcji na podanym obiekcie sprawia, że nie będzie można dla niego definiować więcej żadnych nowych deskryptorów właściwości ani dodawać żadnych nowych właściwości. Natomiast będzie można normalnie zmieniać wartości i deskryptory oraz usuwać właściwości, które obiekt posiadał już wcześniej. Mówimy, że obiekt przestał być rozszerzalny (ang. extensible), tzn. jego struktura nie może się rozszerzyć.

Przykład Object.preventExtensions

var obj = Object.defineProperty({p: 1}, "x", {value: 2, writable: false, configurable: true});
delete obj.p;
obj.test;                            // undefined
obj.test = 3;
 
Object.preventExtensions(obj);
obj.test;                            // 3
obj.test = 2;
obj.test;                            // 2
delete obj.test;
obj.test;                            // undefined
obj.p = 1;
obj.p;                               // undefined
obj.x = 1;
obj.x;                               // 2
Object.defineProperty(obj, "x", {writable: true});
obj.x = 1;
obj.x;                               // 1
 
Object.defineProperty(obj, "p", {}); // TypeError
Object.preventExtensions(true);      // TypeError
Object.preventExtensions(1);         // TypeError
Object.preventExtensions("test");    // TypeError
Object.preventExtensions(null);      // TypeError

Sprawdzanie, czy obiekt jest opieczętowany - isSealed

Jak sprawdzić, czy obiekt jest opieczętowany, tzn. nierozszerzalny i niekonfigurowalny?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome 6)

Object.isSealed(O)
Parametry:
Object O - obiekt
Wartość:
Boolean - czy obiekt został opieczętowany
Wyjątki:
TypeError - wartość O nie jest obiektem

Sprawdza, czy podany obiekt został opieczętowany, tzn. jest nierozszerzalny, a wszystkie jego właściwości są niekonfigurowalne [zobacz: Object.definePropert - configurable].

Przykład Object.isSealed

Object.isSealed({});                           // false
Object.isSealed(Object.seal({}));              // true
Object.isSealed(Object.freeze({}));            // true
Object.isSealed(Object.preventExtensions({})); // true
var obj = Object.preventExtensions(Object.defineProperty({}, "x", {writable: false, configurable: false}));
Object.isSealed(obj);                          // true
obj = Object.preventExtensions(Object.defineProperty({}, "x", {writable: true, configurable: false}));
Object.isSealed(obj);                          // true
obj = Object.defineProperty({}, "x", {configurable: false});
Object.isSealed(obj);                          // false
obj = Object.preventExtensions(Object.defineProperty({}, "x", {configurable: true}));
Object.isSealed(obj);                          // false
 
Object.isSealed(true);                         // TypeError
Object.isSealed(1);                            // TypeError
Object.isSealed("test");                       // TypeError
Object.isSealed(null);                         // TypeError

Sprawdzanie, czy obiekt jest zamrożony - isFrozen

Jak sprawdzić, czy obiekt jest zamrożony, tzn. nierozszerzalny, niekonfigurowalny i niezmienny?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome 6)

Object.isFrozen(O)
Parametry:
Object O - obiekt
Wartość:
Boolean - czy obiekt został zamrożony
Wyjątki:
TypeError - wartość O nie jest obiektem

Sprawdza, czy podany obiekt został zamrożony, tzn. jest nierozszerzalny, a wszystkie jego właściwości są niekonfigurowalne i zablokowane przed zapisem [zobacz: Object.definePropert - configurable, writable].

Przykład Object.isFrozen

Object.isFrozen({});                           // false
Object.isFrozen(Object.seal({}));              // true
Object.isFrozen(Object.freeze({}));            // true
Object.isFrozen(Object.preventExtensions({})); // true
var obj = Object.preventExtensions(Object.defineProperty({}, "x", {writable: false, configurable: false}));
Object.isFrozen(obj);                          // true
obj = Object.preventExtensions(Object.defineProperty({}, "x", {writable: true, configurable: false}));
Object.isFrozen(obj);                          // false
obj = Object.defineProperty({}, "x", {configurable: false});
Object.isFrozen(obj);                          // false
obj = Object.preventExtensions(Object.defineProperty({}, "x", {configurable: true}));
Object.isFrozen(obj);                          // false
 
Object.isFrozen(true);                         // TypeError
Object.isFrozen(1);                            // TypeError
Object.isFrozen("test");                       // TypeError
Object.isFrozen(null);                         // TypeError

Sprawdzanie, czy obiekt jest rozszerzalny - isExtensible

Jak sprawdzić, czy obiekt jest rozszerzalny, tzn. nie można nic nowego do niego dodawać?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome 6)

Object.isExtensible(O)
Parametry:
Object O - obiekt
Wartość:
Boolean - czy obiekt jest rozszerzalny
Wyjątki:
TypeError - wartość O nie jest obiektem

Sprawdza, czy podany obiekt nie został zablokowany przed rozszerzaniem.

Przykład Object.isExtensible

Object.isExtensible({});                           // true
Object.isExtensible(Object.seal({}));              // false
Object.isExtensible(Object.freeze({}));            // false
Object.isExtensible(Object.preventExtensions({})); // false
var obj = Object.defineProperty({}, "x", {configurable: false});
Object.isExtensible(obj);                          // true
 
Object.isExtensible(true);                         // TypeError
Object.isExtensible(1);                            // TypeError
Object.isExtensible("test");                       // TypeError
Object.isExtensible(null);                         // TypeError

Lista nazw właściwości obiektu w JavaScript - keys

W jaki sposób pobrać listę nazw wszystkich widocznych właściwości obiektu?

(interpretuje: Internet Explorer 9, Firefox 4, Opera 12, Chrome)

Object.keys(O)
Parametry:
Object O - obiekt
Wartość:
Array - lista nazw właściwości obiektu dostępnych w pętli for-in
Wyjątki:
TypeError - wartość O nie jest obiektem

Zwraca listę nazw właściwości obiektu, które są dostępne w pętli for-in [zobacz: Object.defineProperty - enumerable].

Przykład Object.keys

Object.keys({p: 1}); // ["p"]
Object.keys({});     // []
 
var obj = {};
Object.defineProperty(obj, "p", {enumerable: false});
Object.keys(obj);    // []
 
Object.keys(true);   // TypeError
Object.keys(1);      // TypeError
Object.keys("test"); // TypeError
Object.keys(null);   // TypeError
Facebook