Javascript Object Creation

7 Key excerpts on "Javascript Object Creation"

• 

  No longer available |Learn more

  Professional JavaScript for Web Developers

  • Matt Frisbie(Author)
  • 2019(Publication Date)
  • Wrox

    (Publisher)

  8 Objects, Classes, and Object-Oriented Programming

  WHAT'S IN THIS CHAPTER?

  • Understanding objects
  • Understanding object creation
  • Understanding inheritance
  • Understanding classes

  ECMA-262 defines an object as an unordered collection of properties. Strictly speaking, this means that an object is an array of values in no particular order. Each property or method is identified by a name that is mapped to a value. For this reason (and others yet to be discussed), it helps to think of ECMAScript objects as hash tables: nothing more than a grouping of name-value pairs where the value may be data or a function.

  UNDERSTANDING OBJECTS

  The canonical way of creating a custom object is to create a new instance of Object and add properties and methods to it, as in this example:

  let person = new Object(); person.name = "Nicholas"; person.age = 29; person.job = "Software Engineer"; person.sayName = function() { console.log(this.name); };

  This example creates an object called person that has three properties (name , age , and job ) and one method (sayName() ). The sayName() method displays the value of this.name , which resolves to person.name . Early JavaScript developers used this pattern frequently to create new objects. A few years later, object literals became the preferred pattern for creating such objects. The previous example can be rewritten using object literal notation as follows:

  let person = { name: "Nicholas", age: 29, job: "Software Engineer", sayName() { console.log(this.name); } };

  The person object in this example is equivalent to the person object in the prior example, with all the same properties and methods. These properties are all created with certain characteristics that define their behavior in JavaScript.

  Types of Properties

  ECMA-262 describes characteristics of properties through the use of internal-only attributes. These attributes are defined by the specification for implementation in JavaScript engines, and as such, these attributes are not directly accessible in JavaScript. To indicate that an attribute is internal, surround the attribute name with two pairs of square brackets, such as [[Enumerable]]

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Web Programming

  Building Internet Applications

  • Chris Bates(Author)
  • 2014(Publication Date)
  • Wiley

    (Publisher)

  JavaScript has one more concept left that you need to understand before diving into DHTML. JavaScript tries to be an object-oriented (OO) language. It is not actually a true OO language like Smalltalk or Eiffel, but it tries, the primitive objects that JavaScript does provide are very useful. Because the built-in functions all use these ideas, you will need to get a grasp of them before going any further, so next up we have JavaScript objects for beginners. 7.1.1 Objects – A Brief Introduction Object orientation is one of the most powerful concepts yet developed by computer scientists. Objects are widely applicable and object-based systems can be developed using many languages. Experienced programmers who are used to developing in traditional languages such as COBOL or FORTRAN, which have historically not supported objects, often find the OO paradigm confusing. Beginning programmers tend to be able to think in object terms right from the start. As you will see in a while, JavaScript objects are easy to understand and use, but the language does not support all of the features found in most object systems. Before I discuss JavaScript objects I will just spin rapidly through the general idea of objects. Objects An object is a thing. It can be anything that you like from some data through a set of methods (which is the name for functions in OO.) to an entire system. The reason that object-orientation is such a powerful idea is that, quite simply, it lets software designers and 7.1. Data and Objects in JavaScript 199 developers mimic the real world in their designs. This idea might be so obvious as to be not worth mentioning, after all software is usually meant to solve real-world problems. The benefit of OO is the tight linkage between the description of a problem and the ways in which it can be solved. Real objects are more than just data or processing: data often describe something but the thing being described also has the ability to act.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Beginning JavaScript

  • Jeremy McPeak(Author)
  • 2015(Publication Date)
  • Wrox

    (Publisher)

  Person constructor serve the same purpose: to represent an individual person. The main difference is how the objects are created. Objects created from a constructor typically consume less of the computer’s memory than literal objects.

  Frankly, it’s a question you don’t have to worry about at this point in time. It’s more important to know how to create objects than using the correct approach. So practice both methods; create your own custom objects and reference types!

  SUMMARY

  In this chapter you’ve taken a look at the concept of objects and seen how vital they are to an understanding of JavaScript, which represents virtually everything with objects. You also looked at some of the various native reference types that the JavaScript language provides to add to its functionality.

  You saw that:

  • JavaScript is object-based—it represents things, such as strings, dates, and arrays, using the concept of objects.
  • Objects have properties and methods. For example, an Array object has the length property and the sort() method.
  • To create a new object, you simply write new ObjectType() . You can choose to initialize an object when you create it.
  • To set an object’s property value or get that value, you simply write objectName.objectProperty .
  • Calling the methods of an object is similar to calling functions. Parameters may be passed, and return values may be passed back. Accessing the methods of an object is identical to accessing a property, except that you must remember to add parentheses at the end, even when it has no parameters. For example, you would write objectName.objectMethod() .
  • The String type provides lots of handy functionality for text and gives you ways of finding out how long the text is, searching for text inside the string, and selecting parts of the text.
  • The Math type is created automatically and provides a number of mathematical properties and methods. For example, to obtain a random number between 0 and 1, you use the method Math.random()

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Start Programming Using HTML, CSS, and JavaScript

  • Iztok Fajfar(Author)
  • 2015(Publication Date)
  • Chapman and Hall/CRC

    (Publisher)

  For example, arrays, functions, and dates are all native objects. 208 Meeting 11. Building Your Own Objects • Second, user-defined objects are all objects defined by the programmer and cre-ated during the execution of JavaScript code. • The last group are host objects, which are defined by the host environment in which the JavaScript interpreter is running. In our case, host objects will be the browser objects because we run our programs within a browser. 11.3 Classes Professor : The objects complex , conjugate , and englGerm , which we just created, were all unique, each having its own set of properties. It is, however, often useful to define not just properties but also a behavior of an object. For complex numbers, for instance, you could define arithmetic operations. Note that it wouldn’t make much sense to define arithmetic operations for each complex object separately as we did for the im and re property values, which must be unique for each object. In such cases it is more useful to define a class of objects. You may then create members or instances of the defined class, which have their own unique property values that specify their individual state, and methods that define their behavior and are shared by all the members of the class. The following picture shows an imaginary class named Dog and an object instance of this class named myDog . Class Dog Properties: Methods: sitting length sit() bark() quiet() Property values: sitting = false length = 85 name name = Maxwell barking barking = false Object instance myDog come() Methods: sit() bark() quiet() come() Constructor: Dog() You can see how the object instance has the same methods as the class object, while it specifies its own values for the properties. The class also defines a constructor, which is used for instantiating member objects. To a certain extent, you are already familiar with these concepts.

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  JavaScript for Web Warriors

  • Patrick Carey, Sasha Vodnik, Patrick Carey(Authors)
  • 2021(Publication Date)
  • Cengage Learning EMEA

    (Publisher)

  Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it. CHAPTER 8 CREATING CUSTOMIZED OBJECTS, PROPERTIES, AND METHODS 352 ❯ ❯ Object properties can be referenced using either the dot operator or bracket notation. ❯ ❯ An object literal can be created with the new Object() constructor. ❯ ❯ An object class acts as a template or blueprint for the creation of new objects all sharing a common collection of properties and methods. Each new object based on a class creates an instance of that class. ❯ ❯ An object constructor function is used to create a new class of objects. ❯ ❯ Every JavaScript object has a prototype, which is a template for all the properties and methods associated with the object’s class. Object prototypes are referenced using the prototype property. ❯ ❯ Prototypes can be used to add methods to existing object classes. ❯ ❯ A closure is a copy of a function that also copies the lexical environment of variables within the function. ❯ ❯ Methods associated with custom objects can be public, private, or privileged. A public method is defined for the object prototype and, thus, can be called outside of the object. A private method is a method created within the constructor function and, thus, is accessible only within the constructor. A privileged method is a method that accesses private variables and methods but that is also accessible to the public. ❯ ❯ Object classes can be combined with prototype chains in which the property and methods of one object are inherited by other objects in the chain. All native and custom objects are connected ultimately to the base object. ❯ ❯ Methods in one object class can be applied to another object class using the apply() and call() methods. ❯ ❯ Data can be stored within associative arrays in which data values are matched to key names. A for in loop can be used to loop through the contents of an associative array.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  JavaScript: Novice to Ninja

  • Darren Jones(Author)
  • 2017(Publication Date)
  • SitePoint

    (Publisher)

  index.html in your browser. Providing options that the player can choose from makes the game much easier to play by not requiring any typing:

  Multiple-choice options in the quiz

  You can see a live example on CodePen .

  Chapter Summary

  • Object-oriented programming (OOP) is a way of programming that uses objects that encapsulate their own properties and methods.
  • The main concepts of OOP are encapsulation, polymorphism and inheritance.
  • Constructor functions can be used to create instances of objects.
  • ES6 introduced class declarations that use the class keyword. These can be used in place of constructor functions.
  • Inside a constructor function or class declaration, the keyword this refers to the object returned by the function.
  • All instances of a class or constructor function inherit all the properties and methods of its prototype.
  • The prototype is live, so new properties and methods can be added to existing instances.
  • The prototype chain is used to find an available method. If an object lacks a method, JavaScript will check whether its prototype has the method. If not, it will check that function’s prototype until it finds the method or reaches the Object constructor function.
  • Private properties and methods can be created by defining variables using const and defining a function inside a constructor function. These can be made public using getter and setter functions.
  • Monkey-patching is the process of adding methods to built-in objects by augmenting their prototypes. This should be done with caution as it can cause unexpected behavior in the way built-in objects work.
  • A mixin method can be used to add properties and methods from other objects without creating an inheritance chain.
  • Methods can be chained together and called in sequence if they return a reference to this.
  • Polymorphism allows objects to override shared methods with a more specific implementation.
  • The value of this is not retained inside nested functions, which can cause errors. This can be worked around by using that = this , using the bind(this)

  Sign up to read

  Learn more about book
