Analisis ringkas rantaian skop JavaScript, konteks pelaksanaan dan kemahiran closure_javascript

Penutupan dan rantaian skop adalah konsep yang agak penting dalam JavaScript Saya telah membaca beberapa maklumat dalam dua hari lalu dan meringkaskan perkara pengetahuan yang berkaitan di bawah.

JavaScript menggunakan skop leksikal Skop pembolehubah yang bergantung pada pelaksanaan fungsi ditentukan apabila fungsi ditakrifkan, bukan apabila fungsi itu dilaksanakan. Ambil serpihan kod berikut sebagai contoh Secara umumnya (pelaksanaan berasaskan timbunan, seperti bahasa C) selepas foo dipanggil, skop pembolehubah tempatan dalam fungsi akan dikeluarkan, tetapi dari segi leksikal, skop dalam fungsi tanpa nama terbenam bagi. foo harus merujuk kepada skop pembolehubah tempatan foo, dan sebenarnya hasil larian kod adalah konsisten dengan ungkapan leksikal Selepas f dipanggil, ia mengembalikan skop tempatan. Selepas panggilan fungsi utamanya foo tamat, objek fungsi f masih mengekalkan rujukan kepada pembolehubah skop badan fungsi foo Ini adalah apa yang dipanggil penutupan.

var scope = 'global scope';
function foo() {
var scope = 'local scope';
return function () {
return scope;
}
}
var f = foo();
f(); // 返回 "local scope"

Jadi bagaimana penutupan berfungsi? Untuk memahami penutupan, anda perlu terlebih dahulu memahami skop pembolehubah dan rantaian skop Satu lagi konsep penting ialah konteks pelaksanaan.

Skop pembolehubah

Pembolehubah global dalam JavaScript mempunyai skop global Skop pembolehubah yang diisytiharkan dalam badan fungsi ialah keseluruhan badan fungsi, yang merupakan setempat, ia juga termasuk fungsi bersarang yang ditakrifkan dalam badan fungsi. Keutamaan pembolehubah tempatan dalam badan fungsi adalah lebih tinggi daripada pembolehubah global Jika pembolehubah tempatan dan pembolehubah global mempunyai nama yang sama, pembolehubah global akan diliputi oleh pembolehubah tempatan yang sama, keutamaan pembolehubah tempatan ditakrifkan dalam fungsi bersarang adalah lebih tinggi daripada pembolehubah tempatan dalam fungsi di mana fungsi bersarang terletak. Ini sangat jelas sehingga hampir semua orang memahaminya.
Seterusnya, mari kita bercakap tentang sesuatu yang mungkin tidak diketahui oleh semua orang.

Promosi pengisytiharan fungsi

Gunakan satu ayat untuk menerangkan promosi pengisytiharan fungsi, yang bermaksud bahawa pembolehubah yang diisytiharkan dalam badan fungsi adalah sah dalam keseluruhan fungsi. Dalam erti kata lain, walaupun pembolehubah yang diisytiharkan di bahagian bawah badan fungsi akan dinaikkan ke atas. Contohnya:

var scope = 'global scope';
function foo() {
console.log(scope); // 这里不会打印出 "global scope"，而是 "undefined"
var scope = 'local scope'; 
console.log(scope); // 很显然，打印出 "local scope"
}
foo();

Console.log(skop) pertama akan mencetak undefined dan bukannya skop global, kerana pengisytiharan pembolehubah tempatan telah dipromosikan, tetapi masih belum diberikan nilai.

Pembolehubah sebagai atribut

Dalam JavaScript, terdapat tiga cara untuk menentukan pembolehubah global, seperti globalVal1, globalVal2 dan globalValue3 dalam kod contoh berikut. Fenomena yang menarik ialah sebenarnya pembolehubah global hanyalah sifat bagi tetingkap objek global/global (tetingkap dalam pelayar, global dalam node.js). Untuk lebih konsisten dengan definisi pembolehubah dalam erti kata biasa, JavaScript mereka bentuk pembolehubah global yang ditakrifkan dengan var ke dalam sifat objek global yang tidak boleh dipadamkan. Ia boleh diperolehi melalui Object.getOwnPropertyDescriptor(ini, 'globalVal1'), dan sifat boleh dikonfigurasikannya adalah palsu.

