Working with Methods to Code with JavaScript - dummies

Working with Methods to Code with JavaScript

By Chris Minnick, Eva Holland

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 + 
“, “ + 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 = 
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 = 
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.