JavaScript ปิดกับฟังก์ชั่นที่ไม่ระบุชื่อ

เพื่อนของฉันและฉันกำลังพูดถึงสิ่งที่ปิดใน JS และสิ่งที่ไม่ เราแค่ต้องการให้แน่ใจว่าเราเข้าใจมันอย่างถูกต้อง

ลองดูตัวอย่างนี้ เรามีการนับลูปและต้องการพิมพ์ตัวแปรตัวนับบนคอนโซลล่าช้า ดังนั้นเราจึงใช้setTimeoutและปิดเพื่อจับค่าของตัวแปรตัวนับเพื่อให้แน่ใจว่ามันจะไม่พิมพ์ N คูณค่า N

วิธีการแก้ปัญหาที่ผิดโดยไม่ปิดหรืออะไรก็ตามที่ใกล้กับการปิดคือ:

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

ซึ่งแน่นอนว่าจะพิมพ์ค่าของiลูปหลัง10 เท่าคือ 10

ดังนั้นความพยายามของเขาคือ:

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

พิมพ์ 0 ถึง 9 ตามที่คาดไว้

ฉันบอกเขาว่าเขาไม่ได้ใช้การปิดเพื่อจับภาพiแต่เขายืนยันว่าเขาเป็น ฉันพิสูจน์ว่าเขาไม่ได้ใช้การปิดโดยการใส่สำหรับลูปบอดี้ภายในอีกอันsetTimeout(ผ่านฟังก์ชั่นนิรนามของเขาไปที่setTimeout) โดยพิมพ์ 10 ครั้ง 10 อีกครั้ง เช่นเดียวกับถ้าผมเก็บฟังก์ชั่นของเขาในvarและดำเนินการได้หลังจากที่วงยังพิมพ์ 10 ครั้ง 10. ดังนั้นอาร์กิวเมนต์ของฉันคือการที่เขาไม่ได้จริงๆจับค่าของการiทำให้รุ่นของเขาไม่ได้ปิด

ความพยายามของฉันคือ:

for(var i = 0; i < 10; i++) {
    setTimeout((function(i2){
        return function() {
            console.log(i2);
        }
    })(i), 1000);
}

ดังนั้นฉันจึงจับi(ตั้งชื่อi2ภายในการปิด) แต่ตอนนี้ฉันกลับฟังก์ชั่นอื่นและส่งผ่านสิ่งนี้ ในกรณีของฟังก์ชั่นที่ส่งผ่านไป setTimeout iจับจริงๆ

ตอนนี้ใครกำลังใช้การปิดและใครไม่ได้

โปรดทราบว่าโซลูชันทั้งสองพิมพ์ 0 ถึง 9 บนคอนโซลล่าช้าดังนั้นพวกเขาจึงแก้ปัญหาเดิม แต่เราต้องการเข้าใจว่าโซลูชันสองรายการใดที่ใช้การปิดเพื่อให้บรรลุสิ่งนี้

หมายเหตุถึงบรรณาธิการ:ฟังก์ชั่นทั้งหมดใน JavaScript จะปิดดังที่อธิบายไว้ในโพสต์นี้ อย่างไรก็ตามเราสนใจเพียงแค่ระบุส่วนย่อยของฟังก์ชันเหล่านี้ซึ่งน่าสนใจจากมุมมองเชิงทฤษฎี ตั้งแต่นี้ไปการอ้างอิงใด ๆ ถึงการปิดคำจะอ้างอิงถึงฟังก์ชั่นย่อยของฟังก์ชั่นนี้เว้นแต่จะระบุไว้เป็นอย่างอื่น

คำอธิบายง่ายๆสำหรับการปิด:

1. ใช้ฟังก์ชั่น เรียกมันว่าเอฟ
2. แสดงรายการตัวแปรทั้งหมดของ F
3. ตัวแปรอาจมีสองประเภท:
   1. ตัวแปรท้องถิ่น (ตัวแปรที่ถูกผูกไว้)
   2. ตัวแปรที่ไม่ใช่ท้องถิ่น (ตัวแปรอิสระ)
4. ถ้า F ไม่มีตัวแปรอิสระมันจะไม่สามารถปิดได้
5. ถ้า F มีตัวแปรใด ๆ ฟรี (ซึ่งถูกกำหนดไว้ในขอบเขตแม่ของ F) แล้ว:
   1. ต้องมีขอบเขตเพียงผู้ปกครองหนึ่ง F ถึงซึ่งตัวแปรอิสระที่ถูกผูกไว้
   2. ถ้า F จะอ้างอิงจากภายนอกว่าขอบเขตของพ่อแม่แล้วจะกลายเป็นปิดหาว่าตัวแปรฟรี
   3. ว่าตัวแปรอิสระที่เรียกว่า upvalue ของการปิดเอฟ