var globalVal1 = 1; // 不可删除的全局变量
globalVal2 = 2; // 可删除的全局变量
this.globalValue3 = 3; // 同 globalValue2
delete globalVal1; // => false 变量没有被删除
delete globalVal2; // => true 变量被删除
delete this.globalValue3; //=> true 变量被删除

那么问题来了，函数体内定义的局部变量是不是也作为某个对象的属性呢？答案是肯定的。这个对象是跟函数调用相关的，在 ECMAScript 3中称为“call object”、ECMAScript 5中称为“declaravite environment record”的对象。这个特殊的对象对我们来说是一种不可见的内部实现。

作用域链

从上一节我们知道，函数局部变量可与看做是某个不可见的对象的属性。那么 JavaScript 的词法作用域的实现可以这样描述：每一段 JavaScript 代码（全局或函数）都有一个跟它关联的作用域链，它可以是数组或链表结构；作用域链中的每一个元素定义了一组作用域内的变量；当我们要查找变量 x 的值，那么从作用域链的第一个元素中找这个变量，如果没有找到者找链表中的下一个元素中查找，直到找到或抵达链尾。了解作用域链的概念对理解闭包至关重要。

执行上下文

每段 JavaScript 代码的执行都与执行上下文绑定，运行的代码通过执行上下文获可用的变量、函数、数据等信息。全局的执行上下文是唯一的，与全局代码绑定，每执行一个函数都会创建一个执行上下文与其绑定。JavaScript 通过栈的数据结构维护执行上下文，全局执行上下文位于栈底，当执行一个函数的时候，新创建的函数执行上下文将会压入栈中，执行上下文指针指向栈顶，运行的代码即可获得当前执行的函数绑定的执行上下文。如果函数体执行嵌套的函数，也会创建执行上下文并压入栈，指针指向栈顶，当嵌套函数运行结束后，与它绑定的执行上下文被推出栈，指针重新指向函数绑定的执行上下文。同样，函数执行结束，指针会指向全局执行上下文。

执行上下文可以描述成式一个包含变量对象（对应全局）/活动对象（对应函数）、作用域链和 this 的数据结构。当一个函数执行时，活动对象被创建并绑定到执行上下文。活动对象包括函数体内申明的变量、函数、arguments 等。作用域链在上一节以及提到，是按词法作用域构建的。需要注意的是 this 不属于活动对象，在函数执行的那一刻就以及确定。
执行上下文的创建是有特定的次序和阶段的，不同阶段有不同的状态，具体的细节可以看一下参考资料，在结尾部分会列出。

闭包

了解了作用域链和执行上下文，回过头看篇首的那段代码，基本上就可以解释闭包式如何工作了。函数调用的时候创建的执行上下文以及词法作用域链保持函数调用所需要的信息， f 函数调用之后才可以返回local scope。

需要注意的是，函数内定义的多个函数使用的是同一个作用域链，在使用 for 循环赋值匿名函数对象的场景比较容易引起错误，举例如下：

var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = {
func: function() {
return i;
}
};
}
arr[0].func(); // 返回 10，而不是 0

arr[0].func()返回的是 10 而不是 0，跟感官上的语义有偏差。在 ECMAScript 6 引入 let 之前， 变量作用域范围是在整个函数体内而不是在代码区块之内，所以上面的例子中所有定义的 func 函数引用了同一个作用域链在 for 循环之后， i 的值已经变为 10 。

正确的做法是这样：

var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = {
func: getFunc(i)
};
}
function getFunc(i) {
return function() {
return i;
}
}
arr[0].func(); // 返回 0

以上内容给大家介绍了JavaScript作用域链、执行上下文与闭包的相关知识，希望对大家有所帮助。