Top
Home • Kategorien • JavaScript • Object

Object

In JavaScript können Funktionen als Konstruktor verwendet werden, um Objekte zu erzeugen.
Es gibt aber noch weitere Methoden Objekte in JavaScript zu erzeugen.
Object selbst nimmt dabei eine Sonderrolle ein, da jedes Objekt in JavaScript von diesem abstammt. 

let user = new Object();
user.name = "Dennis";
user.getName = function getName() {
    return this.name;
};

console.log(user.name); // Dennis
console.log(user.getName()); // Dennis

Eine andere Art diese Objekte zu erstellen.

let user = {};
user.name = "Dennis";
user.getName = function getName() {
    return this.name;
};

console.log(user.name); // Dennis
console.log(user.getName()); // Dennis

Diese kann man auch direkt notieren.

let user = {
    name: 'Dennis',
    getName: function getName() {
        return this.name;
    }
};

console.log(user.name); // Dennis
console.log(user.getName()); // Dennis

Mit ES6 und Enhanced Object Literals ist eine verkürzte Schreibweise möglich.

let name = 'Dennis';

let user = {
    name,
    getName() {
        return this.name;
    }
};

Mit Object.assign() können Objekte kopiert und gemischt werden.

let userCopy = Object.assign({}, user);

console.log(userCopy.name); // Dennis
console.log(userCopy.getName()); // Dennis
Man kann in JavaScript mit for-in über ein Objekt iterieren.
Mit .keys() bekommt man ein Array zurück was die Schlüssel enthält.

let myArr = ["eins", "zwei", "drei"];
let myObj = {"eins": 1, "zwei": 2, "drei": 3};

console.log(Object.keys(myArr)); // ["0", "1", "2"]
console.log(Object.keys(myObj)); // ["eins", "zwei", "drei"]

Zusätzlich zu .keys() existieren auch .values() und .entries(). Bei .entires() werden key/value Paare als Array ausgegeben.

console.log(Object.entries(myObj)); // [["eins", 1], ["zwei", 2], ["drei", 3]]

Eigenschaften kann man mit der Methode .defineProperty() definieren.

let o = {};
Object.defineProperty(o, 'a', {value: 'A', writable: true, enumerable: true, configurable: true});
Object.defineProperty(o, 'b', {value: 'B', writable: false});

console.log(o.a);
o.a = 'new a';
console.log(o.a);

console.log(o.b);
try {
    o.b = 'new b';    
} catch(e) {
    console.log(e.type);
    console.log(e.message);
}

Es ist möglich mit .defineProperty() passende getter- und setter-Methoden zu definieren.

let o = {};
Object.defineProperty(o, "description", {
    get: function() {
        return this.desc;
    },
    set: function(val) {
        this.desc = val;
    }
});

o.description = "Object description";
console.log(o.description);

Object.defineProperties() kann genutzt werden um mehrere Eigenschaften zu definieren.

Objekte können beobachtet werden, um auf Änderungen reagieren zu können.

let o = {};
Object.observe(o, function(changes) {
    changes.forEach(function(change) {
        console.log(change);
    });
});

o.a = 'A';
// { type: 'add', object: { a: 'A' }, name: 'a' }

o.a = 'B';
// { type: 'update', object: { a: 'B' }, name: 'a', oldValue: 'A' }

delete o.a;
// { type: 'delete', object: {}, name: 'a', oldValue: 'A' }

Man kann mit .preventExtensions() vermeiden, dass die Objekte erweitert werden.

let Config = (function() {
    return function() {
        let styleDir = '/css';
        this.setStyleDir = function(val) {
            styleDir = val;
        };
        this.getStyleDir = function() {
            return styleDir;
        }
        Object.preventExtensions(this);
    };
}());

let config = new Config();
console.log(config.getStyleDir()); // /css
try {
    config.error = 'raise Error';
} catch(e) {
    console.log(e.type, e.message);
    console.log('is config extensible:', Object.isExtensible(config));
}

.freeze() friert ein Objekt ein und vermeidet das Eigenschaften verändert werden.
Beide Zustände können mit .isExtensible() und .isFrozen() abgefragt werden.