ตอนนี้ลองใช้สิ่งนี้เพื่อหาว่าใครใช้การปิดและไม่ใช้ (เพื่อคำอธิบายฉันได้ตั้งชื่อฟังก์ชั่น):

กรณีที่ 1: โปรแกรมเพื่อนของคุณ

for (var i = 0; i < 10; i++) {
    (function f() {
        var i2 = i;
        setTimeout(function g() {
            console.log(i2);
        }, 1000);
    })();
}

ในโปรแกรมดังกล่าวข้างต้นมีสองฟังก์ชั่น: และf gมาดูกันว่าพวกมันปิดอยู่หรือไม่:

สำหรับf:

1. รายการตัวแปร:
   1. i2เป็นตัวแปรท้องถิ่น
   2. iเป็นตัวแปรอิสระ
   3. setTimeoutเป็นตัวแปรอิสระ
   4. gเป็นตัวแปรท้องถิ่น
   5. consoleเป็นตัวแปรอิสระ
2. ค้นหาขอบเขตพาเรนต์ที่แต่ละตัวแปรอิสระถูกผูก:
   1. iถูกผูกไว้กับขอบเขตส่วนกลาง
   2. setTimeoutถูกผูกไว้กับขอบเขตส่วนกลาง
   3. consoleถูกผูกไว้กับขอบเขตส่วนกลาง
3. ฟังก์ชันอ้างอิงในขอบเขตใด ขอบเขตทั่วโลก
   1. ดังนั้นiไม่ได้ปิดมากกว่าfโดย
   2. ดังนั้นsetTimeoutไม่ได้ปิดมากกว่าfโดย
   3. ดังนั้นconsoleไม่ได้ปิดมากกว่าfโดย

ดังนั้นฟังก์ชั่นfนี้ไม่ได้เป็นการปิด

สำหรับg:

1. รายการตัวแปร:
   1. consoleเป็นตัวแปรอิสระ
   2. i2เป็นตัวแปรอิสระ
2. ค้นหาขอบเขตพาเรนต์ที่แต่ละตัวแปรอิสระถูกผูก:
   1. consoleถูกผูกไว้กับขอบเขตส่วนกลาง
   2. i2จะผูกพันfขอบเขตของ
3. ฟังก์ชันอ้างอิงในขอบเขตใด ขอบเขตของ setTimeout
   1. ดังนั้นconsoleไม่ได้ปิดมากกว่าgโดย
   2. ดังนั้นi2จะปิดมากกว่าgโดย

ดังนั้นฟังก์ชั่นgคือการปิดสำหรับตัวแปรอิสระi2(ซึ่งเป็น upvalue สำหรับg) เมื่อมันอ้างอิงsetTimeoutจากภายใน

ไม่ดีสำหรับคุณ:เพื่อนของคุณกำลังปิดตัว ฟังก์ชั่นภายในคือการปิด

กรณีที่ 2: โปรแกรมของคุณ

for (var i = 0; i < 10; i++) {
    setTimeout((function f(i2) {
        return function g() {
            console.log(i2);
        };
    })(i), 1000);
}

ในโปรแกรมดังกล่าวข้างต้นมีสองฟังก์ชั่น: และf gมาดูกันว่าพวกมันปิดอยู่หรือไม่:

สำหรับf:

1. รายการตัวแปร:
   1. i2เป็นตัวแปรท้องถิ่น
   2. gเป็นตัวแปรท้องถิ่น
   3. consoleเป็นตัวแปรอิสระ
2. ค้นหาขอบเขตพาเรนต์ที่แต่ละตัวแปรอิสระถูกผูก:
   1. consoleถูกผูกไว้กับขอบเขตส่วนกลาง
3. ฟังก์ชันอ้างอิงในขอบเขตใด ขอบเขตทั่วโลก
   1. ดังนั้นconsoleไม่ได้ปิดมากกว่าfโดย

ดังนั้นฟังก์ชั่นfนี้ไม่ได้เป็นการปิด

สำหรับg:

1. รายการตัวแปร:
   1. consoleเป็นตัวแปรอิสระ
   2. i2เป็นตัวแปรอิสระ
2. ค้นหาขอบเขตพาเรนต์ที่แต่ละตัวแปรอิสระถูกผูก:
   1. consoleถูกผูกไว้กับขอบเขตส่วนกลาง
   2. i2จะผูกพันfขอบเขตของ
3. ฟังก์ชันอ้างอิงในขอบเขตใด ขอบเขตของ setTimeout
   1. ดังนั้นconsoleไม่ได้ปิดมากกว่าgโดย
   2. ดังนั้นi2จะปิดมากกว่าgโดย

ดังนั้นฟังก์ชั่นgคือการปิดสำหรับตัวแปรอิสระi2(ซึ่งเป็น upvalue สำหรับg) เมื่อมันอ้างอิงsetTimeoutจากภายใน

