Javascript Object Prototypes

7 Key excerpts on "Javascript Object Prototypes"

• 

  No longer available |Learn more

  The JavaScript Workshop

  A New, Interactive Approach to Learning JavaScript

  • Joseph Labrecque, Jahred Love, Daniel Rosenbaum, Nick Turner, Gaurav Mehla, Alonzo L. Hosford, Florian Sloot, Philip Kirkbride(Authors)
  • 2019(Publication Date)
  • Packt Publishing

    (Publisher)

  In this section, we have learned about different types of programming paradigms we can use with JavaScript. We dug deep into two of the most popular paradigms – procedural and object-oriented. We went through different pros and cons of both paradigms. We also learned about two of the most important features of OOP, which are encapsulation and inheritance.

  Basic JavaScript Concepts

  Programming paradigms are important, but to understand them in detail, we need a basic understanding of different JavaScript concepts. So, let's go through some of the core concepts of JavaScript, which will help you get a grasp of JavaScript and give you a better understanding of how we can use programming paradigms to build scalable solutions to problems.

  Prototypes and Prototypical Inheritance

  Objects are very important because they help us manipulate JavaScript to achieve the functionality we want. There are a lot of ways to create objects in JavaScript. One of the ways is by using a constructor function, and whenever we create a function, the JavaScript engine adds a prototype property to the function. This prototype property is an object that has a constructor property by default. This constructor points back to the parent functions. You can see this function by calling functionName.prototype .

  Let's first create a function: function PersonName(first_name, last_name) { this.first_name = first_name; this.last_name = last_name; this.fullName = function(){  return [ this.first_name, this.last_name].join(" ");      }  }

  Now, let's check its prototype property by entering PersonName.prototype .The output will be as follows:

  Figure 13.4: Prototype property of objects

  As you can see, we have created a function named PersonName and JavaScript automatically binds a prototype property to it. You can print the prototype and you can see that there is a constructor property, which holds all the metadata of the parent function.

  What Is Prototypical Inheritance?

  As we know, everything in JavaScript is an object. Every string, integer, array, object, and function that you define is an object of its respective parent class. Each object in JavaScript holds a proto property (__proto__ keys inside child objects are usually referred to as proto properties) that holds all the properties of its parent class. We can use these proto properties to implement inheritance. These prototype objects act as template objects from which all the child objects will inherit methods and properties. We can also override the properties of a parent class using this prototype

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  JavaScript: Novice to Ninja

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

    (Publisher)

  Chapter 12: Object-Oriented Programming in JavaScript

  Object-oriented programming (OOP for short) is a style of programming that involves separating the code into objects that have properties and methods. This approach has the benefit of keeping related pieces of code encapsulated in objects that maintain state throughout the life of the program. The objects can also be reused or easily modified, as required. JavaScript obviously supports objects, as we saw in Chapter 5 , so it also supports an object-oriented style of programming. In this chapter, we’ll look at what object-oriented programming is and how to implement it in JavaScript.

  In this chapter, we’ll cover the following topics:

  • An introduction to OOP
  • Constructor functions
  • Using classes in JavaScript
  • Prototypes
  • Public and private methods
  • Inheritance
  • Creating objects from objects
  • Adding methods to built-in objects
  • Mixins
  • Chaining functions
  • This and that
  • Borrowing methods from prototypes
  • Our project ― create questions in an OOP way

  Object-Oriented Programming

  Object-oriented programming is often used to model representations of objects in the real world. There are three main concepts in OOP: encapsulation, polymorphism and inheritance. I’m going to use my juicer to illustrate how each of these concepts can be applied in a programming environment, since the juicer can be considered an object. It’s a wonderful machine that makes fresh juice for me every morning. In many ways, my juicer can be thought of as an object, as it has properties such as speed and capacity, and also has methods or actions it can perform, such as juicing, switching on and switching off.

  Encapsulation

  When I use my juicer, I put the fruit into the machine, press the 'on' button and out comes the juice. I haven’t a clue how it does it—only that it makes a very loud noise! This demonstrates the concept of encapsulation: the inner workings are kept hidden inside the object and only the essential functionalities are exposed to the end user, such as the 'on' button. In OOP, this involves keeping all the programming logic inside an object and making methods available to implement the functionality, without the outside world needing to know how

  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