• 

  eBook - PDF

  Beginning HTML and CSS

  • Rob Larsen(Author)
  • 2013(Publication Date)
  • Wrox

    (Publisher)

  Different Types of Objects You will come across several types of objects in JavaScript, each of which is responsible for a related set of functionalities. For example, the document object has methods and properties that relate to the document; the forms collection, which is part of the document object, deals with information Starting to Program with JavaScript ❘ 347 regarding forms; and so on. As you are about to see, there can be lots of different objects, each of which deals with a different set of functionalities and properties. Here are some of the types of objects you are likely to come across: ‰ ‰ W3C DOM objects: These are like those already covered in this chapter; although, in more recent browsers several more objects are made available to enable you more control over a document. ‰ ‰ Built-in objects: Several objects are part of the JavaScript language. These include the Date object, which deals with dates and times, and the Math object, which provides mathematical functions. You learn more about these built-in objects later in the chapter. ‰ ‰ Custom objects: If you start to write advanced JavaScript, you might even start creating your own JavaScript objects that contain related functionality; for example, you might have a validation object that you have written just to use to validate your forms. Although the creation of custom objects isn’t covered in this chapter, you learn about the built-in objects later in this chapter. STARTING TO PROGRAM WITH JAVASCRIPT Now that you have seen how JavaScript can access a document in the web browser using the DOM, it is time to look at how you use these properties and methods in scripts. The JavaScript Console While you are learning about JavaScript to add interactivity to your web pages, you must know that JavaScript can run in different environments. It can run on a web server or as a separate program on your computer. It can also run in a browser outside of the context of a web page.

  Sign up to read

  Learn more about book