.JS File Format – Objects and prototypes

Properties

A property key is a String or a Symbol. Any other value used as a key is converted to a string, so obj[1] and obj["1"] are the same property.

Property attributes

A property is either a data property or an accessor property (Property Attributes).

A property made by assignment or an object literal is writable, enumerable and configurable.

const o = {};
Object.defineProperty(o, 'id', { value: 1, enumerable: true });

Object.getOwnPropertyDescriptor(o, 'id');
// { value: 1, writable: false, enumerable: true, configurable: false }

o.id = 2;               // no effect; TypeError in strict code
Object.keys(o);         // ['id']

• A descriptor passed to defineProperty may not have both value or writable and get or set.
• While a property is non-configurable, it cannot be deleted, cannot switch kind, and cannot change its enumerable. Its writable can only go from true to false.
• Object.defineProperties and Object.getOwnPropertyDescriptors work on many at once.

Getters and setters

const box = {
  _w: 1,
  get width() { return this._w; },
  set width(v) { this._w = Math.max(0, v); },
};
box.width = -5;
box.width;      // 0

A getter takes no parameters and a setter takes exactly one. With no setter, a write is ignored in sloppy code and throws a TypeError in strict code. this in an accessor is the receiver, the object the access started from.

The prototype chain

Every object has an internal [[Prototype]], either an object or null. Object.getPrototypeOf reads it, and Object.setPrototypeOf changes it.

const animal = { speak() { return this.name + ' speaks'; } };
const dog = Object.create(animal);
dog.name = 'Rex';
dog.speak();                         // "Rex speaks": found on the prototype

Object.getPrototypeOf(dog) === animal;    // true
Object.create(null);                 // no prototype at all, no inherited methods

• A function’s prototype property becomes the prototype of objects created by new. That is not the function’s own [[Prototype]], which is Function.prototype.
• The chain must not form a cycle: setPrototypeOf throws a TypeError if it would.
• __proto__ is an accessor on Object.prototype, by Annex B. An object made with Object.create(null) does not have it.
• The chain usually ends at Object.prototype, whose prototype is null.

Locking an object

These apply only to the object’s own properties, so nested objects stay mutable. A non-extensible object’s prototype cannot be changed either.

Internal methods and exotic objects

Every object implements these essential internal methods. An object that uses the default behaviour is ordinary, and one that overrides any of them is exotic. Functions add [[Call]], and constructors add [[Construct]].

The exotic objects in the standard are arrays (a magical length), String objects (index properties for characters), arguments objects, bound functions, typed arrays, module namespace objects, Object.prototype (an immutable prototype) and proxies.

Proxy

new Proxy(target, handler) creates an object whose internal methods call the matching handler functions, called traps (ES2015). A missing trap forwards to the target. Proxy.revocable returns { proxy, revoke }, and calling revoke() makes every later operation on the proxy throw a TypeError.

const logged = new Proxy({ a: 1 }, {
  get(target, key, receiver) {
    console.log('read', String(key));
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    return Reflect.set(target, key, value, receiver);
  },
});

Reflect

Reflect is a plain object with one function per internal method, with the same names as the proxy traps (ES2015). Unlike the Object equivalents, those that change something return a boolean instead of throwing, and the functions accept a receiver.

Reflect.has(obj, 'x');                // like 'x' in obj
Reflect.ownKeys(obj);                 // strings and symbols
Reflect.get(obj, 'x', receiver);      // getter runs with this = receiver
Reflect.defineProperty(obj, 'y', {}); // false on failure
Reflect.construct(F, args, G);        // new.target is G