Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Scope in ES3 world. (Lecture 3)

Содержание

Examplevar a = 2;var b = 2;console.log(a + b);
Lecture III Examplevar a = 2;var b = 2;console.log(a + b); Recap of the previous lecture Scope in ES3 World The Scope of a VariableThe scope of a variable are the locations Scope - is a logical boundaries in which a variable (or expression) Scope - is a logical boundaries in which a variable (or expression) Scope can be nested function f() {  var x = 2; Nested Scopefunction f() {  var x = 2;   function Shadowingvar scope = Shadowingvar scope = Shadowingvar scope = function X() {	var a = 3, b = 5;	function foo () {		var HoistingJavaScript hoists all variable declarations, it moves them to the beginning of their direct scopes.  Hoistingfoo(); // undefined ( Hoistingvar scope = function test(o) {    var i = 0; var foo = 1;function bar() {	if (!foo) {		var foo = 10;	}	alert(foo);}bar();Hoisting Code in global scope  Untitled Pagevar a = 5;var b = Global namespaceEvery variable is global unless it's in a function and is Global object (WAT)function f(){   x = “global variable”; // var window vs global(function (glob) { 	// glob points to global object }(typeof Global variables are evilThey are less robust, behave less predictably, and are Globals// antipatternfunction sum(x, y) {// implied globalresult = x + y;return result;}// if (( Working with globalwindow.fooif (window.foo) { … }if (“foo” in window) { … Namespacesif (window.myNamespace == null){	window.myNamespace = {}; 	}window.myNamespace.myFunction = function(/* params*/ ) {	/* code here */ }; immediately invoked function expression in next lecture REFERENCES JavaScript: The Definitive Guide, Six Editionby David Flanagan Speaking JavaScript: An
Слайды презентации

Слайд 2


Слайд 5 Example
var a = 2;
var b = 2;
console.log(a +

Examplevar a = 2;var b = 2;console.log(a + b);

Слайд 6 Recap of the previous lecture

Recap of the previous lecture

Слайд 7 Scope in ES3 World

Scope in ES3 World

Слайд 8 The Scope of a Variable
The scope of a

The Scope of a VariableThe scope of a variable are the

variable are the locations
where it is accessible.

For

example:

function foo() {
var x;
}

Слайд 9
Scope - is a logical boundaries in which

Scope - is a logical boundaries in which a variable (or

a variable (or expression) has its meaning. For example,

a global variable, a local variable, etc, which generally reflects a logical range of a variable lifetime.

Слайд 10
Scope - is a logical boundaries in which

Scope - is a logical boundaries in which a variable (or

a variable (or expression) has its meaning.
For example,

a global variable, a local variable, etc, which generally reflects a logical range of a variable lifetime.


Слайд 11 Scope can be nested
function f() {

Scope can be nested function f() { var x = 2;

var x = 2;
function g() {

var y = 3;
alert(x + y);
}
}

Слайд 12 Nested Scope
function f() {
var x =

Nested Scopefunction f() { var x = 2;  function g()

2;
function g() {

var y = 3;
alert(x + y);
}
}


inner scope


outer scope


Слайд 13 Shadowing
var scope = "global ";

Shadowingvar scope =

// A global variable
function outer() {
var scope =

“outer”; // A outer variable
function inner() {
var scope = “inner";
document.write(scope); // Prints "inner"
}
inner();
}
outer();

Слайд 14 Shadowing
var scope = "global ";

Shadowingvar scope =

// A global variable
function outer() {
var scope =

“outer”; // A outer variable
function inner() {
document.write(scope); // Prints "outer"
}
inner();
}
outer();

Слайд 15 Shadowing
var scope = "global ";

Shadowingvar scope =

// A global variable
function outer() {
function inner() {
document.write(scope);

// Prints "global"
}
inner();
}
outer();

Слайд 16 function X() {
var a = 3, b =

function X() {	var a = 3, b = 5;	function foo ()

5;
function foo () {
var b = 7, c =

11;
a += b + c;
};
foo();
alert("a = " + a + "; b = " + b);
}
X();

var x = function(){
alert(x.toString());
}
x();


Слайд 17 Hoisting
JavaScript hoists all variable declarations, it moves them to the

HoistingJavaScript hoists all variable declarations, it moves them to the beginning of their direct scopes. 

beginning of their direct scopes. 


Слайд 18 Hoisting
foo(); // undefined ("foo" and "bar" exist)

function foo()

Hoistingfoo(); // undefined (

{
alert(bar);
}

var bar;
function foo() {
alert(bar);
}

var bar;


foo();

// undefined



Слайд 19 Hoisting
var scope = "global ";
function f( ) {

Hoistingvar scope =


alert(scope);
var scope = "local";
alert(scope);
}
f( );
var scope

= "global ";
function f( ) {
var scope;
alert(scope);
scope = "local";
alert(scope);
}
f( );

Слайд 20 Only functions introduce new scopes
No block scope
function f()

Only functions introduce new scopesNo block scopefunction f() {  {

{
{ // block starts

var foo = 4;
} // block ends
console.log(foo); // 4
}

Слайд 21 function test(o) {
var i

function test(o) {  var i = 0;  // i

= 0; // i is defined

throughout function
if (typeof o == "object") {
var j = 0; // j is defined everywhere, not just block

for(var k=0; k < 10; k++) { // k is defined everywhere, not just loop
document.write(k);
}

document.write(k); // k is still defined: prints 10
}
document.write(j); // j is defined, but may not be initialized
}

No block scope!


Слайд 22 var foo = 1;

function bar() {
if (!foo) {
var

var foo = 1;function bar() {	if (!foo) {		var foo = 10;	}	alert(foo);}bar();Hoisting

foo = 10;
}
alert(foo);
}

bar();
Hoisting


Слайд 23 Code in global scope



Untitled Page

Code in global scope Untitled Pagevar a = 5;var b =

type="text/javascript" src="/script.js">




var a = 5;
var b = 2;

function

sum(x, y) {
return x + y;
}

function mul(x, y) {
return x * y;
}



Index.html


Слайд 24 Global namespace


Every variable is global unless it's in

Global namespaceEvery variable is global unless it's in a function and

a function and is declared with var
function f(){

x = “global variable”;
}
f();

Слайд 25 Global object (WAT)
function f(){
x =

Global object (WAT)function f(){  x = “global variable”; // var

“global variable”; // var is missed
}
f();
this.x === “global variable”;
window.x

=== “global variable”; // true for browsers

Слайд 26 window vs global
(function (glob) {
// glob points

window vs global(function (glob) { 	// glob points to global object

to global object
}(typeof window !== 'undefined' ? window

: global));

Слайд 27 Global variables are evil
They are less robust, behave

Global variables are evilThey are less robust, behave less predictably, and

less predictably, and are less reusable.
Name clashes. Your code,

built-ins, analytics code, social media buttons use the same global scope.

Слайд 28 Globals
// antipattern
function sum(x, y) {
// implied global
result =

Globals// antipatternfunction sum(x, y) {// implied globalresult = x + y;return

x + y;
return result;
}


// antipattern
function foo() {
var a =

b = 0;
// ...
}

// preferred
function foo() {
var a, b;
// ...
a = b = 0; // both local
}

Слайд 29
if (("a" in window) == false) {

if ((

var a = 1;
}
alert(a);


Слайд 30 Working with global
window.foo

if (window.foo) { … }
if (“foo”

Working with globalwindow.fooif (window.foo) { … }if (“foo” in window) {

in window) { … }
if (typeof “foo” !== “undefined”)

{ … }





Слайд 31 Namespaces


if (window.myNamespace == null){
window.myNamespace = {};
}

window.myNamespace.myFunction =

Namespacesif (window.myNamespace == null){	window.myNamespace = {}; 	}window.myNamespace.myFunction = function(/* params*/ ) {	/* code here */ };

function(/* params*/ ) {
/* code here */
};


Слайд 32 immediately invoked function expression in next lecture

immediately invoked function expression in next lecture

  • Имя файла: scope-in-es3-world-lecture-3.pptx
  • Количество просмотров: 69
  • Количество скачиваний: 0
- Предыдущая Букингемский дворец
Следующая - Хирургический шов