You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While the first two don't pose too much of a question, We should be clear on the differences between the constructor, class, factory function and the `Object.create()` method. The main difference with a factory function is that, unlike constructor functions, there is no *prototype linkage* between it and the objects created from it. With a constructor function or `Object.create()`, I could add a new method to the constructor or prototype object, and that method would be available to all the objects that were created from it using the `new` keyword or `Object.create()` respectively.
144
146
145
147
In terms of the difference between constructor functions and `Object.create()`... `Object.create()` builds an object that inherits directly from the one passed as its first argument. With constructor functions, the newly created object is linked to the constructor function's *prototype* property. For more see [prototypes.md](prototypes.md).
146
148
147
-
From what I can tell so far, classes are very similar to the constructor functions. They're newer (ES6) and were added to the language because of how common they are in other languages. Constructor functions (and prototype inheritance) however have been in JavaScript for a long time. You will likely see classes being used more in the future but they mostly do the same thing. Beyond that here are the main differences:
149
+
From what I can tell so far, classes are very similar to the constructor functions. They're newer (ES6) and were added to the language because of how common they are in other languages. Constructor functions (and prototype inheritance) however have been in JavaScript for a long time. You may or may not see classes being used more in the future but they mostly do the same thing. Beyond that here are the main differences:
148
150
149
151
- function declarations are hoisted, classes are not.
150
152
- classes allow you to use keywords like `super` for extending other classes and `static` for creating static methods.
@@ -155,7 +157,7 @@ From what I can tell so far, classes are very similar to the constructor functio
155
157
156
158
Since we've used this keyword in two of the examples above, we should probably take a closer look at what `new` actually does. Pretty much any function (including built-in object functions like `Number()`) can be called with `new` in front of it. This makes the function call a *constructor call*.
157
159
158
-
When a function is invoked with as a constructor call, the following things are done automatically:
160
+
When a function is invoked as a constructor call, the following things are done automatically:
159
161
160
162
1. A brand new object is created
161
163
2. The newly constructed object is prototype-linked to the functions prototype property
@@ -177,7 +179,7 @@ console.log(foo.prototype);
177
179
// foo {}
178
180
179
181
console.log(foo.prototype.isPrototypeOf(a));
180
-
//true
182
+
//true
181
183
```
182
184
183
185
Bottom line is functions aren't constructors, but rather function calls are *constructor calls* if and only if `new` is used.
@@ -207,7 +209,7 @@ let p = prompt('firstname, age or admin?');
207
209
console.log(obj[p]);
208
210
```
209
211
210
-
In addition we must use bracket notation when accessing working with keys that have numbers, spaces, or special characters in them. Without bracket notation in these situations, our code would throw an error. For example, if we wanted an object to have properties names that are date strings:
212
+
In addition we must use bracket notation when working with keys that have numbers, spaces, or special characters in them. Without bracket notation in these situations, our code would throw an error. For example, if we wanted an object to have property names that are date strings:
211
213
212
214
```javascript
213
215
constheatmap_data= {
@@ -263,7 +265,7 @@ console.log(obj);
263
265
264
266
## Check if a property exists
265
267
266
-
The binary `in` operator, when applied to a string and an object, tells you whether that object or an object in its prototype chain has a property with that name. By contrast, the built-in method `hasOwnProperty()` lets you check if the object itself (not a prototype) has the property.
268
+
The binary `in` operator, when applied to a string or an object, tells you whether that object (or an object in its prototype chain) has a property with that name. By contrast, the built-in method `hasOwnProperty()` lets you check if the object itself (not a prototype) has the property.
267
269
268
270
```javascript
269
271
constobj= {
@@ -471,6 +473,9 @@ factoryObj.special = function () {
471
473
console.log('special');
472
474
};
473
475
476
+
// No point adding a method to the factory function since
477
+
// there's no prototype link to the objects it returns
The `.assign()` method copies all properties from one or more source objects to a new target object. You pass two or more arguments: `Object.assign(target_object, source_object)`. The method copies properties from the source object(s) to the target object. Properties in the target object will be overwritten by properties in the source(s) if they have the same key. If the sources have the same keys, the last one in the argument list will be applied to the target.
As a kind of a side note, you can also use destructing to pass objects as paramaters. For more, see destructuring below and in [destructuring.md](destructuring.md).
Polymorphism is a technique where you can define a common interface for many other different abstract types, provided they support the interface it expects. A simple example of this is:
@@ -555,14 +593,16 @@ console.log(j.toString());
555
593
As of ES5 all object properties can be described in terms of a *property descriptor*. This data descriptor can be accessed using a built-in method that comes with `Object`, for example:
556
594
557
595
```javascript
558
-
constplant= {name:'plant', sunlight:'full'}
596
+
constplant= {name:'bob', sunlight:'full'}
559
597
let desc =Object.getOwnPropertyDescriptor(plant, 'name');
560
598
561
599
console.log(desc);
562
-
// { value: 'plant',
600
+
// {
601
+
// value: 'bob',
563
602
// writable: true,
564
603
// enumerable: true,
565
-
// configurable: true }
604
+
// configurable: true
605
+
// }
566
606
```
567
607
568
608
As we can see, there are three additional characteristics that describe each property. The default is for all of these to be true. If we wanted to change these characteristics, we can use `Object.defineProperty()`. With this method we can add a new property or modify an existing one.
@@ -572,7 +612,7 @@ As we can see, there are three additional characteristics that describe each pro
572
612
`writeable` controls whether you can change the properties value.
573
613
574
614
```javascript
575
-
constplant= {name:'plant', sunlight:'full'};
615
+
constplant= {name:'bob', sunlight:'full'};
576
616
577
617
Object.defineProperty(plant, 'special', {
578
618
value:'something',
@@ -593,7 +633,7 @@ plant.special = 'other';
593
633
`configurable` controls whether you can modify any these characteristics. Once you change this characteristic to false, you can't change it back. An interesting side-effect of making a value *unconfigurable* is that it can't be deleted with `delete`:
594
634
595
635
```javascript
596
-
constplant= {name:'plant', sunlight:'full'};
636
+
constplant= {name:'bob', sunlight:'full'};
597
637
598
638
Object.defineProperty(plant, 'special', {
599
639
value:'something',
@@ -614,7 +654,7 @@ delete plant.special
614
654
`enumerable` controls whether the property will be included in enumerations such as the `for..in` loop. Interestingly, this means that the property will be hidden from some methods like `Object.keys()` but not `Object.getOwnPropertyNames()`.
0 commit comments