Moment For Technology

Chapter 9 JS---- From the Beginning to the Skilled Little White road (continuously updated....)

Posted on June 23, 2022, 12:11 p.m. by Danielle Bowman
Category: The front end Tag: javascript The front end

First, scope

Definition: The range accessible to a variable

Partition: global scope and private scope

Private scope: variables in a private scope can be accessed only in the private scope, not globally, but privately.

Variables are divided into global variables and private variables

Global variables: Variables defined globally

Private variables: Variables declared inside a function, and parameters are also private

Scope chain

Rule: 1, first look at private, then look at the parameter, find the stop; 2, private, then look at the parent scope, until found, no error;Copy the code
function(){
    console.log(a)
}
/ / an error
Copy the code
function(){
    a=100;
    console.log(a)/ / 100
}

// Add an A attribute to the global object (GO) with a value of 100
// In the global context, use a variable, first see if it is in VO(G), if not, continue to see if it is in GO, if not, undefined error
Copy the code
var a = 13;
let b = 14;
const c = 15;
d = 16; //window.d=16
console.log(a, window.a); / / 13 13
console.log(b, window.b); //14 undefined
console.log(x); //Uncaught ReferenceError: x is not defined
console.log(window.x); //undefined
Copy the code

Picture analysis:

[(GO:Global Object): Global Object] [(GO:Global Object): Global Object] [(GO:Global Object): Global Object]] VO is an object that stores global variables in the ECg context. VO is an object that stores global variables in the private context. Var and function are added directly to GO (a=10). Let and const are added to Vo (a=10)Copy the code

3. Variable promotion

Rules:

Find var and function;

Var is only declared, not defined.

Function is both declared and defined;

Special case generalization of variable promotion

1. Under the judgment condition, regardless of whether the if internal condition is established, variable promotion will be carried out;

2. Function is declared and defined in older browsers. In newer browsers, function is declared and not defined;

3, in the judgment condition, once the condition is established; Function is a global function, and private function is a private function.

4. Self-calling functions will not promote variables;

5. Promote only the variables on the left side of the equal sign;

The invariant after return is promoted. The code below return is not executed but the variable is promoted

In variable promotion, the declaration is only once, but the assignment can be multiple times. So if the variable name is repeated, the variable will not be created the second time

Topic:

//------------------------------
console.log(a);//und
if (1= =2) {
  var a = 12;
};
console.log(a)//und


//------------------------------
console.log(fn);//und
if (1= =2) {
  function fn () {
    console.log("1")}};console.log(fn);//und


//------------------------------
console.log(a);//und
if (1= ="1") {
  console.log(a);//und
  var a = 2;
  console.log(a);/ / 2
}
console.log(a);/ / 2


//------------------------------
console.log(fn);//und
if(1= ="1") {console.log(fn);/ / the function body
    function(){};
    fn=3;
    console.log(fn);/ / 3
}
console.log(fn);/ / the function body

Copy the code

4. The difference between var and var

1. Variable promotion can be carried out with VAR, but not without var;

2, delete delete window.

Common: Add attributes to GO, available from window.a;

Let in ES6

2. The same scope cannot be declared repeatedly (there is lexical detection) 3. Es5, ES6 mixed use, the promotion promotion, not promotionCopy the code

Vi. Temporary dead zones in ES6:

    typeof a;/ / an error
    let a=100;//-------- The above space is a temporary dead zone and cannot be accessed until declared
Copy the code

It doesn't matter where the parent scope is called it doesn't matter where the parent scope is defined, okay

Seven, the memory release problem

Every time we store a value to a variable or perform a function, we use up memory. If this continues, over time, the computer will run out of space, so memory needs to be freed.

1) Heap memory release:

Common browser release methods are mainly the following two: Google Browser is marked, every once in a while will detect the following current scope of memory, is occupied, if not occupied, will be released. Internet Explorer, Firefox and other browsers use counting methods. If a space address is occupied once in the current scope, it will add one. If the space address is occupied once, it will decrease 1. Free heap: Set all variables that reference the heap to null. The heap address is no longer occupied. The browser will free the heap when it is freeCopy the code

