185 lines
6.6 KiB
Markdown
185 lines
6.6 KiB
Markdown
# Chapter 6. Objects
|
|
|
|
## 6.1 Introduction to Objects
|
|
|
|
* An object is an unordererd collection of properties (each is a name/value pair)
|
|
* JS object can inherit properties from another object (aka "prototype")
|
|
* JS objects are dynamic; i.e. properties can be added/removed
|
|
* Any value in JS is object except string, number, Symbol, `true`/`false`, `null`/`undefined`
|
|
* Objects are mutable, and manupulated by reference rather than value.
|
|
* e.g. `let y=x` means `y` holds a reference to the same obj, not a copy of that obj.
|
|
* Common operations on obj: create, set, query, delete, test, and enumerate
|
|
* Property has name & value, but no obj has two properties with the same name (that's why we use Symbol)
|
|
* JS use *own property* to refer to non-inherited properties.
|
|
* Each property has 3 property **attributes**:
|
|
* **writable**: whether value of property can be set
|
|
* **enumerable**: whether the property name is returned by for/in loop
|
|
* **configurable**: whether the property can be deleted and its attributes can be altered
|
|
|
|
## 6.2 Creating Objects
|
|
|
|
Creating obj, 4 methods:
|
|
1. using object literal
|
|
2. using keyword `new`
|
|
3. using `Object.create()` function
|
|
|
|
### 6.2.1 Object Literals
|
|
|
|
**Object literal** in simplest form:
|
|
* comma-separated list of colon-separated `name:value` pairs, enclosed within `{}`.
|
|
* property *name*: JS identifier or string
|
|
* property *value*: JS expression
|
|
|
|
```js
|
|
let empty = {}; // An object with no properties
|
|
let point = { x: 0, y: 0 }; // Two numeric properties
|
|
let p2 = { x: point.x, y: point.y+1 }; // More complex values
|
|
let book = {
|
|
"main title": "JavaScript", // These property names include spaces,
|
|
"sub-title": "The Definitive Guide", // and hyphens, so use string literals.
|
|
for: "all audiences", // for is reserved, but no quotes.
|
|
author: { // The value of this property is
|
|
firstname: "David", // itself an object.
|
|
surname: "Flanagan"
|
|
}
|
|
};
|
|
```
|
|
|
|
When object literal works:
|
|
* Object literal creates & initializes a new & distinct obj every time it's evaluated.
|
|
* In loop body, a new obj can be created repeatedly.
|
|
|
|
### 6.2.2 Creating Objects with new
|
|
|
|
* **`new` operator**
|
|
* creates & initialize a new object
|
|
* syntax: `new` followed by function invocation as **constructor**
|
|
|
|
```js
|
|
let o = new Object(); // Create an empty object: same as {}.
|
|
let a = new Array(); // Create an empty array: same as [].
|
|
let d = new Date(); // Create a Date object representing the current time
|
|
let r = new Map(); // Create a Map object for key/value mapping
|
|
```
|
|
|
|
### 6.2.3 Prototypes
|
|
|
|
Almost all JS obj has a prototype associate with it:
|
|
* All objs created using **object literal** (shown in 6.2.1) are associated with the same prototype obj, referred by `Object.prototype`
|
|
* objs created using `new` (invoking constructor) use *value of constructor function's `prototype` property* as prototype
|
|
* `new Object()` inherits from `Object.prototype`
|
|
* `new Array()` inherits from `Array.prototype`
|
|
* Only few objects have `prototype` property, they are used to define `prototypes` for all other objs.
|
|
|
|
### 6.2.4 Object.create()
|
|
|
|
3 Methods below demonstrated ability to create a new obj with an arbitrary prototype:
|
|
* Create new obj w/ defined prototype using **`Object.create()`**
|
|
```js
|
|
let o1 = Object.create({x: 1, y: 2}); // o1 inherits properties x and y.
|
|
o1.x + o1.y // => 3
|
|
```
|
|
* Create new obj w/o prototype by parsing `null`
|
|
* Created obj inherit no property or method (e.g. `toString()`)
|
|
```js
|
|
let o2 = Object.create(null); // o2 inherits no props or methods.
|
|
```
|
|
* Create ordinary new empty obj using **`Object.prototype`** (like obj returned by `{}` or `Object()`)
|
|
```js
|
|
let o3 = Object.create(Object.prototype); // o3 is like {} or new Object().
|
|
```
|
|
|
|
#### Use created object to guard unintended modification
|
|
|
|
* Q: How to guard against unintended modification of an obj by a function (from other library)?
|
|
* A: Instead of passing the obj directly to the function, pass an obj that inherit from it. So writing property do not affect original value. (like passing a read-only)
|
|
|
|
```js
|
|
let o = { x: "don't change this value" };
|
|
library.function(Object.create(o)); // Guard against accidental modifications
|
|
```
|
|
|
|
## 6.3 Querying and Setting Properties
|
|
|
|
Obtain value of property:
|
|
* using dot (`.`): RHS of dot should be simple identifier (not string) of property
|
|
* using square bracket (`[]`): value within `[]` should be an expression that evalutes to a string (or sth can convert to string) that contains property name
|
|
|
|
```js
|
|
let author = book.author; // Get the "author" property of the book.
|
|
let name = author.surname; // Get the "surname" property of the author.
|
|
let title = book["main title"]; // Get the "main title" property of the book.
|
|
```
|
|
|
|
Create/Set a property:
|
|
* Query property, and place it on LHS
|
|
|
|
```js
|
|
book.edition = 7; // Create an "edition" property of book.
|
|
book["main title"] = "ECMAScript"; // Change the "main title" property.
|
|
```
|
|
|
|
### 6.3.1 Objects As Associative Arrays
|
|
|
|
```js
|
|
object.property // C like structure access
|
|
object["property"] // associative array
|
|
```
|
|
|
|
JS objects are **Associative Arrays** (e.g. hash or map or dictionary)
|
|
* In strong typed language (e.g. C/C++), obj's property are defined. While, JS program can **create any number of properties in any object in runtime**
|
|
* `.` operator requires name of the property as identifier, which may be unknown in code.
|
|
* `[]` operator allow access properties dynamically
|
|
|
|
Following code shows calculate portfolio value in runtime via associative arrays
|
|
```js
|
|
function computeValue(portfolio) {
|
|
let total = 0.0;
|
|
for(let stock in portfolio) { // For each stock in the portfolio:
|
|
let shares = portfolio[stock]; // get the number of shares
|
|
let price = getQuote(stock); // look up share price
|
|
total += shares * price; // add stock value to total value
|
|
}
|
|
return total; // Return total value.
|
|
}
|
|
```
|
|
|
|
### 6.3.2 Inheritance
|
|
|
|
### 6.3.3 Property Access Errors
|
|
|
|
## 6.4 Deleting Properties
|
|
|
|
## 6.5 Testing Properties
|
|
|
|
## 6.6 Enumerating Properties
|
|
|
|
### 6.6.1 Property Enumeration Order
|
|
|
|
## 6.7 Extending Objects
|
|
|
|
## 6.8 Serializing Objects
|
|
|
|
## 6.9 Object Methods
|
|
|
|
### 6.9.1 The toString() Method
|
|
|
|
### 6.9.2 The toLocaleString() Method
|
|
|
|
### 6.9.3 The valueOf() Method
|
|
|
|
### 6.9.4 The toJSON() Method
|
|
|
|
## 6.10 Extended Object Literal Syntax
|
|
|
|
### 6.10.1 Shorthand Properties
|
|
|
|
### 6.10.2 Computed Property Names
|
|
|
|
### 6.10.3 Symbols as Property Names
|
|
|
|
### 6.10.4 Spread Operator
|
|
|
|
### 6.10.5 Shorthand Methods
|
|
|
|
### 6.10.6 Property Getters and Setters |