Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 99

Implementing inheritance
In object-oriented programming, inheritance is a fundamental concept. In standard object-
oriented programming, classes are created in a relational hierarchy, so that the attributes and
functionality of one entity can be reused within another entity without having to re-create all
the code. In object-oriented parlance, if an entity satisfies the “is-a” relationship question, it's
a candidate for inheritance. For example, an organization is made up of employees, in which
an employee entity has certain attributes (properties) and behaviors (methods). Management,
executives, and staffers are all types of employees. A staffer “is-a” employee. So in an object-
oriented design, a staffer object would inherit from an employee. This type of inheritance is
quite easy to build in full-fledged object-oriented languages. However, JavaScript is a special
situation because it doesn't use classes. As you saw in the previous sections, everything is
an object; a custom object is made up of properties where some properties are native types
and some properties are assigned to functions to implement methods. This section examines
object inheritance as it works in JavaScript.
Building on the code used in the previous section, this section explains object inheritance.
In the preceding code sample, you created an object called Book . But many types of books
exist. To extend the definition of Book , you must separate the differences in functionality
between, for example, pop-up topics and other topics. Pop-up topics have some extra func-
tionality, such as displaying the pop-up on the current page and perhaps playing a sound. In
other words, while a pop-up book “is-a” type of book, it also has this extra functionality that
doesn't apply to all topics. In this case, it would be useful to inherit from Book so that all the
basic attributes and behaviors of a book are available without you having to re-create them.
Then you could add the speciic functionality for pop-up topics.
You can extend the Book object in a couple of ways. (Extending is another way of thinking
about inheritance—an object is extended into another object.) Here's the first way to extend
an object:
var popupBook = Object.create(Book.protoType,{ hasSound: {value:true},
showPopUp:{ value: function showPop() {
//do logic to show a popup
}
}
});
Object.create is a method available from the Object class in the global namespace. The
create method takes two parameters: the object you want to create and a list of property
descriptors.
The first parameter expects to receive the prototype of the object to create or null. If
null is specified, the object uses only those functions or properties specified in the second
parameter. If an object prototype is specified, as in the case Book.prototype , the object
is created with all the properties and functions declared on that object prototype. This is
another reason designing code in a proper object-oriented way is important—so that you can
leverage this type of functionality to keep code more readable and maintainable.