Guide: Object-Oriented JavaScript (OOJS): Complete Guide
When is a programming language all about objectsis the first thing we need to learn how to create objectsCreating objects in JavaScript is quite easy: a few braces will do the job however not the only way either to create an object nor the only way you will ever have to use. Object instances are in JavaScript created from built-in objects and created when the program is executed. For example, date is a built-in object that gives us information about dates. If we want to show the current date on a page, we are need a runtime instance of Date that contains the information about the current date. JavaScript also enables us define our own objects that can produce their own object instances at run time. In JavaScript, everything is an object and each object has one ultimate ancestor called Object. Creating an object instance is called instantiation
1. The new operator
One of the most common and well-known methods of creating a new object instance is through using the new operator You need one constructor to make the new operator work. A constructor is a method of an object that takes a new instance of that objectThe basic syntax looks like this: new constructor () A constructor can accept arguments dat can be used to change or add properties to the object instance it is constructing. The constructor has the same name as the object to which it belongs. Here’s an example how to Create one instance of the Date () object with the new keyword: dt = new Date (2017, 0, 1) console.log (dt) // Sun Jan 01 00:00:00 GMT + 0100 Date () is the constructor to create a new Date object. Different constructors for an object take several arguments to create the same kind of object instances with varied attributes Not all built-in objects in JavaScript can be instantiated like Date. There are objects that do not come with a constructor: Math, JSON and Reflect, but they are still regular objects. Among the built-in objects that have constructor (s) is Symbol cannot be called in constructor style to instantiate a new Symbol instance. It can only be called as a function which returns a new symbol value. Of the built-in objects that have constructor (s), not all constructors need to be called with the new operator to be instantiated. Function, array, error and RegExp can also be called as functions, without using the new keyword, and they will instantiate and return a new object instance.
2. The Reflect object
Backend programmers may already be familiar with Reflection APIsReflection is one feature from programming languages to inspect and update some of the base entities, such as objects and classes, at runtime In JavaScript, you can already perform some reflection operations with Object. But one correct Reflection API eventually also originated in JavaScript. The Think object has a set of methods to convert create and update object instancesThe Reflect object has no constructor, so it cannot be instantiated with the new operator, and, like Math and JSON, the cannot be called as a function one of both. However, Reflect has one equivalent of the new operator: the Reflect.construct () method. Reflect.construct (target, argumentsList[, newTarget] Both the target and the optional newTarget arguments are objects with their own constructors, while argumentsList is a list of arguments are passed to the target constructor. var dt = Reflect.construct (Date, [2017, 0 , 1]); console.log (dt); // Sun Jan 01 00:00:00 GMT + 0100 The above code has the same effect as instantiating Date () using the new operator. While you can still use new, Reflection is one ECMAScript 6 standardIt also allows you use the argument newTarget, which is another advantage over the new operator. The value of the newTarget prototype (to be precise, it is the prototype of the newTarget constructor) becomes the prototype of the newly created instance It is a prototype ownership of an object, whose value is also an object, with the properties of the original object. In short, an object takes its members from its prototype. Let’s take a look at an example here: class A {constructor () {this.message = function () {console.log (‘message from A’)}}} class B {constructor () {} message () {console.log (‘message from B’)} data () {console.log (‘data from B’)}} obj = Reflect.construct (A, [], B) console.log (obj.message ()); // message from A console.log (obj.data ()); // data from B console.log (obj instanceof B) // true Passing B as the third argument to Reflect.construct () is the prototype value of the obj object made to be the same as the prototype of B’s constructor (which has message and data properties). So obj has access to the message and data, available from the prototype. But since obj is created with A, it also has its own message received from A. Even though obj is constructed as an array, it is not an instance of Array, because the prototype is set to Object. obj = Reflect.construct (Array, [1,2,3], Object) console.log (obj) // Array [ 1, 2, 3 ] console.log (obj instanceof Array) // false Reflect.construct () can be useful when you want to create an object using more than one blueprint
3. The Object.create () method
You can also use a new ordinary object with a specific prototype through Object.create ()This too may be very similar to using the new operator, but it is not. Object.create (O[, propertiesObject] The O argument is an object that operates the prototype for the new object being created. The optional propertiesObject argument is a list of properties you may want to add to the new object. class A {constructor () {} message () {console.log (‘message from A’)}} var obj = Object.create (new A (), {data: {writable: true, configurable: true, value: function () {return ‘data from obj’}}}) console.log (obj.message ()) // message from A console.log (obj.data ()) // data from obj obj1 = Object.create (new A (), {foo: {writable: true, configurable: true, value: function () {return ‘foo from obj1’}}}) console.log (obj1.message ()) // message from A console.log (obj1.foo ()) // foo from obj1 In obj object, the added property is data, while in obj1 it is foo. So, as you can see, we can have properties and methods added to a new object This is great if you want to create something multiple objects of the same kind but with various additional properties or methodsThe Object.create () syntax saves you the trouble of coding them all individually.
Object-Oriented JavaScript (OOJS): Complete Guide: benefits
Faq
Final note
I hope you like the guide Object-Oriented JavaScript (OOJS): Complete Guide. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the Object-Oriented JavaScript (OOJS): Complete Guide, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “Object-Oriented JavaScript (OOJS): Complete Guide”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide Object-Oriented JavaScript (OOJS): Complete Guide, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
