Methods are properties with functions for their values. In JavaScript, you define a method the same way that you define any function. The only difference is that a method is assigned to a property of an object. This example demonstrates the creation of an object with several properties, one of which is a method.
var sandwich = {
meat:”“,
cheese:”“,
bread:”“,
condiment:”“,
makeSandwich: function (meat,cheese,bread,condiment) {
sandwich.meat = meat;
sandwich.cheese = cheese;
sandwich.bread = bread;
sandwich.condiment = condiment;
var mySandwich = sandwich.bread + “, “ + sandwich.meat + <br/>“, “ + sandwich.cheese + “, “ + sandwich.condiment;
return mySandwich;
}
}
To call the makeSandwich method of the sandwich object, you can then use dot notation just as you would access a property, but with parentheses and parameters supplied after the method name.
<html>
<head>
<title>Make me a sandwich</title>
</head>
<body>
<script>
var sandwich = {
meat:”“,
cheese:”“,
bread:”“,
condiment:”“,
makeSandwich: function (meat,cheese,bread,condiment) {
sandwich.meat = meat;
sandwich.cheese = cheese;
sandwich.bread = bread;
sandwich.condiment = condiment;
var mySandwich = sandwich.bread +
“, “ + sandwich.meat + “, “ +
sandwich.cheese + “, “ +
sandwich.condiment;
return mySandwich;
}
}
var sandwichOrder = <br/>sandwich.makeSandwich(“ham”,”cheddar”,”wheat”,”spicy mustard”);
document.write (sandwichOrder);
</script>
</body>
</html>
Using this
The this keyword is a shorthand for referencing the containing object of a method. For example, in the code below, every instance of the object name, sandwich, has been replaced with this. When the makeSandwich function is called as a method of the sandwich object, JavaScript understands that this refers to the sandwich object.
<html>
<head>
<title>Make a sandwich</title>
</head>
<body>
<script>
var sandwich = {
meat:”“,
cheese:”“,
bread:”“,
condiment:”“,
makeSandwich: function(meat,cheese,bread,condiment){
this.meat = meat;
this.cheese = cheese;
this.bread = bread;
this.condiment = condiment;
var mySandwich = this.bread + “, “ + this.meat + “, “ + this.cheese + “, “ + this.condiment;
return mySandwich;
}
}
var sandwichOrder = <br/>sandwich.makeSandwich(“ham”,”cheddar”,”wheat”,”spicy mustard”);
document.write (sandwichOrder);
</script>
</body>
</html>
The result of using the this keyword instead of the specific object name is exactly the same in this case.
Where this becomes very useful is when you have a function that may apply to multiple different objects. In that case, the this keyword will reference the object that it’s called within, rather than being tied to a specific object.
Constructor functions and inheritance are both enabled by the humble this statement.
