Preinterpret the scope this

What data types do JavaScript have

1.1 Basic data types

Number, string, Boolean, null, undefined

1.2 Reference data types

Object: {}, [], /$/, Date function

2 Global scope (global/window)

When a browser loads an HTML page, it first provides an environment for global JSDIAM execution

var num = 12;
var obj = {name:"wjw".age:7);
function fn(){
	console.log("Don't forget what you started, and you'll always succeed.")}console.log(fn); // Put the entire function definition part (function itself output console)
console.log(fn()); // Return the result of the current function execution. (If there is no return, undefined is returned.)
Copy the code

3.1 Declaration (Declare)

var num ;
Copy the code

Tell the browser that there is a num variable in the global scope. If a variable is declared but not defined, it is undefined

num = 12 // Assign a value to our variable
Copy the code

3.3 var

It’s just an advance statement when it comes to pre-interpretation

fn(100.200);// It can be done above, because the declaration + definition is already done before the pre-interpretation

function fn(num1,num2){
	var total = num1 + num2;
  console.log(total);
}
Copy the code

3.5 Pre-explain only occurs under the current scope

For example, the function is preinterpreted only when the function is executing

4.1 stack memory

Used to provide an environment for JS execution -> scope (global scope, private)

5 How to distinguish private variables from global variables?

1. Variables declared (pre-interpreted) in a global scope are global variables
2. Variables declared in private scopes and function parameters are private variables

In a private scope, when we’re executing code and we encounter a variable, we first need to determine whether it’s currently a private variable, and if it’s a private variable, it doesn’t have anything to do with anything else out there; If it is not private, the search goes to the parent scope of the current scope. If there is no parent scope, the search continues until the window is found.

console.log(total); // undefined
var total = 0;
function fn(num1,num2){
	console.log(total); // total is not private
  var total = num1 + num2;// Global total=300
  console.log(total);/ / 300
}
fn(100.200);
console.log(total);/ / 300
Copy the code

7 closure

The function creates a new private scope to protect the inner private variable from external interference (cannot modify the private, private also cannot modify the outside

What is the relationship with and without var in the global scope?

Difference: Var can be interpreted before the assignment, so there is no error; Preinterprets cannot be performed without var, and an error will be reported in the preceding execution

console.log(num);//undefined
var num = 12;
console.log(num2); // Uncaught ReferenceError:num2 is no defined
num2 = 12;
Copy the code

Var num =12 -> First, it adds a global variable num to the scope, but it also adds an attribute 12 to the window

var num = 12;
console.log(num); / / 12
num2 = 12;
console.log(num2);// 12 window.num2
Copy the code

If a variable in a private scope is not private, it looks up the parent scope. If it is not, it looks up the parent scope until it finds the Window

funtciont fn(){
	console.log(total1); // Uncaught ReferenceError:num2 is no defined
  total = 100;
}
fn();
console.log(total1)
Copy the code

If no special processing is performed in the case of the above code error, the following code is not executed

console.log("name" in obj)
Copy the code

8.1 When pre-explaining, no matter whether your conditions are tenable or not, declare the VAR in advance

Var num – > window num

if(! ("num") in window) {// “num” in window ->true

    var num = 12

}
console.log(num) -> undefind
Copy the code

fn(); // undefined

var fn = function(){

    conslole.log("ok")

}

fun(); // ok

function fn(){
  console.log("ok")
}

fn(); // ok
Copy the code

8.3 The function defined by the execution function is not preinterpreted in the global context. When the current name is executed at this position, it is completed with the execution

Self-executing functions: defined and executed together

(function (params) ({})100);

~function (params) {},100);

+function (params) {},100);

-function (params) {},100);

!function (params) {},100);
Copy the code

function fn(){

    Var num;

    console.log(num); // ->undefined

    return function(){}; // -> Do not preinterpret

    var num = 100

}

fun();
Copy the code

8.5 If the name of a variable in JS is the same as the name of a function

Var fn; window.fn; fn-xxxfff000 window.fn-xxxfff00

var fn = 13;

function fn() {
 console.log("ok");
}
Copy the code

Var fn = xxxfff11; Fn = xxxFFF222 fn = xxxFFF22

fn(); / / - > 2

function fn() {console.log(1)}; / / - > 2

fn(); //  2

var fn = 10;

fn (); // Error terminates

function fn() {console.log(2)};

fn();
Copy the code

9.1 code

let num =12;
function fn() {
    var num = 120;
    return function () {
        console.log('= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =');
        console.log(num);
        console.log('= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ='); }}var f = fn(); 
f(); // Execute the first time
~function() {
    var num = 1200;
    f(); // Execute the second time} ()Copy the code

9.2 Running Results

F console.log(num) = f console.log(num); f console.log(num) = f console.log(num); f console.log(num) = f console.log(num); Fn’s private scope contains the variable num, so num 120 is output.

10 Self-executing anonymous functions

• Function (){/* code */})();
• Explanation: The first pair of parentheses enclosing the function(function(){/* code */}) returns an unnamed function to the script, followed by an empty pair of parentheses that immediately executes the returned unnamed function. The parentheses contain the parameters of the anonymous function.
• What it does: You can use it to create namespaces. As long as you write all your code inside this special function wrapper, the outside world can’t access it unless you allow it. The code for each JavaScript library is basically this way organized.

