Javascript classes and scoping
-
date post
21-Oct-2014 -
Category
Technology
-
view
1.980 -
download
0
description
Transcript of Javascript classes and scoping
![Page 1: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/1.jpg)
Ext JS classes and Scoping
![Page 2: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/2.jpg)
Agenda• Get back to the basics!
• Master references (variables and object keys)
• Learn about the new class system
• Ext.class.Base
• Explore Mixins
• Ext.Loader
![Page 3: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/3.jpg)
What have I been up to?• Bootstrapping a new company, Modus Create
• Focusing on architecting and building kick-ass Ext JS and Sencha Touch apps!
• Regional and open training on Advanced JavaScript, Ext JS 4 and Sencha Touch
• Rapidly expanding and looking for experienced developers (Sencha Touch and Ext JS)
• http://moduscreate.com
![Page 4: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/4.jpg)
On the book front...• Early access to Sencha Touch
in Action available.
• Chapters 1-3 being distributed
• Chapter 7 is next to be published
• Chapter 4 will be published in about 2 weeks
• Chapters 5 and 6 are being worked on
![Page 5: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/5.jpg)
On the book front...• Code for Chapter 1 is being
worked on.
• Expect TOC revisions to cover the latest changes to Ext JS
• Anyone interested in working with me on this project?
![Page 6: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/6.jpg)
References
A “variable” reference is a pointer to a chunk of memory where some value or object is stored.
![Page 7: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/7.jpg)
References
• Stop saying “variable”!
• Use the word “reference”
• It will remind you of what it really is - a pointer!
• We will use this word from now on
![Page 8: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/8.jpg)
Global references
• If not scoped with the var keyword, they are treated as globals
• This is dangerous!
• The only globally scoped reference that is sanctioned is a namespace.
• Always lexically scope your references with the var keyword.
![Page 9: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/9.jpg)
Naming convention
• Reference names should start with a lower case unless it points to a Class (constructor or singleton).
![Page 10: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/10.jpg)
References
• Because JavaScript is loosely typed, references can be repointed from one type of value to another.
• This is where “variable” comes from.
![Page 11: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/11.jpg)
References
• When one reference is assigned from another, they both point to the same value.
• This assignment does not result in assignment chaining!
![Page 12: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/12.jpg)
Know thy references!
![Page 13: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/13.jpg)
References to the same object
![Page 14: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/14.jpg)
References to the same object
![Page 15: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/15.jpg)
Pointing to other object members
![Page 16: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/16.jpg)
No value chaining!
![Page 17: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/17.jpg)
Passing objects as references
![Page 18: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/18.jpg)
Defining Functions
• Functions are first class objects
• They have properties and methods
• They extend from Object
• They inherit from Function.prototype
• call and apply methods are inherited
![Page 19: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/19.jpg)
Know “this"
• In JavaScript, “this” is a magic reference
• It is set upon execution of a function and is accessible inside that function
• “this” defines the execution scope
• Understanding “this” is very important.
![Page 20: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/20.jpg)
Execution scope defined
•When a function is executed via a var reference, the default execution context (“this”) is “window”.
•When a function is executed via an object key, the execution context (“this”) is the object for which the key belongs.
![Page 21: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/21.jpg)
Default execution for “var” functions
![Page 22: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/22.jpg)
Default execution for object-based functions
![Page 23: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/23.jpg)
What is the execution scope for getName()?
![Page 24: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/24.jpg)
Execution scope defined
•When a function is executed via a var reference, the default execution context (“this”) is “window”.
•When a function is executed via an object key, the execution context (“this”) is the object for which the key belongs.
![Page 25: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/25.jpg)
What is the execution scope for getName()?
![Page 26: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/26.jpg)
It’s easy to mix and match...
![Page 27: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/27.jpg)
What is the default execution scope for person2.getName()?
![Page 28: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/28.jpg)
Forcing scope execution
• call and apply can be used to force scope execution.
• In other words, you have full control over the execution scope of any function in JavaScript.
![Page 29: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/29.jpg)
Take this code...
![Page 30: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/30.jpg)
using getName.call();
![Page 31: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/31.jpg)
Take this code...
![Page 32: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/32.jpg)
Execute person2.getName();
![Page 33: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/33.jpg)
Function.call
A good means to forcing execution scopebut has one major limitation.
You absolutely have to define all of the arguments, which can become a management
nightmare for refactors!
![Page 34: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/34.jpg)
Function.apply to the rescue
Function.apply allows you to force execution scope, but you pass on a list
of arguments or an array.
![Page 35: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/35.jpg)
Take this code...
![Page 36: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/36.jpg)
Execute person2.getName();
![Page 37: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/37.jpg)
How constructors work
![Page 38: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/38.jpg)
Objects == root?
• Object is the base “class” for just about everything inside of JavaScript.
• Just about all of the values that you code and interact with extend from Object.
• Strings, Arrays, Functions,etc
• Using the DOM API method document.getElementByID returns an element reference that ultimately extends Object.
![Page 39: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/39.jpg)
Constructors
• All objects are initialized with constructors
• Constructors are nothing more than a function that is executed within the scope of a new Object
• It’s that simple!
![Page 40: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/40.jpg)
Take this code, for example:
![Page 41: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/41.jpg)
Constructors
• At this point, this is a normal function.
• Notice the argument.
• What will happen if we execute Person(‘Jay’);?
![Page 42: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/42.jpg)
Constructors
• What if...?
![Page 43: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/43.jpg)
Know when to use new?
• When the new operator is placed in front of an method, that method is treated as a “constructor”.
• Else, it’s treated as a generic function.
![Page 44: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/44.jpg)
Prototype == reusability
• A “prototype” is an object that is more or less a blue print for future instances of an object
• It allows JavaScript to “stamp out” instances of an object that inherit the same properties
![Page 45: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/45.jpg)
A prototype in action
![Page 46: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/46.jpg)
Ext JS 4.0 Class System
•Completely revised from 3.0
•No use for the “new” keyword
•Use Ext.create
![Page 47: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/47.jpg)
Ext.Base features
• Automatic Namespace management
• Statics support
• Mixin Support
• Built-in override/extension methods
• Plays nicely with the dynamic class Loader system
• Alternate class name (good for deprecation management)
![Page 48: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/48.jpg)
Creating a class: The Ext.define pattern
Namespaced class reference
Overrides object (methods
properties)
Callback method
(optional)
![Page 49: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/49.jpg)
Ext.define example
![Page 50: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/50.jpg)
Auto-generated setters/gettersSetters and getters
auto-generated!
Use auto-generated setters!
![Page 51: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/51.jpg)
Ext JS 4 Class statics
• Provides scope-independent access to static members.
• Applied before constructor is called
![Page 52: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/52.jpg)
Statics exampleConfigure statics
Access statics
![Page 53: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/53.jpg)
Ext JS 4 Class Mixin support
• Provides a means for extremely easy multiple inheritance
Ext.Base
MyClass
Mixin Mixin
![Page 54: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/54.jpg)
Example Mixin class #1
![Page 55: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/55.jpg)
Example Mixin class #2
![Page 56: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/56.jpg)
Implementing the Mixins
Mixin instances
![Page 57: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/57.jpg)
Identifying the cross inheritance
Members from DrivingMixin
![Page 58: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/58.jpg)
Identifying the cross inheritance
Members from PilotingMixin
![Page 59: Javascript classes and scoping](https://reader034.fdocuments.net/reader034/viewer/2022042613/544764e0afaf9f5d178b49ad/html5/thumbnails/59.jpg)
Exercising the mixins
Output from DrivingMixin
Output from PilostingMixin