advanced Javascript

37
ADVANCED JAVASCRIPT

description

advanced Javascript. Operators. == Test for equality === Test for identity != and !=== N umbers , strings, and boolean values are compared by value Objects, arrays, and functions are compared by reference. Variables. - PowerPoint PPT Presentation

Transcript of advanced Javascript

Page 1: advanced  Javascript

ADVANCED JAVASCRIPT

Page 2: advanced  Javascript

Operators

== Test for equality === Test for identity != and !=== Numbers, strings, and boolean values are

compared by value Objects, arrays, and functions are

compared by reference

Page 3: advanced  Javascript

Variables No Block Scope. All variables declared in

a function, no matter where they are declared, are defined throughout the function

Undefined Versus Unassigned

Page 4: advanced  Javascript

Call ObjectIf global variables are properties of the special

global object, then what are local variables? They too are properties of an object. This object is known as the call object. The call object has a shorter lifespan than the global object, but it serves the same purpose. While the body of a function is executing, the function arguments and local variables are stored as properties of this call object. The use of an entirely separate object for local variables is what allows JavaScript to keep local variables from overwriting the value of global variables with the same name.

Page 5: advanced  Javascript

Call ObjectThe var statement defines each named

variable by creating a property with that name either in the call object of the enclosing function or, if the declaration does not appear within a function body, in the global object.

Page 6: advanced  Javascript

JavaScript Execution Contexts

Every JavaScript function runs in its own unique execution context with its own call object in which local variables are defined

Page 7: advanced  Javascript

No Block Scope

Page 8: advanced  Javascript

Variables as Properties Variables in JavaScript are fundamentally

the same as object properties You can use the JavaScript keyword this

to refer to the global object. Within functions, this has a different use

In client-side JavaScript, the Window object serves as the global object for all JavaScript code contained in the browser window it represents

Page 9: advanced  Javascript

scope chain

Page 10: advanced  Javascript

FuncitonAn important feature of JavaScript is that

functions are values that can be manipulated by JavaScript code. In many languages, including Java, functions are only a syntactic feature of the language: they can be defined and invoked, but they are not data types. The fact that functions are true values in JavaScript gives a lot of flexibility to the language. It means that functions can be stored in variables, arrays, and objects, and it means that functions can be passed as arguments to other functions.

Page 11: advanced  Javascript

for … in … The for/in loop does not actually loop through all

possible properties of all objects. In the same way that some object properties are flagged to be read-only or permanent (nondeletable), certain properties are flagged to be nonenumerable. These properties are not enumerated by the for/in loop. While all user-defined properties are enumerated, many built-in properties, including all built-in methods, are not enumerated. Objects can inherit properties from other objects. Inherited properties that are user-defined are also enumerated by the for/in loop.

Page 12: advanced  Javascript

function Since JavaScript is a loosely typed language, you are

not expected to specify a datatype for function parameters, and JavaScript does not check whether you have passed the type of data that the function expects. If the datatype of an argument is important, you can test it yourself with the typeof operator. JavaScript does not check whether you have passed the correct number of arguments either. If you pass more arguments than the function expects, the function ignores the extra argumetns. If you pass fewer than expected, the parameters you omit are given the undefined value. Some functions are written to tolerate omitted arguments, and others behave incorrectly if you don't pass all the arguments they expect.

Page 13: advanced  Javascript

Function Call OperatorThe ( ) operator is used to invoke functions in

JavaScript. This is an unusual operator because it does not have a fixed number of operands. The first operand is always the name of a function or an expression that refers to a function. It is followed by the left parenthesis and any number of additional operands, which may be arbitrary expressions, each separated from the next with a comma. The right parenthesis follows the final operand. The ( ) operator evaluates each of its operands and then invokes the function specified by the first operand, with the values of the remaining operands passed as arguments.

Page 14: advanced  Javascript

Nested FunctionFunction definitions usually appear in top-level

JavaScript code. They may also be nested within other function definitions, but only at the "top level" of those functionsthat is, function definitions may not appear within if statements, while loops, or any other statements.

Note that this restriction applies only to functions defined with the function statement. Function literal expressions, which are described in the next section, may appear anywhere.

Page 15: advanced  Javascript

functionthe function statement is not a statement. Statements

cause dynamic behavior in a JavaScript program, while function definitions describe the static structure of a program. Statements are executed at runtime, but functions are defined when JavaScript code is parsed, or compiled, before it is actually run. When the JavaScript parser encounters a function definition, it parses and stores (without executing) the statements that comprise the body of the function. Then it defines a property (in the call object if the function definition is nested in another function; otherwise, in the global object) with the same name as the function to hold the function.