In summary, execution functions are mostly anonymous and automatic, and the code is already running when it is interpreted.

(function(){ /* code */} ()); !function(){ /* code */} (); ~function(){ /* code */} (); -function(){ /* code */} (); +function(){ /* code */} (); ~function(a) {

    console.log('= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =');

    console.log(a);

    console.log('= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = ='); } (10)
Copy the code

11.1 heap memory

Object data types or function data types are defined in the first heap memory, the heap memory has a reference to the address, if there is a variable outside the address, the outside said that the memory is occupied, can not be destroyed.

var obj1 = {name:"Zhang"};
var obj2 = obj1;
Copy the code

We want the heap to be freed/destroyed by setting all references to it to null. If the current heap is empty, the browser will destroy it as soon as possible.

obj1 = null;
obj2 = null;
Copy the code

11.2.1 Global scope

The global scope is destroyed only when the page is closed

11.2.2 Private scopes

Under normal circumstances, the function will create a new private scope, while private scope of code execution is completed, our current scope will be active to release and destruction But there is a special case: the current private scope of a part of the memory is occupied by a scope things outside, so the current scope will not be able to destroyed a. Function execution returns a value that refers to a datatype, and is received by something else outside of the function, so the private scope created is not destroyed

function fn(){
		var num = 100;
    return function(){
    	num++;
      console.log(num); }}var f = fn(); // the fn execution creates a private scope that cannot be destroyed
Copy the code

B. Event binding methods for DOM elements in a private scope. Normally, our private scope is not destroyed

var oDLv = document.getElementById('div1');
~function(){
	oDLv.onclick = function(){}} ()// The current self-executing function forms a private scope and is not destroyed
Copy the code

C. Do not destroy immediately ->fn returns a function that is not occupied by anything else, but needs to be executed once more, so it is not destroyed temporarily. When the returned value is completed, the browser will destroy it at idle time

function fn(){
	var num = 100;
  return function(){}}Copy the code

var i = 5;
console.log(1+i++);//6 i=6
console.log(1+(++i));//6 i=7
console.log(2+(i++)+(++i)+(++i)+(i++));/ / 38
console.log(i);/ / 9
Copy the code

function fn(){
	var i = 10;
  return function (n){
  	console.log(n+(++i)); }}var f = fn();
f(10);/ / 21
f(20);/ / 32
fn()(10);/ / 21
fn()(20);/ / 31
Copy the code

function fn(){
	var i = 10;
  return function (n){
  	console.log(n+(++i)); }}var f = fn(13);
f(12);/ / 25
f(24);/ / 28
fn(15) (12);/ / 27
fn(16) (13);/ / 29
Copy the code

13 This keyword

In JS, we mainly study this in the function. This in JS represents the main body of the current behavior, and context in JS represents the environment (region) of the current behavior. For example: Wu Jiawei eating egg fried cake in Shaxian county,this-> Wu Jiawei context-> Shaxian snacks

function(){this-> Wu Jiawei} Wu Jiawei. To eat (); ~function(){Wu Jiawei. To eat (); } ();Copy the code

Who this is has nothing to do with where the function is defined or executed: how do you distinguish this

1. If the function name is preceded by a “.”, and if so, who is this? If not, this is window

function fn(){
	console.log(this);
}
var obj ={
	fn:fn
};
fn(); // this->window
obj.fn();// this->obj

function sum(){
	fn();
}
sum();
Copy the code

2. This in self-executing functions is always window
3. A time-bound method for an element that, when triggered, executes the corresponding method, where this is the current element

<div id="div1">Dare me ~~</div>.<script>
document.getElementById("div1").onclick = fn;// this in fn is #div1
document.getElementById("div1").onclick = fucntion(){
	// this->#div1
  fn(); // this->window
}
</script>
Copy the code

14. Comprehensive exercises

var num = 20;
var obj = {
	num:30.fn: (function(num){
  		this.num *=3;
      num+=15;
      var num = 45;
      return function(){
      	this.num *=4;
        num+=20;
        console.log(num);
      }
  })(num) // The value 20 of global num is assigned to the parameter of the self-executing function, not 30 under obj. If we want 30 under obj, we need to write obj.num
}
var fn = obj.fn;
fn();
obj.fn();
Copy the code

var oBth = document.getElementById("btn");
var spanNum = document.getElementById("spanNum")

// Use the principle of global scope non-destruction to define the required number as a global variable
var count = 0;
oBtn.onclick = fucntion(){
  count++;
  spanNum.innerHTML = cont;
}
// Disadvantages: In order to prevent conflicts between global variables in a project, we generally prohibit or reduce the use of global variables
// Create an undestructible private scope to hold the numbers we need to add
Copy the code

Use innerHTML. With each click, you fetch the latest value from the page, add it up, and then put the sum back

var oBth = document.getElementById("btn");
var spanNum = document.getElementById("spanNum")

//
oBtn.onclick = fucntion(){
  spanNum.innerHTML++;
}
// Drawback: Every time you convert a page to a string and add it up, add it up and add it back up,
// When re-added the browser will render from the new
Copy the code

3. Use custom property storage (recommended)

oBth.count = 0;
oBth.onclick = function(){
	// spanNum. InnerHTML Gets the contents of the page and returns a string
  spanNum.innerHTML = ++this.count;
}
Copy the code