JavaScript의 범위 이해

범위, 즉 변수가 위치해야 하는 위치를 결정하는 규칙 집합은 모든 프로그래밍 언어의 가장 기본적인 개념 중 하나입니다. 사실, 이는 너무 기본적이어서 이러한 규칙이 얼마나 미묘한지 우리는 쉽게 잊어버릴 수 있습니다!

JavaScript 엔진이 범위에 대해 어떻게 "생각"하는지 정확히 이해하면 호이스팅 작성으로 인해 발생할 수 있는 일반적인 실수를 방지하고 클로저에 집중할 수 있도록 준비하며 다시는 잘못된 것을 작성하지 않는 데 한 걸음 더 가까워질 수 있습니다.

...어쨌든 들어 올리고 닫는 것을 이해하는 데 도움이 될 것입니다.

이 글에서 우리는 다음에 대해 배울 것입니다:

• JavaScript 범위에 대한 기본 지식
• 통역사가 어떤 변수가 어떤 범위에 속하는지 결정하는 방법
• 호이스팅의 실제 작동 원리
• ES6 키워드 let 和 const 게임을 바꾸는 방법

더 자세히 살펴보겠습니다.

ES6에 대해 더 자세히 알아보고 구문과 기능을 활용하여 JavaScript 코드를 개선하고 단순화하는 방법에 관심이 있다면 다음 두 과정을 확인해 보세요.

어휘 범위

이전에 JavaScript 코드를 작성해 본 적이 있다면 변수를 정의하는 위치가 변수를 사용하는 > 위치를 결정한다는 사실을 알게 될 것입니다. 변수의 가시성이 소스 코드의 구조에 따라 달라진다는 사실을 lexical scope라고 합니다.

JavaScript에서 범위를 만드는 방법에는 세 가지가 있습니다.

1. 함수 만들기. 함수 내부에 선언된 변수는 중첩된 함수를 포함하여 해당 함수 내부에서만 표시됩니다.
2. 코드 블록 내에서 변수를 선언하려면 let 或 const 을 사용하세요. 이러한 선언은 블록 내에서만 표시됩니다.
3. 만들기 catch블록. 믿거나 말거나, 이것은 실제로 정말새로운 범위를 만들어냅니다!
으아악

와 잘 작동하지 않습니다. let

먼저 소스 코드를 컴파일하세요.
그러면 컴파일된 코드가 실행됩니다.

컴파일단계 동안 JavaScript 엔진은 다음을 수행합니다.

모든 변수 이름을 적어두세요
해당 범위에 등록하세요
자신의 가치를 위한 공간을 확보하세요

실행 중에만 JavaScript 엔진이 실제로 변수 참조 값을 할당된 값과 동일하게 설정합니다. 그때까지는 입니다. undefined

으아악

scopevar first_name = "Peleke"。接下来，它确定将变量保存到的范围。因为我们位于脚本的顶层，所以它意识到我们处于全局范围。然后，它将变量 first_name 保存到全局范围，并将其值初始化为 undefined를 결정합니다. 우리는 스크립트의 최상위 수준에 있기 때문에 우리가

에 있음을 인식합니다. 그런 다음 first_name 변수를 전역 범위에 저장하고 해당 값을 function popup (first_name)로 초기화합니다. 두 번째로 컴파일러는

functionvar last_name = "Sengstacke"，因此编译器会将变量 last_name 保存到 class="inline">popup —不到全局范围 — 并将其值设置为 undefined 키워드는 줄의 첫 번째 항목이므로 함수에 대한 새 범위를 만들고 함수 정의를 전역 범위에 등록한 다음 내부를 살펴보고 변수 선언을 찾습니다.

물론, 컴파일러가 하나를 찾았습니다. 함수의 첫 번째 줄에 var last_name = "Sengstacke"가 있으므로 컴파일러는 last_name 변수를

class="inline">popup — 전역 범위가 아니라 — 값을

1. 全局范围内有一个名为 first_name 的变量。
2. 全局范围内有一个名为 的函数。
3. 在 范围内有一个名为 last_name 的变量。
4. first_name 和 last_name 的值均为 undefined。

bar();

function bar () {
    if (!foo) {
        alert(foo + "? This is strange...");
    }
    var foo = "bar";
}

broken(); // TypeError!
var broken = function () {
    alert("This alert won't show up!");
}

function bar () {
    var foo; // undefined
    if (!foo) {
        // !undefined is true, so alert
        alert(foo + "? This is strange...");
    }
    foo = "bar";
}

function bar () {
    if (!foo) {
        alert(foo + "? This is strange...");
    }
    var foo = "bar";
}

var broken; // undefined

bar(); // bar is already defined, executes fine

broken(); // Can't execute undefined!

broken = function () {
    alert("This alert won't show up!");
}

"use strict"; 
// You have to "use strict" to try this in Node
broken(); // ReferenceError!
let broken = function () {
    alert("This alert won't show up!");
}

// This is legal
const React = require('react');

// This is totally not legal
const crypto;
crypto = require('crypto');

"use strict";

{
  let foo = "foo";
  if (foo) {
      const bar = "bar";
      var foobar = foo + bar;

      console.log("I can see " + bar + " in this bloc.");
  }
  
  try {
    console.log("I can see " + foo + " in this block, but not " + bar + ".");
  } catch (err) {
    console.log("You got a " + err + ".");
  }
}

try {
  console.log( foo + bar ); // Throws because of 'foo', but both are undefined
} catch (err) {
  console.log( "You just got a " + err + ".");
}

console.log( foobar ); // Works fine

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak : function speak () {
        this.languages.forEach(function(language) {
            console.log(this.name + " speaks " + language + ".");
        })
    }
};

foo.speak();

function foo () {
    var bar = "bar";
    function baz () {
        // Reusing variable names like this is called "shadowing" 
        var bar = "BAR";
        console.log(bar); // BAR
    }
    baz();
}

foo(); // BAR

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak_self : function speak_s () {
        var self = this;
        self.languages.forEach(function(language) {
            console.log(self.name + " speaks " + language + ".");
        })
    },
    speak_bound : function speak_b () {
        this.languages.forEach(function(language) {
            console.log(this.name + " speaks " + language + ".");
        }.bind(foo)); // More commonly:.bind(this);
    }
};

var foo = {
    name: 'Foo',
    languages: ['Spanish', 'French', 'Italian'],
    speak : function speak () {
        this.languages.forEach((language) => {
            console.log(this.name + " speaks " + language + ".");
        })
    }
};