Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Using Object Prototypes

Using Object Prototypes

In this lesson, we get acquainted with object prototypes and their usage in JavaScript. Let's begin!

We'll cover the following...

Prototypes may provide a great solution for both the resource wasting and poor maintainability issues. As you learned in the previous Chapter (A Quick Overview of Function Prototypes), functions in JavaScript are created with a prototype property, which is an object containing properties and methods that should be available to instances of a particular object type.

Modifying the Employee construction as shown in the Listing below offers a remedy for the issues mentioned earlier.

Listing: Construction with prototype

<!DOCTYPE html>
<html>
<head>
  <title>Construction with prototype</title>
  <script>
    var Employee = function (id, firstName,
      lastName, title) {
      this.id = id;
      this.firstName = firstName;
      this.lastName = lastName;
      this.title = title;
    }

    Employee.prototype.getFullName =
      function () {
        return this.lastName + ", " + this.firstName;
      }

    var philip = new Employee(1, "Philip", "Moore",
      "CEO");
    var jane = new Employee(2, "Jane", "Mortimer",
      "CFO");

    console.log(philip.getFullName());
    console.log(jane.getFullName());
  </script>
</head>
<body>
  Listing 8-16: View the console output
</body>
</html>

To understand how prototypes work, here is a short explanation. Each function has a prototype property; whenever a function is created, its prototype property is also set. By default, all prototypes get a property called constructor that points to the function used to create the object instance. As shown at the right side of Figure 8-3, the Employee.prototype has a ...