เหตุใดตัวดีบัก Chrome จึงคิดว่าตัวแปรโลคัลปิดไม่ได้ถูกกำหนด?

ด้วยรหัสนี้:

function baz() {
  var x = "foo";

  function bar() {
    debugger;
  };
  bar();
}
baz();

ฉันได้รับผลลัพธ์ที่ไม่คาดคิด:

เมื่อฉันเปลี่ยนรหัส:

function baz() {
  var x = "foo";

  function bar() {
    x;
    debugger;
  };
  bar();
}

ฉันได้รับผลลัพธ์ที่คาดหวัง:

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

ในขณะเดียวกันเครื่องมือ Firefox dev ให้พฤติกรรมที่คาดหวังในทั้งสองสถานการณ์

เกิดอะไรขึ้นกับ Chrome ที่โปรแกรมดีบั๊กทำงานได้สะดวกกว่า Firefox ฉันได้สังเกตพฤติกรรมนี้มาระยะหนึ่งแล้วและรวมถึงรุ่น 41.0.2272.43 เบต้า (64 บิต)

มันเป็นเครื่องมือจาวาสคริปต์ของ Chrome "แบน" ฟังก์ชั่นเมื่อมันสามารถ?

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

ฉันเข้าใจว่ามักจะมีนิสัยใจคอที่มีขอบเขตและคำจำกัดความแปรปรวนเมื่อใช้ดีบักเกอร์แบบโต้ตอบ แต่สำหรับฉันแล้วดูเหมือนว่าตามข้อกำหนดภาษานั้นควรจะเป็นทางออกที่ดีที่สุดสำหรับนิสัยใจคอเหล่านี้ ดังนั้นฉันอยากรู้ว่านี่เป็นเพราะ Chrome มีการปรับให้เหมาะสมยิ่งกว่า Firefox หรือไม่ และการเพิ่มประสิทธิภาพเหล่านี้สามารถปิดการใช้งานได้อย่างง่ายดายในระหว่างการพัฒนาหรือไม่ (อาจต้องปิดการใช้งานเมื่อเปิดเครื่องมือ dev หรือไม่)

นอกจากนี้ฉันสามารถทำซ้ำสิ่งนี้ด้วยจุดพักเช่นเดียวกับdebuggerคำสั่ง

ฉันพบรายงานปัญหา v8 ซึ่งมีความแม่นยำเกี่ยวกับสิ่งที่คุณถาม

ตอนนี้เพื่อสรุปสิ่งที่กล่าวในรายงานปัญหานั้น v8 สามารถจัดเก็บตัวแปรที่อยู่ในเครื่องไปยังฟังก์ชันบนสแต็กหรือในวัตถุ "บริบท" ซึ่งอาศัยอยู่บนฮีป มันจะจัดสรรตัวแปรท้องถิ่นในสแต็คตราบเท่าที่ฟังก์ชั่นไม่ได้มีฟังก์ชั่นภายในที่อ้างอิงถึงพวกเขา มันเป็นการเพิ่มประสิทธิภาพ หากฟังก์ชั่นภายในใด ๆอ้างถึงตัวแปรท้องถิ่นตัวแปรนี้จะถูกวางในวัตถุบริบท (เช่นบนฮีปแทนที่จะเป็นบนสแต็ก) กรณีของevalเป็นพิเศษ: ถ้ามันถูกเรียกโดยฟังก์ชั่นภายในตัวแปรท้องถิ่นทั้งหมดจะถูกวางในวัตถุบริบท

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

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

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

นี่คือตัวอย่างของ "ถ้าฟังก์ชันภายในอ้างถึงตัวแปรวางไว้ในวัตถุบริบท" ถ้าคุณเรียกคุณนี้จะสามารถเข้าถึงxที่debuggerคำสั่งถึงแม้xจะใช้เฉพาะในfooฟังก์ชั่นที่ไม่เคยเรียกว่า !

function baz() {
  var x = "x value";
  var z = "z value";

  function foo () {
    console.log(x);
  }

  function bar() {
    debugger;
  };

  bar();
}
baz();

Like @Louis กล่าวว่าเกิดจากการปรับแต่ง v8 คุณสามารถเข้าไปที่ Call stack เพื่อวางเฟรมที่ตัวแปรนี้มองเห็นได้:

หรือแทนที่debuggerด้วย

eval('debugger');

eval จะคลี่คลายก้อนปัจจุบัน

ฉันยังสังเกตเห็นสิ่งนี้ใน nodejs ผมเชื่อว่า (และผมยอมรับว่านี้เป็นเพียงการคาดเดา) ว่าเมื่อรหัสจะรวบรวมถ้าxไม่ปรากฏภายในbarก็ไม่ได้ทำให้สามารถใช้ได้ภายในขอบเขตของx barนี่อาจทำให้มีประสิทธิภาพมากกว่าเล็กน้อย ปัญหาคือบางคนลืม (หรือไม่ได้ดูแล) ว่าแม้ไม่มีxในbarคุณอาจตัดสินใจที่จะเรียกใช้ดีบักและด้วยเหตุนี้ยังคงต้องเข้าถึงจากภายในxbar

ว้าวน่าสนใจจริงๆ!

เป็นคนอื่นได้กล่าวถึงนี้น่าจะเกี่ยวข้องกับการ แต่มากขึ้นโดยเฉพาะที่เกี่ยวข้องกับการscope debugger scopeเมื่อสคริปต์ที่ถูกฉีดถูกประเมินในเครื่องมือของนักพัฒนาดูเหมือนว่าจะกำหนด a ScopeChainซึ่งส่งผลให้เกิดการเล่นโวหารบางอย่าง (เนื่องจากถูกผูกไว้กับขอบเขตของตัวตรวจสอบ / ดีบักเกอร์) รูปแบบของสิ่งที่คุณโพสต์คือ:

(แก้ไข - ที่จริงแล้วคุณพูดถึงเรื่องนี้ในคำถามเดิมของคุณใช่ฉันไม่ดี! )

function foo() {
  var x = "bat";
  var y = "man";

  function bar() {
    console.log(x); // logs "bat"

    debugger; // Attempting to access "y" throws the following
              // Uncaught ReferenceError: y is not defined
              // However, x is available in the scopeChain. Weird!
  }
  bar();
}
foo();

สำหรับผู้ที่มีความทะเยอทะยานและ / หรืออยากรู้อยากเห็นขอบเขต (heh) ออกมาเพื่อดูว่าเกิดอะไรขึ้น:

https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/inspector https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/debugger

ฉันสงสัยว่าสิ่งนี้เกี่ยวข้องกับตัวแปรและฟังก์ชั่นการยก JavaScript นำการประกาศตัวแปรและฟังก์ชันทั้งหมดไปไว้ที่ด้านบนสุดของฟังก์ชันที่กำหนดไว้ข้อมูลเพิ่มเติมที่นี่: http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

ฉันเดิมพันว่า Chrome กำลังเรียกจุดพักพร้อมตัวแปรที่ไม่สามารถใช้งานได้กับขอบเขตเนื่องจากไม่มีสิ่งใดในฟังก์ชั่น ดูเหมือนว่าจะใช้งานได้:

function baz() {
  var x = "foo";

  function bar() {
    console.log(x); 
    debugger;
  };
  bar();
}

เช่นนี้:

function baz() {
  var x = "foo";

  function bar() {
    debugger;
    console.log(x);     
  };
  bar();
}

หวังว่าสิ่งนี้และ / หรือลิงก์ด้านบนจะช่วยได้ นี่เป็นคำถาม SO ที่ฉันชอบมาก BTW :)