ดีสำหรับคุณ:คุณกำลังปิดตัว ฟังก์ชั่นภายในคือการปิด

ดังนั้นทั้งคุณและเพื่อนของคุณกำลังใช้การปิด หยุดเถียง ฉันหวังว่าฉันจะล้างแนวคิดของการปิดและวิธีการระบุพวกเขาสำหรับคุณทั้งคู่

แก้ไข:คำอธิบายง่ายๆว่าทำไมฟังก์ชั่นทั้งหมดถึงปิด (เครดิต @Peter):

ก่อนอื่นมาลองพิจารณาโปรแกรมต่อไปนี้ (มันเป็นตัวควบคุม ):

lexicalScope();

function lexicalScope() {
    var message = "This is the control. You should be able to see this message being alerted.";

    regularFunction();

    function regularFunction() {
        alert(eval("message"));
    }
}

1. เรารู้ว่าทั้งสองlexicalScopeและregularFunctionไม่ได้ปิดจากนิยามดังกล่าวข้างต้น
2. เมื่อเรารันโปรแกรมที่เราคาดว่า messageจะได้รับการแจ้งเตือนเนื่องจาก regularFunctionไม่ใช่การปิด (เช่นมีการเข้าถึงตัวแปรทั้งหมดในขอบเขตหลัก - รวมถึงmessage)
3. เมื่อเรารันโปรแกรมที่เราสังเกตเห็นว่าmessageมีการแจ้งเตือนแน่นอน

ถัดไปลองพิจารณาโปรแกรมต่อไปนี้ (เป็นทางเลือก ):

var closureFunction = lexicalScope();

closureFunction();

function lexicalScope() {
    var message = "This is the alternative. If you see this message being alerted then in means that every function in JavaScript is a closure.";

    return function closureFunction() {
        alert(eval("message"));
    };
}

1. เรารู้ว่ามีเพียงclosureFunctionคือการปิดจากนิยามดังกล่าวข้างต้น
2. เมื่อเรารันโปรแกรมที่เราคาดว่าจะ messageไม่ได้รับการแจ้งเตือนเนื่องจาก closureFunctionเป็นการปิด (นั่นคือมีเพียงการเข้าถึงตัวแปรที่ไม่ใช่ท้องถิ่นทั้งหมดในเวลาที่ฟังก์ชั่นถูกสร้างขึ้น ( ดูคำตอบนี้ ) - นี้ไม่รวมmessage)
3. เมื่อเรารันโปรแกรมที่เราสังเกตเห็นว่าmessageมีการแจ้งเตือนจริง

เราสรุปอะไรจากสิ่งนี้

1. ล่าม JavaScript ไม่ได้ปิดการทำงานที่แตกต่างจากวิธีที่พวกเขาปฏิบัติหน้าที่อื่น ๆ
2. ทุกฟังก์ชั่นมีห่วงโซ่ขอบเขตพร้อมกับมัน การปิดไม่ได้มีสภาพแวดล้อมการอ้างอิงแยกต่างหาก
3. การปิดเป็นเหมือนทุกฟังก์ชั่นอื่น ๆ เราเพียงแค่เรียกพวกเขาปิดเมื่อพวกเขาถูกอ้างอิงในขอบเขตนอกขอบเขตที่พวกเขาอยู่เพราะเป็นกรณีที่น่าสนใจ

ตามclosureคำนิยาม:

"closure" คือนิพจน์ (โดยทั่วไปคือฟังก์ชัน) ที่สามารถมีตัวแปรอิสระพร้อมกับสภาพแวดล้อมที่ผูกตัวแปรเหล่านั้น (ซึ่ง "ปิด" นิพจน์)

คุณกำลังใช้closureถ้าคุณกำหนดฟังก์ชั่นที่ใช้ตัวแปรที่กำหนดไว้ด้านนอกของฟังก์ชั่น (เราเรียกตัวแปรว่าเป็นตัวแปรอิสระ )
พวกเขาทั้งหมดใช้closure(แม้ในตัวอย่างที่ 1)

สรุปJavascript ปิดอนุญาตให้มีฟังก์ชั่นการเข้าถึงตัวแปรที่ประกาศไว้ในฟังก์ชั่นคำศัพท์ผู้ปกครอง

ลองดูคำอธิบายโดยละเอียดเพิ่มเติม เพื่อให้เข้าใจถึงการปิดเป็นสิ่งสำคัญที่จะต้องเข้าใจว่า JavaScript กำหนดขอบเขตตัวแปรอย่างไร

ขอบเขต

ในขอบเขต JavaScript ถูกกำหนดด้วยฟังก์ชัน ทุกฟังก์ชั่นจะกำหนดขอบเขตใหม่