Page 16: advanced  Javascript

function Although function literals create

unnamed functions, the syntax allows a function name to be optionally specified, which is useful when writing recursive functions that call themselves

var f = function fact(x) { if (x <= 1) return 1; else return x*fact(x-1); };

Page 17: advanced  Javascript

function When the JavaScript parser encounters a

function definition, it parses and stores (without executing) the statements that comprise the body of the function. Then it defines a property (in the call object if the function definition is nested in another function; otherwise, in the global object) with the same name as the function to hold the function.

Page 18: advanced  Javascript

return If a function executes a return statement

with no expression, or if it returns because it reaches the end of the function body, the value of the function-call expression is undefined.

Page 19: advanced  Javascript

Closure

What’s the output?function foo( ) {

var x = 10;return function bar( ) {

console.log(x);}

}var x=5;var barReference=foo();barReference();

The answer is 10

Page 20: advanced  Javascript

Closure A closure is a function that is evaluated in

an environment containing one or more bound variables. When called, the function can access these variables. The explicit use of closures is associated with functional programming

Page 21: advanced  Javascript

Closure In some languages, a closure may occur

when a function is defined within another function, and the inner function refers to local variables of the outer function. At runtime, when the outer function executes, a closure is formed, consisting of the inner function’s code and references to any variables of the outer function required by the closure

Page 22: advanced  Javascript

Closure A closure can be used to associate a function

with a set of "private" variables, which persist over several invocations of the function. The scope of the variable encompasses only the closed-over function, so it cannot be accessed from other program code. However, the variable is of indefinite extent, so a value established in one invocation remains available in the next. As a consequence, closures can be used to hide state, and thus to implement object-oriented programming.

Page 23: advanced  Javascript

Context

Context

Page 24: advanced  Javascript

Anonymous functionWhy//Variable i is undefined.for (var i=0; i < 10; i++) {//do some stuff with i}console.log(i); // ???ReasonA subtle but important characteristic of JavaScript is that it does

not support the concept of blocked scope outside of functions, and for this reason, the values of i and any other “temporary” variables defined during iteration, conditional logic, etc., live on long after the block executes.

Page 25: advanced  Javascript

Lexical Scoping Functions in JavaScript are lexically rather than

dynamically scoped. This means that they run in the scope in which they are defined, not the scope from which they are executed. When a function is defined, the current scope chain is saved and becomes part of the internal state of the function. At the top level, the scope chain simply consists of the global object, and lexical scoping is not particularly relevant. When you define a nested function, however, the scope chain includes the containing function. This means that nested functions can access all of the arguments and local variables of the containing function.

Page 26: advanced  Javascript

ObjectAn object literal is a comma-separated list of

property name/value pairs, enclosed within curly braces.

var empty = {}; // An object with no propertiesvar point = { x:0, y:0 }; var circle = { x:point.x, y:point.y+1, radius:2 };

The Object() constructor creates an empty object, just as the literal {} does

Page 27: advanced  Javascript

Object the for/in loop does not enumerate

properties in any specific order, and although it enumerates all user-defined properties, it does not enumerate certain predefined properties or methods.

Page 28: advanced  Javascript

Object Objects in JavaScript can serve as

associative arrays; that is, they can associate arbitrary data values with arbitrary strings. When an object is used in this way, a different syntax is generally required to access the object's properties: a string containing the name of the desired property is enclosed within square brackets.

Page 29: advanced  Javascript

Object Objects as Associative Arrays object.property object["property"]

Page 30: advanced  Javascript

Object constructor Property toString() Method toLocaleString() Method valueOf() Method hasOwnProperty() Method propertyIsEnumerable() Method isPrototypeOf() Method

Page 31: advanced  Javascript

Object constructor Every object has a constructor property that

refers to the constructor function that initializes the object

Page 32: advanced  Javascript

this 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

Page 33: advanced  Javascript

global global objects are actually properties of

the window object

Page 34: advanced  Javascript

prototype an object prototype is just an object, you

can attach new properties to them, just like any other object.

Page 35: advanced  Javascript

Private Method

Page 36: advanced  Javascript

Recommended Books

Page 37: advanced  Javascript

Resources http://www.ibm.com/developerworks/cn/

linux/l-cn-closure/index.html