• 

  No longer available |Learn more

  Professional JavaScript for Web Developers

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

    (Publisher)

  sayName() function. To understand how this works, you must understand the nature of prototypes in ECMAScript.

  How Prototypes Work

  Whenever a function is created, its prototype property is also created according to a specific set of rules. By default, all prototypes automatically get a property called constructor that points back to the function on which it is a property. In the previous example, for instance, Person.prototype.constructor points to Person . Then, depending on the constructor, other properties and methods may be added to the prototype.

  When defining a custom constructor, the prototype gets the constructor property only by default; all other methods are inherited from Object . Each time the constructor is called to create a new instance, that instance has an internal pointer to the constructor's prototype. In ECMA-262, this is called [[Prototype]] . There is no standard way to access [[Prototype]] from script, but Firefox, Safari, and Chrome all support a property on every object called __proto__

  Sign up to read

  Learn more about book
• 

  No longer available |Learn more

  Mastering JavaScript Object-Oriented Programming

  • Andrea Chiarelli(Author)
  • 2016(Publication Date)
  • Packt Publishing

    (Publisher)

  Of course, the lack of a notion of class in JavaScript affects the inheritance mechanism. In fact, while in classical OOP inheritance is an operation allowed on classes, in prototypal OOP inheritance is an operation on objects.

  That does not mean that classical OOP is better than prototypal OOP or vice versa. They are simply different approaches. However, we cannot ignore that these differences lead to some impact in the way we manage objects. At least we note that while in classical OOP classes are immutable, that is we cannot add, change, or remove properties or methods at runtime, in prototypal OOP objects and prototypes are extremely flexible. Moreover, classical OOP adds an extra level of abstraction with classes, leading to a more verbose code, while prototypal OOP is more immediate and requires a more compact code.

  Passage contains an image

  Summary

  In this chapter, we explored the basic principles of the OOP paradigm. We have been focusing on abstraction to define objects, association, aggregation, and composition to define relationships between objects, encapsulation, inheritance, and polymorphism principles to outline the basic principles required by OOP. We have seen how JavaScript supports all features that allow us to define it as a true OOP language and have compared classical OOP with prototypal OOP.

  Once we established that JavaScript is a true Object-Oriented language like other languages such as Java, C #, and C ++, we will continue in the coming chapters by exploring how to take advantage of OOP support for our applications. In particular, in the next chapter we will focus on encapsulation and information hiding, analyzing the advanced JavaScript support and the most common patterns.

  Passage contains an image

  Chapter 3. Working with Encapsulation and Information Hiding

  In this chapter, we will explore the relationship between encapsulation and information hiding, and we will see the different approaches to implement the visibility and accessibility of members of a JavaScript object. The following topics will be addressed in this chapter:

  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
• 

  No longer available |Learn more

  Web Developer's Reference Guide

  • Joshua Johanan, Talha Khan, Ricardo Zea(Authors)
  • 2016(Publication Date)
  • Packt Publishing

    (Publisher)

  Objects

  Objects are the basic key to understand object-oriented programming. Programming objects are just like real-world objects. Look around, you'll see many objects. Your car, mobile phone, desk, laptop, pet dog, and DVD player are all objects.

  All objects have two characteristics: properties and methods. A mobile has properties (color, screen size, height, and weight) and methods (make calls, send SMSs, receive calls, and transfer files). A car has properties (color, height, gearbox, wheels, engine, brakes, and steering) and methods (start engine, steer, change gear, apply brake, stop, and crash).

  Just like these real-world examples, the objects in OOP have the same characteristics. So, an object, in terms of programming, can have properties (variables in any programming language) and methods (functions in any programming language).Hence, we can define an object as "an entity or a thing that has some properties and methods associated with it. An object can be individually selected and manipulated ".

  All generic properties and methods are combined into a template called a class . A class is then used as a template to instantiate single or multiple objects. In JavaScript, there are many built-in objects, such as Maths, Dates, Regular Expressions, Arrays, and so on.

  Creating objects

  In JavaScript, we can create objects in three different ways:

  • Using object literals
  • Using new keywords
  • Using the object.create() method (ECMAScript 5)

  Object literals

  This is the simplest way to create an object. An object can be both created and defined in one statement using an object literal. An object literal is a comma-separated list of name:value

  Sign up to read

  Learn more about book