The decorator design pattern was created in order to allow us adding new functionality to an already existing class without extending it. The decorator design pattern was created for those cases in which we cannot extend the class.
The following code sample shows a simple demo for implementing the decorator design pattern in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>decorator design pattern demo</title>
</head>
<body>
<script type="text/javascript">
function Teacher( options) {
this.hourRate = options.hourRate || 100;
this.firstName = options.firstName || "no first name";
this.lastName = options.lastName || "no last name";
this.id = options.id || "-9999999999";
this.subject = options.subject || "history";
}
var ob = new Teacher({
hourRate:200,
firstName:"haim",
lastName:"michael",
id:242332434,
subject:"Java"
});
//decorating our object with new functionality
ob.salary = function(hours) {return hours*this.hourRate;};
document.write(ob.salary(150));
</script>
</body>
</html>
The following video clip goes over the code, shows its execution and explains it in detail.
You can find more video clips, training material and code samples for learning about the available design patterns in JavaScript in my free online courses website at http://abelski.lifemichael.com.