ลองพิจารณาตัวอย่างต่อไปนี้

function f()
{//begin of scope f
  var foo='hello'; //foo is declared in scope f
  for(var i=0;i<2;i++){//i is declared in scope f
     //the for loop is not a function, therefore we are still in scope f
     var bar = 'Am I accessible?';//bar is declared in scope f
     console.log(foo);
  }
  console.log(i);
  console.log(bar);
}//end of scope f

เรียก f พิมพ์

hello
hello
2
Am I Accessible?

ตอนนี้ขอให้พิจารณากรณีที่เราได้ฟังก์ชั่นที่กำหนดไว้ในฟังก์ชั่นอื่นgf

function f()
{//begin of scope f
  function g()
  {//being of scope g
    /*...*/
  }//end of scope g
  /*...*/
}//end of scope f

เราจะเรียกปกครองศัพท์ของ ตามที่อธิบายไว้ก่อนหน้านี้เรามี 2 ขอบเขต; ขอบเขตและขอบเขตfgfg

แต่ขอบเขตหนึ่งคือ "ภายใน" ขอบเขตอื่นดังนั้นขอบเขตของฟังก์ชันลูกเป็นส่วนหนึ่งของขอบเขตของฟังก์ชันหลักหรือไม่ เกิดอะไรขึ้นกับตัวแปรที่ประกาศในขอบเขตของฟังก์ชันพาเรนต์ ฉันจะสามารถเข้าถึงพวกเขาจากขอบเขตของฟังก์ชันลูกได้หรือไม่ นั่นคือสิ่งที่ขั้นตอนการปิด

ปิด

ใน JavaScript ฟังก์ชั่นgไม่เพียง แต่สามารถเข้าถึงตัวแปรใด ๆ ที่ประกาศในขอบเขตgแต่ยังเข้าถึงตัวแปรใด ๆ fที่ประกาศในขอบเขตของฟังก์ชั่นแม่

พิจารณาดังนี้

function f()//lexical parent function
{//begin of scope f
  var foo='hello'; //foo declared in scope f
  function g()
  {//being of scope g
    var bar='bla'; //bar declared in scope g
    console.log(foo);
  }//end of scope g
  g();
  console.log(bar);
}//end of scope f

เรียก f พิมพ์

hello
undefined

ดู Let 's console.log(foo);ที่บรรทัด ณ จุดนี้เราอยู่ในขอบเขตgและเราพยายามที่จะเข้าถึงตัวแปรที่ประกาศอยู่ในขอบเขตfoo fแต่ตามที่ระบุไว้ก่อนที่เราจะสามารถเข้าถึงตัวแปรใด ๆ ที่ประกาศในฟังก์ชั่นผู้ปกครองศัพท์ซึ่งเป็นกรณีที่นี่; เป็นผู้ปกครองของคำศัพท์g fดังนั้นhelloจะถูกพิมพ์ ตอนนี้ขอให้ดูที่บรรทัด
console.log(bar);ณ จุดนี้เราอยู่ในขอบเขตfและเราพยายามที่จะเข้าถึงตัวแปรที่ประกาศอยู่ในขอบเขตbar ไม่ได้ประกาศในขอบเขตปัจจุบันและฟังก์ชั่นไม่ได้เป็นพาเรนต์ของดังนั้นจึงไม่ได้กำหนดgbargfbar

ที่จริงแล้วเราสามารถเข้าถึงตัวแปรที่ประกาศในขอบเขตของฟังก์ชัน "ผู้ปกครองหลัก" ศัพท์ ดังนั้นหากจะมีฟังก์ชั่นที่hกำหนดไว้ภายในฟังก์ชั่นg

function f()
{//begin of scope f
  function g()
  {//being of scope g
    function h()
    {//being of scope h
      /*...*/
    }//end of scope h
    /*...*/
  }//end of scope g
  /*...*/
}//end of scope f

แล้วhจะสามารถเข้าถึงตัวแปรทั้งหมดที่ประกาศในขอบเขตของฟังก์ชั่นh, และg fนี้จะกระทำด้วยการปิด ในการปิด JavaScript ช่วยให้เราสามารถเข้าถึงตัวแปรใด ๆ ที่ประกาศในฟังก์ชั่นผู้ปกครองศัพท์, ในฟังก์ชั่นผู้ปกครองระดับสูง, ในฟังก์ชั่นผู้ปกครองระดับสูงศัพท์ ฯลฯ นี้สามารถมองเห็นเป็นห่วงโซ่ขอบเขต ; scope of current function -> scope of lexical parent function -> scope of lexical grand parent function -> ... จนกระทั่งฟังก์ชันพาเรนต์สุดท้ายที่ไม่มีพาเรนต์ศัพท์

วัตถุหน้าต่าง

