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.