OOP part 1. Object-Oriented JavaScript презентация

assigned to variables
Functions can be passed as arguments to other functions

alert( “Refresh” ); }, 1000 );
// Using a function as a variable var myFunc = function () { alert( “Refresh” ); }; setTimeout(myFunc, 1000); // Or myFunc();

variables are within the global scope unless they are defined within a function.
All global variables actually become properties of the window object
When variables are not declared using the var keyword, they decared globally.

variable
if ( true ) { foo = “new”; // Global foo now equals “new” }
// create function to modify its own foo variable function test () { var foo = “old”; }
test(); alert( foo == “new” ); // Global foo still equals “new”

value within a function—even if it’s only used within the function—the value will be defined globally.
var foo = “new”; alert( foo == “new” );
// Omitting the var keyword reverts scope // of foo to global level function badTest () { foo = “bad news”; }
badTest(); // Global foo now equals “bad news” alert( foo == “bad news” );

access to the outer function’s variables and parameters.
function getRandomInt(max) { var randNum = Math.random() * max; function ceil() { return Math.ceil(randNum); } return ceil(); // Notice that no arguments are passed } // Alert random number between 1 and 5 alert(getRandomInt(5));

was called—even after the parent function has terminated.
This allows you to effectively pass variables to functions that may not be called for some time.

setTimeout( function () { // Use message variable passed to outer function alert(message); }, delay); }

// Display a message with a 5 second delay delayedAlert(“Refresh”, 5000);

object
Context is maintained through the use of the this variable.
function increment() { this.x = this.x || 0; return this.x++; };
alert( increment() == 0 );
alert( increment() == 1 );

newVal; } };
alert( myObject.val == null ); // val property not set yet
myObject.set(“Refresh”); alert( myObject.val == “Refresh” ); // val equals “Refresh”
// Change the context of set() to the window object window.set = myObject.set; window.set( “Refresh Jacksonville” );
alert( myObject.val == “Refresh” );
alert( window.val == “Refresh Jacksonville” );

within the context of another function:
call( )
apply( )

function to change the color style of a node function changeColor (newColor) { this.style.color = newColor; }
// window.changeColor has no style property, so call fails changeColor( “red” );
// Grab the DOM node with the id “required” var reqField = document.getElementById( “required” );
// Call changeColor() within reqField’s context changeColor.call( reqField, “red” );

Simple function to change the color style of a node function changeColor (newColor) { this.style.color = newColor; }
// Set the text color of the body element function setBodyTextColor () { changeColor.apply( document.body, arguments ); }
setBodyTextColor( “black” );

more classical view of OOP in JavaScript:
Constructors
Object Methods
Public
Private
Privileged

though of as a collection of properties—much like a hash in other languages

JavaScript doesn’t have a concept of classes like other object-oriented languages
Classes are simulated using a concept called prototypal inheritance

instances of objects.

// Create User object constructor function User ( name ) { this.name = name; }

// Create a new instance of a User var me = new User(“Bob”);

// Alert new user’s name alert( me.name == “Bob” );
// Cannot call User directly alert( User.name == undefined ); // window.name is undefined

be freely reference by code outside your object—is to attach it to the object’s prototype.

An object’s prototype is a special property that acts as a base reference of your object.

This prototype object is copied and applied to all new instances of your object.

= function (name) { this.name = name; }
// Add a public accessor method for name User.prototype.getName = function () { return this.name; }

var me = new User( “Bob” );

alert( me.getName() == “Bob” );

inside your object and cannot be accessed by external code.

function (name) { this.name = name; function welcome () { alert( “Welcome back, ” + this.name + “.”); } welcome(); }
// Create a new User var me = new User( “Bob” ); // Alerts: “Welcome, Bob.”

// Fails because welcome is not a public method me.welcome();

is not a formal construct, but rather a technique.

Privileged methods essentially have one foot in the door:
Then can access private methods and values within the object
They are also publicly accessible

function (name, age) { var year = (new Date()).getFullYear() – age; this.getYearBorn = function () { return year; }; };
// Create a new User var me = new User( “Bob”, 28 );
// Access privileged method to access private year value alert( me.getYearBorn() == 1980 );
// Fails because year is private alert( me.year == null );