อันที่จริงเชนไม่ได้หยุดที่ฟังก์ชันพาเรนต์สุดท้าย มีขอบเขตพิเศษอีกหนึ่งข้อ ขอบเขตทั่วโลก ทุกตัวแปรที่ไม่ได้ประกาศในฟังก์ชั่นนั้นจะถูกประกาศให้อยู่ในขอบเขตส่วนกลาง ขอบเขตทั่วโลกมีความเชี่ยวชาญสองประการ

• ทุกตัวแปรที่ประกาศในขอบเขตทั่วโลกสามารถเข้าถึงได้ทุกที่
• ตัวแปรที่ประกาศในขอบเขตทั่วโลกสอดคล้องกับคุณสมบัติของwindowวัตถุ

ดังนั้นจึงมีสองวิธีในการประกาศตัวแปรfooในขอบเขตส่วนกลาง โดยไม่ได้ประกาศในฟังก์ชั่นหรือโดยการตั้งค่าคุณสมบัติfooของวัตถุหน้าต่าง

ทั้งสองพยายามใช้การปิด

ตอนนี้คุณได้อ่านคำอธิบายโดยละเอียดแล้วตอนนี้อาจเห็นได้ชัดว่าโซลูชันทั้งสองใช้การปิด แต่เพื่อให้แน่ใจว่ามาพิสูจน์กัน

มาสร้างภาษาโปรแกรมใหม่กันเถอะ; ใช้ JavaScript ไม่มีปิด ตามชื่อที่แนะนำ JavaScript-No-Off จะเหมือนกับ JavaScript ยกเว้นว่าจะไม่รองรับการปิด

กล่าวอีกนัยหนึ่ง;

var foo = 'hello';
function f(){console.log(foo)};
f();
//JavaScript-No-Closure prints undefined
//JavaSript prints hello

เอาล่ะเรามาดูกันว่าเกิดอะไรขึ้นกับโซลูชั่นแรกด้วย JavaScript-No-Off

for(var i = 0; i < 10; i++) {
  (function(){
    var i2 = i;
    setTimeout(function(){
        console.log(i2); //i2 is undefined in JavaScript-No-Closure 
    }, 1000)
  })();
}

ดังนั้นสิ่งนี้จะพิมพ์undefined10 ครั้งใน JavaScript-No-Off

ดังนั้นทางออกแรกใช้การปิด

ลองดูวิธีแก้ปัญหาที่สอง;

for(var i = 0; i < 10; i++) {
  setTimeout((function(i2){
    return function() {
        console.log(i2); //i2 is undefined in JavaScript-No-Closure
    }
  })(i), 1000);
}

ดังนั้นสิ่งนี้จะพิมพ์undefined10 ครั้งใน JavaScript-No-Off

โซลูชันทั้งสองใช้การปิด

แก้ไข: สันนิษฐานว่าตัวอย่างโค้ด 3 ตัวนี้ไม่ได้กำหนดไว้ในขอบเขตส่วนกลาง มิฉะนั้นตัวแปรfooและiจะผูกกับwindowวัตถุและสามารถเข้าถึงได้ผ่านwindowวัตถุทั้งใน JavaScript และ JavaScript-No-Off

ฉันไม่เคยมีความสุขกับวิธีที่ทุกคนอธิบายเรื่องนี้

กุญแจสำคัญในการทำความเข้าใจการปิดคือการเข้าใจสิ่งที่ JS จะเป็นเหมือนไม่มีการปิด

หากไม่มีการปิดนี่จะทำให้เกิดข้อผิดพลาด

function outerFunc(){
    var outerVar = 'an outerFunc var';
    return function(){
        alert(outerVar);
    }
}

outerFunc()(); //returns inner function and fires it

เมื่อ outerFunc กลับมาใน JavaScript เวอร์ชันปิดการใช้งานในจินตนาการการอ้างอิงไปยัง outerVar จะถูกรวบรวมขยะและไม่ได้ทิ้งสิ่งใดไว้ที่ func ภายในเพื่ออ้างอิง

การปิดเป็นหลักกฎพิเศษที่เตะเข้าและทำให้มันเป็นไปได้สำหรับ vars เหล่านั้นที่จะอยู่เมื่อฟังก์ชั่นภายในอ้างอิงตัวแปรของฟังก์ชั่นด้านนอก ด้วยการปิด vars ที่อ้างอิงจะถูกเก็บรักษาไว้แม้หลังจากฟังก์ชั่นด้านนอกเสร็จสิ้นหรือ 'ปิด' หากช่วยให้คุณจดจำจุดได้

แม้จะมีการปิดวงจรชีวิตของ vars ท้องถิ่นในฟังก์ชั่นที่ไม่มีฟังก์ชั่นภายในที่อ้างอิงคนในท้องถิ่นของมันทำงานเช่นเดียวกับในเวอร์ชันที่ปิดน้อยกว่า เมื่อฟังก์ชั่นเสร็จสิ้นชาวบ้านจะได้รับการเก็บขยะ

