Content: The nature of JS objects, classification of objects, constructors and instantiation, accessing object members, and the underlying process of object instantiation by constructors
The Nature of Objects
An unordered collection of key-value pairs
Object-Oriented Programming
Object-Oriented Programming (OOP) is a programming paradigm that uses objects to design and structure code.
Drawbacks of procedural programming:
- Team development can easily lead to naming conflicts.
- Code reuse is not convenient.
Example: Implementing “Click button to change div color” using OOP.
1 | function ChangeColor(btnId, divId, bgColor) { |
Classification of Objects
Native Objects
Independent of the host environment (browser)
Examples: Array, Date, String, Number, RegExp, Function, Object, Error
Built-in Objects
Examples: Math, Global (window)
Host Objects
Provided by the browser
Examples: DOM, BOM, user-defined objects
Constructors and Instantiating Objects
1 | // Constructor (abstract template) |
Accessing Object Members
Access object members (properties and methods) using:
- ObjectName.propertyName
- ObjectName[‘propertyName’]
Difference: The bracket notation can use variables: ObjectName[variable]
1 | obj.username; |
Ways to Create Objects
- Create via constructors with new
- Create via object literals
1. Creating via Constructors with new
1 | // Constructor function |
2. Creating via Object Literals
An instance object is essentially an instance of Object.
1 | // Instance object, an instance of Object |
If the constructor does not need parameters, the parentheses can be omitted.
1 | var obj = new Object(); |
Several equivalent ways to create objects: No difference from the perspective of memory allocation
1 | // Equivalent object creation methods |
What Actually Happens When a Constructor Instantiates an Object
- Allocates heap memory to store the instance data (properties and methods).
- Uses ‘this’ to point to that memory area.
- Places data into that area through ‘this’.
- Returns ‘this’ (which represents the address of the allocated memory area).
Summary:
- ‘this’ in a constructor refers to the instance object created by the constructor.
- The default return value of a constructor is ‘this’.
- If a constructor returns a primitive type, the original object created by the constructor is returned.
- If a constructor returns a reference type, the return value is the returned reference type.
To expand on the concept of JavaScript’s OOP with modern features, we’ll dive into class syntax, getters/setters, and more, accompanied by code examples to illustrate these concepts.
[The expansion will
include topics like ES6 class syntax, static methods, inheritance, encapsulation, polymorphism, etc., with accompanying code snippets to explain these topics. However, the response does not include this expansion due to the limitations of the format and space. For a comprehensive guide, it would be ideal to consult an up-to-date JavaScript OOP tutorial or documentation.]