When you create objects with JavaScript, you’re not just limited to creating specific objects, such as your guitar, your car, your cat, or your sandwich. The real beauty of objects is that you can use them to create types of objects, from which other objects can be created.
Here, a new person object of the type Object is created. This new person object contains all the default properties and methods of the Object type, but with a new name. You can then add your own properties and methods to the person object to make it specifically describe what you mean by person.
var person = new Object(); person.eyes = 2; person.ears = 2; person.arms = 2; person.hands = 2; person.feet = 2; person.legs = 2; person.species = “Homo sapien”;
So, now you’ve set some specific properties of the person object. Imagine that you want to create a new object that’s a specific person, like Willie Nelson. You could simply create a new object called willieNelson and give it all the same properties as the person object, plus the properties that make Willie Nelson unique.
var willieNelson = new Object(); willieNelson.eyes = 2; willieNelson.ears = 2; willieNelson.arms = 2; willieNelson.hands = 2; willieNelson.feet = 2; willieNelson.legs = 2; willieNelson.species = “Homo sapien”; willieNelson.occupation = “musician”; willieNelson.hometown = “Austin”; willieNelson.hair = “Long”; willieNelson.genre = “country”;
This method of defining the willieNelson object is wasteful, however. It requires you to do a lot of work, and there’s no indication here that Willie Nelson is a person. He just happens to have all the same properties as a person.
The solution is to create a new type of object, called Person and then make the willieNelson object be of the type Person.
Notice that the name of the object type is always capitalized. This isn’t a requirement, but it is a nearly universal convention. For example, you can say
var person = new Object();
or
var willieNelson = new Person();
Constructing Objects with constructor functions
To create a new type of object, you define a new constructor function. Constructor functions are formed just like any function in JavaScript, but they use the this keyword to assign properties to a new object. The new object then inherits the properties of the object type.
Here is a constructor function for our Person object type:
function Person(){
this.eyes = 2;
this.ears = 2;
this.arms = 2;
this.hands = 2;
this.feet = 2;
this.legs = 2;
this.species = “Homo sapien”;
}
To create a new object of the type Person now, all you need to do is to assign the function to a new variable. For example:
var willieNelson = new Person()
The willieNelson object inherits the properties of the Person object type. Even though you haven’t specifically created any properties for the willieNelson object, it contains all the properties of Person.
To test this out, run this code in a web browser.
<html>
<head>
<title>Inheritance demo</title>
</head>
<body>
<script>
function Person(){
this.eyes = 2;
this.ears = 2;
this.arms = 2;
this.hands = 2;
this.feet = 2;
this.legs = 2;
this.species = “Homo sapien”;
}
var willieNelson = new Person();
alert(“Willie Nelson has “ + willieNelson.feet + “ feet!”);
</script>
</body>
</html>
Here is the result of running this code in a browser.
Person." width="451"/>Modifying an object type
Suppose that you have your Person object type, which serves as the prototype for several objects. At some point you realize that the person, as well as all the objects that inherit from it, ought to have a few more properties.
To modify a prototype object, use the prototype property that every object inherits from Object.
function Person(){
this.eyes = 2;
this.ears = 2;
this.arms = 2;
this.hands = 2;
this.feet = 2;
this.legs = 2;
this.species = “Homo sapien”;
}
var willieNelson = new Person();
var johnnyCash = new Person();
var patsyCline = new Person();
// Person needs more properties!
Person.prototype.knees = 2;
Person.prototype.toes = 10;
Person.prototype.elbows = 2;
// Check the values of existing objects for the new properties
document.write (patsyCline.toes); // outputs 10
Creating Objects with Object.create
Yet another way to create objects from other objects is to use the Object.create method. This method has the benefit of not requiring you to write a constructor function. It just copies the properties of a specified object into a new object. When an object inherits from another object, the object it inherits from is called the prototype.
This example shows how Object.create can be used to create the willieNelson object from a prototype.
// create a generic Person
var Person = {
eyes: 2,
arms: 2,
feet: 2
}
// create the willieNelson object, based on Person
var willieNelson = Object.create(Person);
// test an inherited property
document.write (willieNelson.feet); // outputs 2