เมื่อคุณมีการอ้างอิงใน func ภายในเพื่อ var ภายนอก แต่มันก็เหมือน doorjamb ได้รับการวางในทางของการเก็บขยะสำหรับ vars อ้างอิงเหล่านั้น

วิธีที่แม่นยำกว่าในการดูการปิดคือฟังก์ชั่นด้านในใช้ขอบเขตด้านในเป็นขอบเขตของตัวเอง foudnation

แต่บริบทที่อ้างถึงในความเป็นจริงถาวรไม่เหมือนภาพรวม การยิงซ้ำฟังก์ชั่นด้านในที่ส่งคืนซึ่งจะช่วยเพิ่มและการบันทึก var ท้องถิ่นของฟังก์ชั่นด้านนอกจะทำให้การแจ้งเตือนค่าที่สูงขึ้น

function outerFunc(){
    var incrementMe = 0;
    return function(){ incrementMe++; console.log(incrementMe); }
}
var inc = outerFunc();
inc(); //logs 1
inc(); //logs 2

คุณทั้งคู่ใช้การปิด

ฉันจะไปกับคำนิยามของวิกิพีเดียที่นี่:

ในวิทยาการคอมพิวเตอร์การปิด (เช่นการปิดคำศัพท์หรือการปิดฟังก์ชั่น) เป็นฟังก์ชั่นหรือการอ้างอิงไปยังฟังก์ชั่นร่วมกับสภาพแวดล้อมอ้างอิง - ตารางที่จัดเก็บการอ้างอิงถึงตัวแปรที่ไม่ใช่ท้องถิ่น (เรียกว่าตัวแปรอิสระ) ของฟังก์ชันนั้น . การปิด - ไม่เหมือนกับตัวชี้ฟังก์ชันธรรมดา - อนุญาตให้ฟังก์ชั่นเข้าถึงตัวแปรที่ไม่ได้อยู่ในเครื่องแม้ว่าจะถูกเรียกใช้นอกขอบเขตของคำศัพท์ทันที

ความพยายามของเพื่อนของคุณได้อย่างชัดเจนใช้ตัวแปรซึ่งเป็นท้องถิ่นที่ไม่ใช่โดยการใช้ความคุ้มค่าและการทำสำเนาไปยังร้านค้าเข้าสู่ท้องถิ่นii2

ความพยายามของคุณเองผ่านi(ซึ่งในไซต์การโทรอยู่ในขอบเขต) ไปยังฟังก์ชันที่ไม่ระบุชื่อเป็นอาร์กิวเมนต์ นี้ไม่ได้ปิดเพื่อให้ห่างไกล แต่แล้วฟังก์ชั่นที่ส่งกลับฟังก์ชั่นอื่น ๆ i2ที่อ้างอิงเดียวกัน เนื่องจากภายในฟังก์ชันที่ไม่ระบุตัวตนด้านในi2ไม่ใช่ของท้องถิ่นจึงสร้างการปิด

คุณและเพื่อนของคุณใช้การปิด:

การปิดเป็นวัตถุชนิดพิเศษที่รวมสองสิ่ง: ฟังก์ชั่นและสภาพแวดล้อมที่ฟังก์ชันนั้นถูกสร้างขึ้น สภาพแวดล้อมประกอบด้วยตัวแปรท้องถิ่นใด ๆ ที่อยู่ในขอบเขตในเวลาที่ปิดการสร้าง

MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

