Understanding OOP in JavaScript: Factory, Constructor, Prototype Patterns, Slides of Fundamentals of E-Commerce

Download Understanding OOP in JavaScript: Factory, Constructor, Prototype Patterns and more Slides Fundamentals of E-Commerce in PDF only on Docsity!

1

INTRODUCTION TO

JAVAS CRIPT O BJECTS

Topics

Object‐oriented programming in JavaScript Factory Pattern CConstructor t t P ttPattern Prototype Pattern Dynamic Prototype Pattern

2

Classless Objects

JavaScript has no class definitions. Objects are created based on the language‐defined ObjectObject constructconstruct. To create multiple objects based on a desired object structure, functions written to guide instantiation. http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐1.htm JavaScript's class‐free object‐oriented structure is a ff requentlyl criticizedi i i d element.l

Factory Pattern

One way to create multiple objects with the same properties and functions is to use the Factory PatternPattern design patterndesign pattern. Function takes in property values, creates an object, assigns properties and functions to the object, and returns the object. The function becomes an "object factory". http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐2.htm Use identifiers beginning with capital letters for objects (only) to denote distinction from identifiers used with primitive data types.

4

Prototype Pattern

Another alternative is the Prototype Pattern. With this pattern, memory and resources are used more efficientlyy as multiplep objectsj share resources. The Constructor function body is (typically) null. Properties and functions are assigned to the constructed object's prototype. prototype is a default property within an object that contains properties and methods available to all instances of that objectinstances of that object. This technique allows defining 'default values' for objects and object functions. The object creation call does not specify property values. http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐4.htm

Prototype pattern

With the Prototype Pattern, value assignments to the instantiated (or instance) object shadow property values in the prototype (they do notproperty values in the prototype (they do not replace them). (Creating a 'search order'.) delete can be used to remove a property/value pair from an object. http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐5.htm

5

Comparing the patterns

Factory Pattern and Constructor Pattern Object

Prototype Pattern Prototype Properties Functions

Object Properties

Object Properties

Properties Functions

Object OverriddenProperties

Object OverriddenProperties Functions Functions

Properties Overridden Functions

Properties Overridden Functions

toString

Each object contains a language‐defined function toString which outputs the object as a String. U lUnless overriddenidd ii n our objectbj t i i nstance,t thithi s willill output "[object Object]". http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐5a.htm This function can/should be overridden based on our desire of how the object should be represented as a string. http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐5b.htm

7

Checking for, enumerating properties

The for…in loop can be used to enumerate all

properties and functions present in an object.

http://einstein.etsu.edu/~pittares/CSCI3110/examples/6// / / / / ‐8.htm

http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐9.htm

http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐10.htm

Ordering of properties within an object is notOrdering of properties within an object is not

fixed.

Test your understanding

8

Property enumeration

When properties of an object are enumerated, some properties are not listed. Some built in properties are designated as nonSome built in properties are designated as non‐ enumerable. Examples include toString and others. Browsers are inconsistent in their behavior of these non‐enumerable elements. In IE, if you override the non‐enumerable property with your own, your override is still nonoverride is still non ‐enumerableenumerable. In Opera Safari andIn Opera, Safari, and Firefox the behavior varies depending on property. http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐11.htm

Dynamic Prototype Pattern

2 notable disadvantages of using the "pure" Prototype Pattern:

1. Cannot instantiate and set properties in one line.
2. As allll instances are referencesf to theh prototype, iff h the prototype contains an object, this single object is shared among all instances. Solution: use a combination of the Constructor and Prototype Patterns—the Dynamic Prototype Pattern. Properties set in the Constructor pattern fashion. Each functionfunction set on the prototypeset on the prototype ifif not already innot already in existence. http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐12.htm http://einstein.etsu.edu/~pittares/CSCI3110/examples/6‐13.htm