|
542 | 542 |
|
543 | 543 | Object literal property values can be of any data type, including array, function, and nested object.
|
544 | 544 |
|
545 |
| - **Note:** This is one of the easiest ways to create an object. |
| 545 | + **Note:** This is one of the easiest ways to create an object and it's most commonly used for creating simple, ad-hoc objects. |
546 | 546 |
|
547 | 547 | 2. **Object constructor:**
|
548 | 548 |
|
|
552 | 552 | var object = new Object();
|
553 | 553 | ```
|
554 | 554 |
|
555 |
| - The `Object()` is a built-in constructor function so "new" keyword is not required. The above code snippet can be re-written as: |
| 555 | + The `Object()` is a built-in constructor function so "new" keyword is not required for creating plain objects. The above code snippet can be re-written as: |
556 | 556 |
|
557 | 557 | ```javascript
|
558 | 558 | var object = Object();
|
559 | 559 | ```
|
560 |
| - |
| 560 | + However, `Object()` can be used to either create a plain object or convert a given value into its corresponding object wrapper, whereas `new Object()` is specifically used to explicitly create a new object instance. |
| 561 | + |
561 | 562 | 3. **Object's create method:**
|
562 | 563 |
|
563 |
| - The `create` method of Object is used to create a new object by passing the specified prototype object and properties as arguments, i.e., this pattern is helpful to create new objects based on existing objects. |
564 |
| - The second argument is optional and it is used to create properties on a newly created object. |
| 564 | + The `create` method of Object is used to create a new object by passing the specified prototype object and properties as arguments, i.e., this pattern is helpful to create new objects based on existing objects. In other words, this is useful for setting up **prototypal inheritance**. The second argument is optional and it is used to create properties on a newly created object. |
565 | 565 |
|
566 | 566 | The following code creates a new empty object whose prototype is null.
|
567 | 567 |
|
|
592 | 592 |
|
593 | 593 | 4. **Function constructor:**
|
594 | 594 |
|
595 |
| - In this approach, create any function and apply the new operator to create object instances. |
| 595 | + In this approach, create any function and apply the new operator to create object instances. This was the main way to do constructor-based OOP before ES6 classes. |
596 | 596 |
|
597 | 597 | ```javascript
|
598 | 598 | function Person(name) {
|
|
604 | 604 |
|
605 | 605 | 5. **Function constructor with prototype:**
|
606 | 606 |
|
607 |
| - This is similar to function constructor but it uses prototype for their properties and methods, |
| 607 | + This is similar to function constructor but it uses prototype for their properties and methods. Using prototype means you're sharing methods/properties across instances, which saves memory and improve performance. |
608 | 608 |
|
609 | 609 | ```javascript
|
610 | 610 | function Person() {}
|
611 | 611 | Person.prototype.name = "Sudheer";
|
612 | 612 | var object = new Person();
|
613 | 613 | ```
|
614 | 614 |
|
615 |
| - This is equivalent to creating an instance with Object.create method with a function prototype and then calling that function with an instance and parameters as arguments. |
| 615 | + This is equivalent to creating an instance with `Object.create` method with a function prototype and then calling that function with an instance and parameters as arguments. |
616 | 616 |
|
617 | 617 | ```javascript
|
618 |
| - function func() {} |
| 618 | + function func(x, y, z) { |
| 619 | + this.x = x; |
| 620 | + this.y = y; |
| 621 | + this.z = z; |
| 622 | + } |
619 | 623 |
|
620 |
| - new func(x, y, z); |
| 624 | + var instance = new func(1, 2, 3); |
621 | 625 | ```
|
622 | 626 |
|
623 | 627 | **(OR)**
|
624 | 628 |
|
625 | 629 | ```javascript
|
| 630 | + function func(x, y, z) { |
| 631 | + this.x = x; |
| 632 | + this.y = y; |
| 633 | + this.z = z; |
| 634 | + } |
626 | 635 | // Create a new instance using function prototype.
|
627 | 636 | var newInstance = Object.create(func.prototype)
|
628 | 637 |
|
629 | 638 | // Call the function
|
630 |
| - var result = func.call(newInstance, x, y, z), |
| 639 | + var result = func.call(newInstance, 1, 2, 3), |
631 | 640 |
|
632 | 641 | // If the result is a non-null object then use it otherwise just use the new instance.
|
633 | 642 | console.log(result && typeof result === 'object' ? result : newInstance);
|
634 | 643 | ```
|
635 | 644 |
|
636 | 645 | 6. **Object's assign method:**
|
637 | 646 |
|
638 |
| - The `Object.assign` method is used to copy all the properties from one or more source objects and stores them into a target object. |
| 647 | + The `Object.assign` method is used to copy all the properties from one or more source objects and stores them into a target object. This is mainly used for cloning and merging |
639 | 648 |
|
640 | 649 | The following code creates a new staff object by copying properties of his working company and the car he owns.
|
641 | 650 |
|
|
647 | 656 |
|
648 | 657 | 7. **ES6 Class syntax:**
|
649 | 658 |
|
650 |
| - ES6 introduces class feature to create objects. |
| 659 | + ES6 introduces class feature to create objects. This is syntactic sugar over the prototype-based system. |
651 | 660 |
|
652 | 661 | ```javascript
|
653 | 662 | class Person {
|
|
669 | 678 | })();
|
670 | 679 | ```
|
671 | 680 |
|
| 681 | + In modern apps, Singletons are often implemented using **modules** or **closures**. |
| 682 | + |
672 | 683 | **[⬆ Back to Top](#table-of-contents)**
|
673 | 684 |
|
674 | 685 | 2. ### What is a prototype chain
|
|
0 commit comments