ในฟังก์ชั่นรหัสของเพื่อนของคุณfunction(){ console.log(i2); }กำหนดไว้ภายในปิดฟังก์ชั่นที่ไม่ระบุชื่อfunction(){ var i2 = i; ...และสามารถอ่าน / i2เขียนตัวแปรท้องถิ่น

ในฟังก์ชั่นรหัสของคุณfunction(){ console.log(i2); }กำหนดไว้ในการปิดฟังก์ชั่นfunction(i2){ return ...และสามารถอ่าน / เขียนที่มีคุณค่าในท้องถิ่นi2(ประกาศในกรณีนี้เป็นพารามิเตอร์)

ในทั้งสองกรณีฟังก์ชั่นผ่านไปแล้วเป็นfunction(){ console.log(i2); }setTimeout

การเทียบเท่าอื่น (แต่มีการใช้หน่วยความจำน้อยกว่า) คือ:

function fGenerator(i2){
    return function(){
        console.log(i2);
    }
}
for(var i = 0; i < 10; i++) {
    setTimeout(fGenerator(i), 1000);
}

การปิด

การปิดไม่ใช่ฟังก์ชันและไม่ใช่การแสดงออก มันจะต้องถูกมองว่าเป็น 'ภาพรวม' จากตัวแปรที่ใช้นอกฟังก์ชั่นและใช้ภายในฟังก์ชั่น ตามหลักไวยากรณ์แล้วควรพูดว่า: 'ทำการปิดตัวแปร'

อีกครั้งในคำอื่น ๆ : การปิดเป็นสำเนาของบริบทที่เกี่ยวข้องของตัวแปรที่ฟังก์ชั่นขึ้นอยู่กับ

อีกครั้ง (naïf): การปิดทำการเข้าถึงตัวแปรที่ไม่ได้ถูกส่งผ่านเป็นพารามิเตอร์

โปรดทราบว่าแนวคิดการทำงานเหล่านี้ขึ้นอยู่กับภาษาโปรแกรม / สภาพแวดล้อมที่คุณใช้ ใน JavaScript การปิดนั้นขึ้นอยู่กับการกำหนดขอบเขตศัพท์ (ซึ่งเป็นจริงในภาษา c ส่วนใหญ่)

ดังนั้นการคืนค่าฟังก์ชันส่วนใหญ่จะส่งคืนฟังก์ชันที่ไม่ระบุชื่อ / ไม่ระบุชื่อ เมื่อตัวแปรการเข้าถึงฟังก์ชั่นที่ไม่ผ่านเป็นพารามิเตอร์และภายในขอบเขต (คำศัพท์) จะมีการปิด

ดังนั้นเกี่ยวกับตัวอย่างของคุณ:

// 1
for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i); // closure, only when loop finishes within 1000 ms,
    }, 1000);           // i = 10 for all functions
}
// 2
for(var i = 0; i < 10; i++) {
    (function(){
        var i2 = i; // closure of i (lexical scope: for-loop)
        setTimeout(function(){
            console.log(i2); // closure of i2 (lexical scope:outer function)
        }, 1000)
    })();
}
// 3
for(var i = 0; i < 10; i++) {
    setTimeout((function(i2){
        return function() {
            console.log(i2); // closure of i2 (outer scope)

        }
    })(i), 1000); // param access i (no closure)
}

ทั้งหมดกำลังใช้การปิด อย่าสับสนระหว่างการประหารชีวิตด้วยการปิด หากมีการปิด 'snapshot' ของการปิดในเวลาที่ไม่ถูกต้องค่าอาจไม่คาดคิด แต่จะมีการปิดตัวลงอย่างแน่นอน!

ลองดูทั้งสองวิธี:

(function(){
    var i2 = i;
    setTimeout(function(){
        console.log(i2);
    }, 1000)
})();

ประกาศและดำเนินการฟังก์ชันที่ไม่ระบุตัวตนที่ทำงานsetTimeout()ภายในบริบทของตนเองทันที มูลค่าปัจจุบันของiจะถูกเก็บรักษาไว้โดยการทำสำเนาลงไปi2ก่อน มันทำงานได้เพราะการดำเนินการทันที

setTimeout((function(i2){
    return function() {
        console.log(i2);
    }
})(i), 1000);

ประกาศบริบทการดำเนินการสำหรับฟังก์ชั่นภายในโดยที่มูลค่าปัจจุบันของiจะถูกเก็บไว้ในi2; วิธีนี้ยังใช้การดำเนินการทันทีเพื่อรักษาคุณค่า

สิ่งสำคัญ

มันควรจะกล่าวว่า semantics ที่รันไม่เหมือนกันระหว่างทั้งสองวิธี ฟังก์ชั่นภายในของคุณจะถูกส่งไปยังsetTimeout()ในขณะที่ฟังก์ชั่นภายในของเขาเรียกsetTimeout()ตัวเองว่า

การห่อรหัสทั้งสองข้างไว้ในอีกอันsetTimeout()นั้นไม่ได้พิสูจน์ว่าวิธีการที่สองเท่านั้นที่ใช้การปิด

ข้อสรุป

ทั้งสองวิธีใช้การปิดดังนั้นมันจึงเป็นเรื่องส่วนตัว วิธีที่สองนั้นง่ายกว่าที่จะ "ย้าย" ไปรอบ ๆ หรือพูดคุยทั่วไป

ฉันได้เขียนสิ่งนี้เมื่อครู่ก่อนเพื่อเตือนตัวเองว่าการปิดคืออะไรและทำงานอย่างไรใน JS

การปิดเป็นฟังก์ชันที่เมื่อมีการเรียกใช้ขอบเขตที่ถูกประกาศไม่ใช่ขอบเขตที่ถูกเรียก ใน javaScript ฟังก์ชั่นทั้งหมดจะมีลักษณะเช่นนี้ ค่าตัวแปรในขอบเขตคงอยู่ตราบใดที่ยังมีฟังก์ชันที่ยังคงชี้ไป ข้อยกเว้นของกฎคือ 'นี่' ซึ่งหมายถึงวัตถุที่ฟังก์ชั่นอยู่ภายในเมื่อมันถูกเรียก

