JavaScript: Object System Overview

By Xah Lee. Date: . Last updated: .

This page is a overview of JavaScript object system.

〔If you don't know how to create object, read properties, first see: JavaScript: Object Basics.〕

JavaScript's object system is very different from class based object system in {Java, Python, Ruby}. To understand JavaScript's object system, you need to throw away what you know about object oriented programing of those languages.

JavaScript's object system is called prototype-based object system.

(If you know Python or Ruby, one quick way to think of JavaScript object is to think of Python's dictionary, or Ruby and Perl's hash table, but with inheritance, meaning, each of the dictionary/hashtable has a parent dictionary/hashtable, and key lookup will go up to the parents, and value of any key can be function or other dictionary/hashtable.)

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 create date/time data, etc. The one object that doesn't have special purpose is the object object. For example, {…}.
  3. Each object has one parent object (called its prototype) or none. When a property is accessed, JavaScript will go thru the line of parent objects to look for the property. (this is called “inheritance”.)
  4. Each object has a special info attached to called the [[isExtensible]] attribute.
  5. It's useful to distinguish objects by their origin: {standard object, hosted object, user-defined object}.

Following are details.

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 JavaScript: 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 JavaScript: 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:

Note: In JavaScript spec, “Internal Slots” are indicated by double square brackets [[]]. ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-ordinary-object-internal-methods-and-internal-slots

Note: “Internal Slots” are implementation detail. They are not object properties.

3 Ways to Create Object

There are 3 ways to create object:

  1. Literal expression: {…} → Most convenient and most used, especially when you want to use a object as data.
  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 JavaScript: Object Literal Expression {…}

〔►see JavaScript: Object.create

〔►see JavaScript: 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 JavaScript: Understand JS Array

JavaScript Object Property Overview

JavaScript: Property Overview

Object and Inheritance Topic

  1. JavaScript: Object System Overview
  2. JavaScript: What's Object?
  3. JavaScript: Prototype and Inheritance
  4. JavaScript: Creating Object
  5. JavaScript: Object Literal Expression {…}
  6. JavaScript: Find Object's Prototype
  7. JavaScript: How to Create Object with Parent X?
  8. JavaScript: Prevent Adding Property
  9. JavaScript: Determine Type of Object
  10. JavaScript: Primitive Value Object Wrapper
  11. JavaScript: Clone, Deep Copy Object/Array
  12. JavaScript: Test Equality of Objects

  1. JavaScript: Object Object
  2. JavaScript: Object.prototype
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.