JavaScript Basics-Scopes and closures

Scopes and closures

Q:1. Explain the understanding of variable promotion

2. Description of this several different usage scenarios
3. Create 10 <a> tags, pop up the corresponding serial number when clicked

var i;  for (i = 0; i < i++) {  (function(i)    {var a = document.createelement (' a ') );     = i + ' <br> ';    A.addeventlistener (function(e) {        e.preventdefault ();        alert (i);    });    Document.body.appendChild (a)  }) (i)  }    

4. How to understand Scopes
5. Application of closures in real development

//closure applications are mainly used for encapsulating variables, convergent permissionsfunctionisfirstload () {var_list = []; return function(ID) {if(_list.indexof (ID) >=0 ) {       return false; } Else{_list.push (ID); return true    }  }    }//UsevarFirstload =isfirstload (); Firstload (10);//trueFirstload (10);//falseFirstload (20);//true

(1), execution context

Range: A <script> or a function
Global: variable definition, function declaration
Functions: Variable definition, function declaration, this, arguments

Declaration in advance

Not recommended, just a presentation statement in advance
Console.log (a); // undefined var a = +; FN (' Zhang San '); // Zhang 320 function FN (name) {  =-  console.log (name,age);   var Age      }

(2), this

This is to be confirmed by the executive, the definition is not confirmed

1 varA = {2Name: ' A ',3Fn:function(){4Console.log ( This. Name);5     }6 };7A.fn ();//This===a8A.fn.call ({name: ' B '});//this==={name: ' B '}9 varFN1 =A.fn;TenFN1 ();//This===window

This refers to different objects in different cases.

A, execute as a constructor

function Foo (name) {  this. Name= name;    Console.log ()}varnew Foo (' xiaoming '); F (); //

B. Execute As object property

var obj = {      ' A ',      function() {        Console.log (this . Name)          }        } Obj.printname (); // This==>obj

C, execute as normal function

function fn () {  Console.log (this)  }fn (); // This===>window

D, call, apply, bind

function fn1 (name) {  alert (name)  Console.log (this);        } Fn1.call ({x:100}, ' xiaoming ');//This refers to {x:100}

(3), scope

JavaScript does not have block-level scopes

if (true) {  var name = ' Xiaoming ';  }console.log (name); // Xiao Ming

Functions and global scopes

// functions and global scopes var a = +; function fn () {  var a = $;  Console.log (' fn ', a);        } Console.log (' global ', a); // fn (); //  $

(4), scope chain

// functions and global scopes var a = +; function fn () {  var b = $;     // the current scope has no defined variables, free variables   Console.log (a);  Console.log (b)}fn ();

var a=100function  F1 () {    var b=200    function  F2 () {         var c=300        //A is a free variable that is not found in F2 to the parent scope F1 find, still not found, continue to look up, found in window         //B is free variable         console.log (c)    }    //100 200 300

调用在当前作用域不存在的变量，便会向父级作用域查找。需要注意的是，父级作用域是函数定义时产生的，并非函数调用时

(5), closures

function F1 () {  var a = +;   return function () {    console.log (a);//   free variable, parent scope search              }    }  var f = F1 (); var a =n; f (); //  -

(1) function as return value

function F1 () {  var a = +;   return function () {    console.log (a);//   free variable, parent scope search              }    }  var f = F1 ();

(2) function as a parameter to pass

function F2 (FN) {  var a = $;  fn ()              }f2 (F1)

JavaScript Basics-Scopes and closures