2) Stack memory release:

  • Destruction: Global stack memory, which is released only when the page is closed

  • Destroy: The function is destroyed when it completes execution

  • Don't destroy:

    • A value in the current scope that refers to a datatype is not destroyed if it is occupied by an external variable
  • Do not destroy immediately (after the function is finished)

Eight, closures

Definition: when a function executes, a reference data type inside the function is occupied by an external variable. The undestroyed scope is called a closure

Function:

1, do not pollute global variables 2, the formation of non-destruction of scope, save private variablesCopy the code

Topic:

console.log(a);
var a=12;
function fn(){
   console.log(a);
   var a=13;
}
fn();
console.log(a);

// A, undefined 12, 13
// a
// C, undefined - undefined, 13
// D
Copy the code
console.log(a);
var a=12;
function fn(){
    console.log(a);
     a=13;
}
fn();
console.log(a);

// A, undefined 12, 13
// a
// C, undefined - undefined, 13
// D
Copy the code
console.log(a);
 a=12;
function fn(){
    console.log(a);
     a=13;
}
fn();
console.log(a);

// A, undefined 12, 13
// a
// C, undefined - undefined, 13
// D
Copy the code
var foo=1;
function bar(){
  if(! foo){var foo=10;
  }
  console.log(foo);
}
bar();

A 1
B 10
C undefinedD errorCopy the code
var n=0;
function a(){
    var n=10;
    function b(){
        n++;
        console.log(n);
    }
    b();
    return b;
}
var c=a();
c();
console.log(n);
Copy the code
var a=10,b=11,c=12;
function text(a){
  a=1;
  var b=2;
  c=3;
  
}
text(10);
console.log(a);
console.log(b);
console.log(c);

A 1 11 3
B 10 11 12
C 1 2 3
D 10 11 3
Copy the code
if(! ("a" in window)) {var a=1;
 
}
console.log(a);
A undefined
B 1CCopy the code
var a=4;
function b(x,y,a){
  console.log(a);
  arguments[2] =10;
  console.log(a);
}
a=b(1.2.3);
console.log(a)
Copy the code

``js var foo="hello"; (function(foo){ console.log(foo); var foo=foo||"word"; console.log(foo); })(foo); console.log(foo);

A hello hello hello B undefined world hello C hello world D

` ` ` js var ary = [1, 2, 3, 4]; function fn(ary){ ary[0]=0; ary=[0]; ary[0]=100; return ary; } var res=fn(ary); console.log(ary); console.log(res);Copy the code
   return function (n){
      console.log(n+(++i)); }}var f=fn(10);
f(20);
fn(20) (40);
fn(30) (50);
f(30);
Copy the code
function fn(){
   return function(n){
      console.log(n+(++i)); }}var f=fn();
f(20);
fn()(20);
fn()(30);
f(30);
Copy the code

Nine, this keyword

The execution body of the function, which means whoever executes the function, then the execution body is who. (Not context) This is very difficult to understand, but we will summarize a few rules for this, so that you can quickly and accurately find who this is.

1): In the global scope, this is the window

2): When executing a function, check whether it is preceded by a dot. If so, this is the same as the dot. If not, this is the window (in non-strict mode), in strict mode undefined

3): When an element is bound to an event, this in the execution body of the function is the bound element

4): This in self-executing function is window in non-strict mode, undefined in strict mode

5): This in the callback is window

6): Constructor this is an instance of the current class

7): You can change the direction of this by using bind, call, and apply

Topic:

var name="xiaohui";
function fn(){
   console.log(this.name)
}
var obj={
  name:Hello world..fn:fn
}
obj.fn();
fn();

(function(){
  this.fn(); }) ();Copy the code
let obj={
  name:"li".fn: (function(n){
       // this here
       console.log(this);
       return function(){
          // this here
          console.log(this);
       }
  })(10),
}
obj.fn();
Copy the code
var num=10;
var obj={num:20};
obj.fn=(function(num){
   this.num=num*3;
   num++;
   return function(n){
       this.num+=n;
       num++;
       console.log(num);
   }
})(obj.num);
var fn=obj.fn;
fn(5);
obj.fn(10);
console.log(num,obj.num)
Copy the code
Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.