3. Introduction
● Original created and used in Netscape.
● A prototype based scripting language.
● Was formalized in the ECMAScript
language standard.
● Using commonly in web, and also for
other server side/desktop applications.
● JavaScript™ is a registered trademark of
Oracle corporation.
4. Basic concepts of Javascript
● Variable scope
● What is this?
● Closure
● Prototype
5. Variable scope
Global Local
● Declared outside functions. ● Declared inside function
● Can be accessed everywhere. ● Can be accessed only inside the
function.
6. What is this?
All javascript code is executed in an execution context.
● Global code runs in Global execution context.
● Invocation of a function runs in a associated execution
context.
this = object for getting the current execution context.
7. Closure
When you return a function => you're creating a closure.
A closure is a special object that combines two things:
● Function
● Binding local variables at the time that the function was
created.
8. Closure example-1
function add(x) {
return function(y) {
return x + y;
};
}
var add5 = add(5);
var result = add5(3);
console.log(result);
Guess the result?
11. Prototype
● A object is used as pattern to create other objects.
● When a function A is created:
○ Function A contains "prototype property" that
associated to A.prototype object.
○ The A.prototype object contains a "constructor
property" that links back to A function.
13. Prototype
function People() {
}
var steve = new People()
People.prototype object is
used as reference for
method look up and
construct the new object.
14. OOP in Javascript
● Private, public, privilege
● Inheritance
● Modularization with namespace
15. Private
Private variable Private function
function People() { function People() {
var name; //declaration-w1
var sayHello = function()
} {
...
}
//declaration-w2
function sayHello() {
...
}
}
Private function can access to private
variable or global variable only
16. Public
Public variable Public function
function People() { function People() {
this.name = null;
}
}
People.prototype.sayHi = function() {
...
}
Public functions cannot access to
private variables/functions.
17. Privilege functions
Declaration Usage
function People() { ● To introduce private
this.sayHi = function() variable/functions to public function.
{
...
}
}
18. Private-public-privilege access matrix
Private func Privilege func Public func
Private var/func YES YES NO
Public var/func NO YES YES
Privilege func NO YES YES
19. Javascript inheritance
function People() {
}
function Woman() {
}
//Make Woman inherits from People
Woman.prototype = new People();
Woman.prototype.constructor = Woman;
21. Javascript inheritance - call super method
function People() {
}
People.prototype.sayHi = function() {
...
}
function Woman() {
}
Woman.prototype = new People();
Woman.prototype.constructor = Woman;
Woman.prototype.sayHi = function() {
People.prototype.sayHi.call(this);
...
}
22. Methods look up in the prototype chain
1. An object's methods (like all properties) are found by
walking up the object's prototype chain.
2. The entries in the prototype chain are references to ordinary
objects.
3. Object.create() or the new operator creates objects with
a prototype chain.
23. Modularization with namespace
Namespace helps you organize your code better and limits bugs
caused by "name violation".
pyco = pyco || {};
pyco.app = pyco.app || {}
=> you have namespace: pyco.app
Now add functions to your pyco.app namespace:
pyco.app.Menu = new function() {
...
}
...
