The Decorator Design Pattern in JavaScript PRO

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.

Share:

The Visitor Design Pattern

The Visitor Design Pattern

The visitor design pattern allows us to add operations to objects that already exist without modifying their classes and without extending them.

The Beauty of Code

Coding is Art! Developing Code That Works is Simple. Develop Code with Style is a Challenge!

Update cookies preferences