⭐ ⭐

A:

scope

In JavaScript, we can define a scope as a set of rules that govern how the JS engine performs variable look-ups based on identifier names in the current scope and nested subscopes.

To put it in more general terms:

First of all, programming languages have the concept of variables, without variables, code can achieve very limited functions, variables can be stored, read, and modified.

So there’s got to be some sort of rule about where these variables are stored and how they’re read.

Scopes are rules designed by programming languages to manage variables.

There are several common types of scope in JS:

  • Global scopeglobal/window
  • Function scopefunction
  • Block scope{}

Global scope

Global scope means that a declared variable can be retrieved anywhere in the program.

Any variables that are not declared in functions or braces {} are in global scope.

var name = 'lin' // Name is defined in the global scope

function fn () {
  console.log(name) // 'lin'
}

fn()

console.log(window.name) // The 'Lin' global variable will be mounted to the window
Copy the code

Function scope

A function scope is also called a local scope, so if a variable is declared inside a function it goes under a function scope. These variables can only be accessed inside the function, not outside it


function fn () {
  var personName = 'lin' // Name is defined in local scope
  console.log(personName) // 'lin'
}

fn()

console.log(personName) Uncaught ReferenceError: personName is not defined
Copy the code

Block-level scope

With the introduction of let and const in ES6, variables defined in braces exist in block-level scopes and cannot be accessed outside of braces.

if (true) {
  var personName = 'lin' // Name is defined in the block-level scope
  const age = 18
  console.log(personName) // 'lin'
  console.log(age) / / 18
}

console.log(personName) // 'Lin' var defines a variable that can be accessed externally
console.log(age) // Uncaught ReferenceError: personName is not defined
Copy the code

The scope chain

When using a variable in JS, the JS engine will first try to find the variable in the current scope, if not, then in its upper scope, and so on until it finds the variable or reaches the global scope.

If the variable is still not found in the global scope, it will report an error.

var sex = 'male'
function foo () {
  var name = '阿林'
  function bar () {
    var age = 18
    console.log(name) / / allyn
    console.log(sex) / / male
  }
  bar()
  console.log(age) // Uncaught ReferenceError: age is not defined
}
foo()
Copy the code
  • barThe inside of the function belongs to the innermost scope and cannot be foundname, one level upfooInside the function, I found the output “Alin.”
  • barInternal output sex not found, scope up one levelfooFunction search, still can’t find it go up one level, global scope, find the output male
  • infooFunction internal outputageIf the global scope is not found, an error will be reported

Lexical scope

Lexical scope, also known as static scope, means that the scope of a variable is determined at code writing, not at execution time.

The opposite is dynamic scoping, which means that the scope of a variable is determined at code execution time.

JS follows lexical scope, as evidenced by the following example:

var a = 2

function foo () {
  console.log(a) // 2.
}

function bar () {
  var a = 3
  foo()
}

bar()
Copy the code

If JS is static scoped, foo is executed and first looks inside foo to see if there is a local variable a. If there is no local variable A, then looks inside foo to see if there is a global variable A = 2, so the result prints 2.

If JS is dynamically scoped, foo is executed, still looking for local variable A from within foo. If not, the a variable is looked up from within the scope of the calling function, that is, the bar function, so the result prints 3.

The output is 2, so JS is lexical scope.

At the end

If my article is helpful to you, your 👍 is my biggest support ^_^

I’m Allyn, export insight technology, goodbye!

The last:

Why are JS functions called first-class citizens?

Next up:

Var, let, and const