current position:Home>JS scope

JS scope

2021-08-27 00:15:03 Nordon

This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details :8 Yuegengwen challenge

JS A scope is a set of variable lookup rules , It is used to determine how to find variables within the accessible range during code execution , Any language has the concept of scope , stay JS In the world of , Scopes are divided into global scopes 、 Function scope and block level scope

Global scope : Objects in the global scope can be accessed anywhere in the code , Its life cycle is accompanied by the page's life cycle .

Function scope : A variable or function defined inside a function , And the defined variable or function can only be accessed inside the function . After function execution , Variables defined within a function are destroyed .

Block level scope : A piece of code wrapped in a pair of braces , Like functions 、 Judgment statement 、 Loop statement , Even a single one {} Can be seen as a block level scope .

Function scope

The variables defined in a function are called function variables , At this time, it can only be accessed inside the function , So its scope is the interior of the function , It's called function scope

const getName = () => {
  var name = 'nordon';
  console.log(name)
}

const fn = () => {
  console.log(name)
}

getName();
fn();
 Copy code 

Variable name Is defined in getName Function , It exists as a variable in the scope of the function , Executing functions getName when , Can be obtained name Value

function fn When it comes to execution , Its corresponding function scope is not defined name Variable , It will find... Along the scope chain in turn , Eventually return undefined

Global scope

Variables defined in the global environment will be hung to by default window Under the object , You can access... Anywhere in your code

var name = 'nordon';

const fn = () => {
  console.log(name) //  Equivalent  window.name
}

fn();
 Copy code 

Function as fn When it comes to execution , Will be in fn Find... In the scope of the function , If it is not found, it will be found in the global scope , If found, it will return data , No return found undefined

Block level scope

ES6 Added let and const Declare the block level scope of the variable , bring JavaScript The scope is richer in . Block level scope , seeing the name of a thing one thinks of its function , Scope is limited to code blocks , Yes Temporary dead zone Characteristics , In other words, this variable cannot be used before it is defined .

const fn = () => {
  console.log(name)
  var name = 'norodn'
}

fn()
 Copy code 

stay ES6 Before , Variable promotion will occur , Will be output :undefined, The reason is the variable name Promoted in function . amount to :

const fn = () => {
  var name = undefined
  console.log(name)
  name = 'norodn'
}

fn()
 Copy code 

If you use let or const Declare variables , A closed block level scope will be formed for this variable , In this block level scope , If you access a variable before declaring it , Will report referenceError error

const fn = () => {
  console.log(name)
  let name = 'norodn'
}

fn()
 Copy code 

An error will be reported when the code is executed :Uncaught ReferenceError: Cannot access 'name' before initialization

If you access... After declaring a variable , The variable value can be obtained normally

const fn = () => {
  let name = 'norodn'
  console.log(name)
}

fn()
 Copy code 

So what is a block level scope

Just in a pair of braces {} Variables defined in , A separate scope will be generated

const fn = () => {
  console.log(name) // Uncaught ReferenceError: name is not defined
  if(true) {
    let name = '1'
  }
}

fn()
 Copy code 

Variable name Only works on block level scopes if In judgment , The scope of the function fn Other parts of the interior are not available

A classic interview question about block level scope :


function fn(){
  for(var i = 1; i <= 10; i ++){
    setTimeout(function() {
      console.log(i)
    }, 0)
  }
}

fn()
 Copy code 

Because in the function scope fn There are variables in i, When the timer executes, it will ask the variables in the scope of the function i, In the scope of the function i It's already 11, So the console will output 10 individual 11

If you want to output in order 1,2,3...,10, Can be var Change it to let, Make it a block level scope , Then every time the timer executes the callback function, it will look up in the block level scope of its execution

for(let i = 1; i <= 10; i ++){ // var  Cultivation is  let  that will do 
}
 Copy code 

copyright notice
author[Nordon],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827001500539z.html

Random recommended