so you want to be frontend engineer- js
Object Oriented JavaScript
WHO Is THis Guy?
Amit Jain
Front-end engineer, CSS, HTML , JavaScript junkie and web lover. Senior UI developer @ iXiGO.com
What I’m going to talk about
- How javascript objects work
- The language features involved
- Cover some of the interesting advanced features that make objects in javascript possible
- Object-Oriented Basics
- Inheritance
Please ask questions
- If anything isn’t clear
- If you want to know more about something
- If I don’t know I can find out for you :)
The Flexibility of JavaScript
One of the most powerful features of the language is its flexibility. As a JavaScript programmer, you can make your programs as simple or as complex as you wish them to be
A Loosely Typed Language
Depending on what data it contains, variable can have one of several types.
Inspecting object type:
- typeof: Works for built in types
string, number, bool, function, object, undefined
- instanceof : Comparing an object to a constructor function
-
constructor property
cont.
var a = 5, b = a;
b = 7;
console.log(a,b);
var a = {val:5}, b = a;
b.val = 7;
console.log(a.val,b.val);
cont.
Primitive data types are passed by value, while all other data types are passed by reference.
Functions As First-Class Objects
- functions are first-class objects: They can be stored in variables, passed into other functions as arguments, passed out of functions as return values, and constructed at run-time.
- You can do everything with a function that you could do with a regular object.
- Methods are just properties that happen to be a function
Language Features
References
A reference is a pointer to an actual location of an object.
var obj = new Object();
var objRef = obj;
obj.oneProperty = true;
obj.oneProperty === objRef.oneProperty
References only point to the final referred object, not a reference itself.
var items = new Array( "one", "two", "three");
var itemsRef = items;
items.push( "four" );
items.length == itemsRef.length
It traverses down the reference chain and only points to the core object.
Scope
In JavaScript, scope is kept within functions, but not within blocks.
var foo = "test"; // global scope
if ( true ) { var foo = "new test"; }
alert( foo == "new test" );
function test() {
var foo = "old test"; }
test(); alert( foo == "new test" );
function test() { foo = "test2"; }
// Call the function to set the value of foo
test(); alert( window.foo == "test2" );
Closures
- Closures are means through which inner functions can refer to the variables present in their outer enclosing function after their parent functions have already terminated.
- Closures are created when a function that’s nested inside another function accesses a variable from its parent’s scope. This is really useful for passing state around your application when the inner function is called after the outer function has exited
var baz;
(function() { var foo = 10; var bar = 2; baz = function() {
return foo * bar; };
})();
baz();
// baz can access foo and bar, even though it is executed outside of the function
Closures- example
function foo() { var a= 10;
function bar() { a*= 2; return a; }
return bar; }
var baz = foo(); // baz is now a reference to function bar.
baz(); // returns 20.
baz(); // returns 40.
baz(); // returns 80.
var blat = foo(); // blat is another reference to bar.
blat(); // returns 20, because anew copy of a foo is being used.
JavaScript is lexically scoped. Functions run in the scope they are defined in (in this case, the scope within foo), rather than the scope they are executed in.
As long as bar is defined within foo, it has access to all of foo’s variables, even if foo is finished executing
Context
-
context - an object within which code is operating.
-
The context of a function is the value of its ‘this’ property.
-
The way context works is through the ‘this’ variable. The ‘this’ variable will always refer to the object that the code is currently inside of.
-
All functions have a reference to this.
It will be set to the global context (the window) if no other context is set.
The context of a function can be explicitly set using function.apply() and function.call()
Anonymous functions
Anonymous functions are functions that are dynamically declared at runtime that don’t have to be given a name.
( function eatCake(){
alert("So delicious and moist");
} )();
Use:
-
Pass logic to another function, Declaring single use functions
-
Provides scope for variables
Object-Oriented Basics
Object Creation
- In JavaScript, objects can create new objects, and objects can inherit from other objects.
- There are two ways to create a JavaScript object: Constructor functions and Literal notation.
var ixigo = new Object();
ixigo.name = "ixigo";
ixigo.species = “travel";
ixigo.hello = function() { alert(“fly high"); }
Constructor functions
- There’s nothing that makes a constructor function different from a regular javascript function. It’s just an ordinary function that has the logic needed to create a new object instead of regular program logic.
- You can use a constructor function to automatically make the object for you.
function Pet(name, species, hello){ this.name = name; this.species = species; this.hello = hello; this.sayHello = function() { alert(this.hello);} }
Cont..
- It’s invoked with the new keyword
- It’s passed a reference to an empty object (this) which you need to instantiate
- Automatically returns the newly instantiated object
var rufus = new Pet("Rufus", "cat", "miaow");
rufus.sayHello();
- Objects maintain a link to the function that created them.
alert(rufus.constructor.toString());
- Constructor functions aren’t classes.
- All a constructor function gives you is an object that has been instantiated in a particular way
Object prototype
- In class based languages there is a separation between objects and classes
- javascript is prototype based language, the javascript object prototype is javascript’s way of sharing implementation across similar objects
- Prototype based language objects are created by adding properties to an empty object or by cloning an existing one.
Implementation is shared using the prototype property of the constructor function
Cont…
- Prototypes are implemented in javascript using the prototype property of constructor functions. Any property or method that’s added to the constructor’s prototype automatically becomes part of every object created by that function.
function Pet(name, species, hello){
this.name = name;
this.species = species;
this.hello = hello; }
Pet.prototype.sayHello = function() { alert(this.hello); }
var rufus = new Pet("Rufus", "cat", "miaow");
rufus.sayHello();
Cont...
-
When a new function is created the prototype property is set to an empty object, exactly the same if we said Pet.prototype = new Object() when we created the function. Javascript does this by default whenever you create a new function to make sure that any objects created by calling the function will automatically get all of the methods and properties that are belong to every Object (like toString()).
prototype chaining: inheritance
- Prototype chaining is used to build new types of objects based on existing ones. It has a very similar job to inheritance in a class based language.
function Person( name ) { this.name = name; }
Person.prototype.getName = function() { return this.name; };
function User( name, password ) {
// Notice that this does not support graceful overloading/inheritance
// e.g. being able to call the super class constructor
this.name = name; this.password = password;
};
// The User object inherits all of the Person object's methods
User.prototype = new Person();
User.prototype.getPassword = function() {
return this.password; };
Cont...
function Person( name ) { this.name = name; }
Person.prototype.getName = function() { return this.name; };
function User( name, password ) {
Person.call(this, name); // Call the superclass's constructor in the scope of this.
this.password = password;
};
// The User object inherits all of the Person object's methods
User.prototype = new Person();
User.prototype.constructor = User; // Set the constructor attribute to User
User.prototype.getPassword = function() {
return this.password;
};
What we have learnt
- How to build simple objects
- Functions are first class objects
- Object context
- Object type
- Closures
- Anonymous functions
- Constructor functions
- Object prototype and prototype chaining
yehhhhhh
Thank You.
DO I NEED A HELMET ?
Questions & Answers!
so you want to be frontend engineer- js Object Oriented JavaScript
so you want to be frontend engineer js
By Amit Jain
so you want to be frontend engineer js
- 819