Advanced javascript
This presentation is the property of its rightful owner.
Sponsored Links
1 / 37

advanced Javascript PowerPoint PPT Presentation


  • 70 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

advanced Javascript

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Advanced javascript

advanced Javascript


Operators

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


Variables

Variables

  • No Block Scope. All variables declared in a function, no matter where they are declared, are defined throughout the function

  • Undefined Versus Unassigned


Call object

Call Object

If 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.


Call object1

Call Object

The 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.


Javascript execution contexts

JavaScript Execution Contexts

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


No block scope

No Block Scope


Variables as properties

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


Scope chain

scope chain


Funciton

Funciton

An 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.


For in

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.


Function

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.


Function call operator

Function Call Operator

The ( ) 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.


Nested function

Nested Function

Function 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.


Function1

function

the 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.


Function2

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); };


Function3

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.


Return

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.


Closure

Closure

What’s the output?

function foo( ) {

var x = 10;

return function bar( ) {

console.log(x);

}

}

var x=5;

varbarReference=foo();

barReference();

The answer is 10


Closure1

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


Closure2

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


Closure3

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.


Context

Context

Context


Anonymous function

Anonymous function

Why

//Variable i is undefined.

for (var i=0; i < 10; i++) {

//do some stuff with i

}

console.log(i); // ???

Reason

A 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.


Lexical scoping

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.


Object

Object

An object literal is a comma-separated list of property name/value pairs, enclosed within curly braces.

var empty = {}; // An object with no properties

var 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


Object1

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.


Object2

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.


Object3

Object

  • Objects as Associative Arrays

  • object.property

  • object["property"]


Object4

Object

  • constructor Property

  • toString() Method

  • toLocaleString() Method

  • valueOf() Method

  • hasOwnProperty() Method

  • propertyIsEnumerable() Method

  • isPrototypeOf() Method


Object constructor

Object constructor

Every object has a constructor property that refers to the constructor function that initializes the object


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


Global

global

  • global objects are actually properties of the window object


Prototype

prototype

  • an object prototype is just an object, you can attach new properties to them, just like any other object.


Private method

Private Method


Recommended books

Recommended Books


Resources

Resources

  • http://www.ibm.com/developerworks/cn/linux/l-cn-closure/index.html


  • Login