var z = 1;
function x(){
    var z = 2; 
    y(function(){
      alert(z);
    });
}
function y(f){
    var z = 3;
    f();
}
x(); //alerts '2' 

หลังจากตรวจสอบอย่างใกล้ชิดดูเหมือนว่าคุณทั้งคู่กำลังใช้กำลังปิดอยู่

ในกรณีที่เพื่อนของคุณiมีการเข้าถึงในฟังก์ชั่นที่ไม่ระบุชื่อ 1 และi2เข้าถึงได้ในฟังก์ชั่นที่ไม่ระบุชื่อ 2 ที่console.logมีอยู่

ในกรณีของคุณคุณกำลังเข้าถึงi2ฟังก์ชั่นที่ไม่ระบุชื่อที่console.logมีอยู่ เพิ่มdebugger;คำสั่งก่อนconsole.logและในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์โครมภายใต้ "ตัวแปรขอบเขต" มันจะบอกภายใต้ขอบเขตของตัวแปร

พิจารณาดังต่อไปนี้ สิ่งนี้จะสร้างและสร้างฟังก์ชั่นfที่ปิดiใหม่ แต่ต่างกัน!:

i=100;

f=function(i){return function(){return ++i}}(0);
alert([f,f(),f(),f(),f(),f(),f(),f(),f(),f(),f()].join('\n\n'));

f=function(i){return new Function('return ++i')}(0);        /*  function declarations ~= expressions! */
alert([f,f(),f(),f(),f(),f(),f(),f(),f(),f(),f()].join('\n\n'));

ในขณะที่สิ่งต่อไปนี้ปิดใน "a" function "ตัวมันเอง"
(ตัวมันเอง! snippet หลังจากสิ่งนี้ใช้การอ้างอิงเดียวf)

for(var i = 0; i < 10; i++) {
    setTimeout( new Function('console.log('+i+')'),  1000 );
}

หรือเพื่อให้ชัดเจนยิ่งขึ้น:

for(var i = 0; i < 10; i++) {
    console.log(    f = new Function( 'console.log('+i+')' )    );
    setTimeout( f,  1000 );
}

NB คำจำกัดความสุดท้ายของfคือfunction(){ console.log(9) } ก่อนที่จะ 0ถูกพิมพ์

ข้อแม้! แนวคิดการปิดสามารถทำให้ไขว้เขวบีบบังคับจากสาระสำคัญของการเขียนโปรแกรมระดับประถมศึกษา:

for(var i = 0; i < 10; i++) {     setTimeout( 'console.log('+i+')',  1000 );      }

x-refs:
การปิด JavaScript ทำงานอย่างไร
คำอธิบายการปิด Javascript การปิด
(JS) ต้องใช้ฟังก์ชันภายในฟังก์ชัน
การทำความเข้าใจกับการปิดใน Javascript อย่างไร
ความสับสนของตัวแปรในระดับท้องถิ่นและระดับ Javascript

ฉันต้องการแบ่งปันตัวอย่างและคำอธิบายเกี่ยวกับการปิด ฉันทำตัวอย่างไพ ธ อนและตัวเลขสองตัวเพื่อสาธิตสถานะสแต็ก

def maker(a, b, n):
    margin_top = 2
    padding = 4
    def message(msg):
        print('\n’ * margin_top, a * n, 
            ' ‘ * padding, msg, ' ‘ * padding, b * n)
    return message

f = maker('*', '#', 5)
g = maker('', '♥’, 3)
…
f('hello')
g(‘good bye!')

ผลลัพธ์ของรหัสนี้จะเป็นดังนี้:

*****      hello      #####

      good bye!    ♥♥♥

นี่คือตัวเลขสองตัวเพื่อแสดงสแต็คและการปิดที่แนบกับวัตถุฟังก์ชัน

เมื่อฟังก์ชันถูกส่งคืนจาก maker

เมื่อฟังก์ชั่นถูกเรียกในภายหลัง

เมื่อฟังก์ชันถูกเรียกใช้ผ่านพารามิเตอร์หรือตัวแปรที่ไม่ใช่โลคอลโค้ดต้องการการเชื่อมโยงตัวแปรโลคัลเช่น margin_top, การเติมเต็มและ a, b, n เพื่อให้แน่ใจว่าโค้ดฟังก์ชันสามารถทำงานได้เฟรมสแต็คของฟังก์ชัน maker ที่หายไปนานแล้วควรเข้าถึงได้ซึ่งถูกสำรองไว้ในการปิดเราสามารถค้นหาพร้อมกับวัตถุข้อความของฟังก์ชัน