Memahami Skop dalam JavaScript

Skop, atau satu set peraturan yang menentukan tempat pembolehubah harus ditempatkan, adalah salah satu konsep paling asas bagi mana-mana bahasa pengaturcaraan. Malah, ia sangat asas sehingga kita mudah lupa betapa halusnya peraturan ini!

Memahami dengan tepat cara enjin JavaScript "berfikir" tentang skop akan membolehkan anda mengelakkan kesilapan biasa yang boleh berlaku akibat penulisan angkat, menyediakan anda untuk fokus pada penutupan, dan membawa anda selangkah lebih dekat untuk tidak lagi menulis perkara yang salah lagi.

...Apa pun, ia akan membantu anda memahami mengangkat dan menutup.

Dalam artikel ini kita akan belajar tentang:

• Pengetahuan asas skop dalam JavaScript
• Cara jurubahasa memutuskan pembolehubah mana yang tergolong dalam skop yang mana
• Prinsip kerja sebenar mengangkat
• Bagaimana kata kunci ES6 let dan const adalah pengubah permainanlet 和 const 如何改变游戏规则

让我们深入探讨。

如果您有兴趣了解有关 ES6 的更多信息以及如何利用语法和功能来改进和简化 JavaScript 代码，为什么不看看这两门课程：

词法范围

如果您之前编写过一行 JavaScript，您就会知道定义变量的位置决定了您可以使用的位置> 他们。变量的可见性取决于源代码的结构，这一事实称为词法 范围。

在 JavaScript 中创建作用域有三种方法：

1. 创建函数。在函数内部声明的变量仅在该函数内部可见，包括在嵌套函数中。
2. 使用 let 或 const 在代码块内声明变量。此类声明仅在块内可见。
3. 创建catch 块。不管你相信与否，这实际上确实创建了一个新的范围！

"use strict";
var mr_global = "Mr Global";

function foo () {
    var mrs_local = "Mrs Local";
    console.log("I can see " + mr_global + " and " + mrs_local + ".");
    
    function bar () {
        console.log("I can also see " + mr_global + " and " + mrs_local + ".");
    }
}

foo(); // Works as expected

try {
    console.log("But /I/ can't see " + mrs_local + "."); 
} catch (err) {
    console.log("You just got a " + err + ".");
}

{
    let foo = "foo";
    const bar = "bar";
    console.log("I can use " + foo + bar + " in its block...");
}

try {
    console.log("But not outside of it.");   
} catch (err) {
    console.log("You just got another " + err + ".");
}

// Throws ReferenceError!
console.log("Note that " + err + " doesn't exist outside of 'catch'!") 

上面的代码片段演示了所有三种作用域机制。您可以在 Node 或 Firefox 中运行它，但 Chrome 还无法与 let 很好地配合。

我们将详细讨论其中的每一个。让我们首先详细了解 JavaScript 如何确定哪些变量属于哪个作用域。

编译过程：鸟瞰

当您运行一段 JavaScript 时，会发生两件事使其正常工作。

1. 首先，编译您的源代码。
2. 然后，编译后的代码将被执行。

在编译步骤期间，JavaScript 引擎：

1. 记下所有变量名称
2. 将它们注册到适当的范围
3. 为自己的价值观保留空间

只有在执行期间，JavaScript 引擎才真正将变量引用的值设置为等于其赋值。在那之前，它们是 undefined。

第 1 步：编译

// I can use first_name anywhere in this program 
var first_name = "Peleke";

function popup (first_name) {
    // I can only use last_name inside of this function
    var last_name = "Sengstacke";
    alert(first_name + ' ' + last_name);
}

popup(first_name);

让我们逐步了解一下编译器的作用。

首先，它读取行 var first_name = "Peleke"。接下来，它确定将变量保存到的范围。因为我们位于脚本的顶层，所以它意识到我们处于全局范围。然后，它将变量 first_name 保存到全局范围，并将其值初始化为 undefined。

其次，编译器读取带有 function popup (first_name) 的行。因为 function 关键字是该行的第一个内容，因此它为函数创建一个新作用域，将函数的定义注册到全局作用域，并查看内部以查找变量声明。

果然，编译器找到了一个。由于我们函数的第一行中有 var last_name = "Sengstacke"，因此编译器会将变量 last_name 保存到 </em> class="inline">popup —不到全局范围 — 并将其值设置为 undefined

skop leksikal

menggunakan

🎜 Buat fungsi. Pembolehubah yang diisytiharkan dalam fungsi hanya boleh dilihat di dalam fungsi itu, termasuk dalam fungsi bersarang. 🎜 🎜 Isytiharkan pembolehubah dalam blok kod menggunakan let atau const . Pengisytiharan sedemikian hanya boleh dilihat dalam blok. 🎜 🎜 Buattangkap Sekat. Percaya atau tidak, ini sebenarnya 🎜membuat🎜membuat rangkaian baharu! 🎜

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";
}

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 + ".");
        })
    }
};