JS: Object System Overview

Summary of JavaScript's Object

1. Object is a collection of key/value pairs. Each key/value pair is called “property”.
2. Most objects have special purpose, and internal data. For exampe, Function object is a function. Array object has a magical length property. RegExp object is used to match string pattern. Date object holds date/time data, etc. The one object that doesn't have special purpose is the object object, for example, {…}.
3. Each object has zero or one parent object, called its “prototype”. When a property is accessed, JavaScript will go up the parent object or parent of parent etc to look for the property. (this is called “inheritance”.)
4. Each object has a special info attached called the [[isExtensible]] internal slot. It specifies whether new properties can be added to the object
5. It's useful to distinguish objects by their origin: {standard object, hosted object, user-defined object}.

What's JavaScript Object

A JavaScript object is a set of unordered key/value pairs.

{Arrays, functions, date, regex, …}, are specialized objects. They have special properties and behaviors than normal objects. But they still are key/value pairs.

〔►see JS: What's Object?〕

Standard Object, Hosted Object, User-Created Object

It is useful to distinguish objects by where they came from. We have the following sources:

1. Standard Object → Objects from the JavaScript language. For example, arrays, functions, dates, regex, Math, ….
2. Hosted Object → Objects from the hosting environment. For example, in DOM, there's “document” object as in document.getElementById(…). In Browser, there's “window” object 〔►see JS: Browser's Window Object〕. In node.js, there's “http” object as in (require('http')).createServer(…).
3. User-defined Object → User defined. For example, var obj = {…}, var obj = new F(…).

Object Internal Slots: [[Prototype]], [[isExtensible]]

Each object has many associated info called “internal slots” by the spec. The two important ones you need to understand for coding JavaScript are:

• [[prototype]] → value is another object or null. This is the parent object. This is how JavaScript finds a object's parent. The line of parents is called “prototype chain”. The significance of this “prototype chain” is how object's properties are looked up, called “inheritance”. 〔►see JS: Prototype and Inheritance〕
• [[isExtensible]] → value is true or false. If true, it means new properties can be added to the object. 〔►see JS: Prevent Adding Property〕

Note: In JavaScript spec, “Internal Slots” are indicated by double square brackets [[]].

Note: “Internal Slots” are implementation detail. They are not object properties. JavaScript programers don't need to know about interenal slots, but is very useful to explain some JavaScript behavior.

ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-ordinary-object-internal-methods-and-internal-slots

3 Ways to Create Object

There are 3 ways to create object:

1. Literal expression: {…} → Most convenient and most used.
2. Object.create() → Most powerful and flexible way to create object, because you can specify parent object, properties, property attributes, all in one function call.
3. Keyword new, in new function_name() → complex behavior. It tries to be similar to Java's object oriented programing concepts, but the result is very complex. For some standard objects, such as Date, it's the only way to create it.

〔►see JS: Object Literal Expression〕

〔►see JS: Object.create〕

〔►see JS: Operator “new”〕

Note: remember that function and array are also objects. So, when you define a function (For example, function f(…){…}) or create a array (For example, ar = [7,2,4]), you are also creating objects. 〔►see JS: Understand JS Array〕