ES6 เรียกใช้ฟังก์ชันลูกศรทันที

เหตุใดจึงทำงานในNode.jsคอนโซล (ทดสอบใน 4.1.1 และ 5.3.0) แต่ไม่ทำงานในเบราว์เซอร์ (ทดสอบใน Chrome) Okการป้องกันรหัสนี้ควรสร้างและเรียกใช้ฟังก์ชั่นที่ไม่ระบุชื่อที่บันทึก

() => {
  console.log('Ok');
}()

นอกจากนี้ในขณะที่การทำงานข้างต้นในโหนดนี้ไม่ทำงาน:

n => {
  console.log('Ok');
}()

หรือสิ่งนี้:

(n) => {
  console.log('Ok');
}()

มีอะไรแปลก ๆ คือเมื่อเพิ่มพารามิเตอร์แล้วมันจะส่ง a ไปSyntaxErrorที่ส่วนที่เรียกใช้ทันที

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

(() => {
  console.log('Ok');
})()

เทียบเท่ากับIIFE

(function(){
   console.log('Ok')
})();

และเหตุผลที่เป็นไปได้ว่าทำไมสิ่งนี้ถึงใช้ได้ใน Node.js แต่ไม่ใช่ใน chrome เพราะ parser ตีความว่ามันเป็นฟังก์ชั่นการดำเนินการด้วยตนเองเช่นนี้

function() { console.log('hello'); }();

ทำงานได้ดีในNode.jsนี่คือการแสดงออกของฟังก์ชั่นและโครเมี่ยมและ Firefox และเบราว์เซอร์ส่วนใหญ่ตีความมันด้วยวิธีนี้ คุณต้องเรียกใช้ด้วยตนเอง

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

เกี่ยวกับรุ่นที่เป็นพารามิเตอร์นี้จะใช้งานได้

((n) => {
  console.log('Ok');
})()

สิ่งเหล่านี้ไม่สามารถใช้งานได้หากไม่มีวงเล็บ

ทำไม?

เพราะตามข้อมูลจำเพาะ:

1. ArrowFunctionอยู่ในรายการAssignment Expression
2. LHS ของCallExpressionจะต้องเป็นMemberExpression , SuperCallหรือCallExpression

ดังนั้นArrowFunctionไม่สามารถจะอยู่ใน LHS ของที่CallExpression

สิ่งนี้มีประสิทธิภาพหมายถึงในวิธีการที่=>ควรจะตีความก็คือว่ามันทำงานในประเภทเดียวกันของระดับเป็นผู้ประกอบการที่ได้รับมอบหมาย=, +=ฯลฯ

ความหมาย

• x => {foo}() ไม่เป็น(x => {foo})()
• ล่ามพยายามที่จะตีความมันเป็น x => ({foo}())
• ดังนั้นมันจึงยังคงเป็นSyntaxError
• ดังนั้นล่ามจึงตัดสินใจว่า(จะต้องมีความผิดและส่งSyntaxError

มีข้อผิดพลาดใน Babel เกี่ยวกับที่นี่เช่นกัน

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

> 3 + 2
< 5

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

นี่เป็นหนึ่งในสาเหตุที่รหัส ES6 เปลือยในสคริปต์ทำงานได้ดี แต่ไม่ได้อยู่ในคอนโซล Chrome Dev Tools

ลองดำเนินการนี้ใน Node และคอนโซล Chrome:

{ let a = 3 }

ในโหนดหรือ<script>แท็กมันทำงานได้ดี Uncaught SyntaxError: Unexpected identifierแต่ในคอนโซลจะช่วยให้ นอกจากนี้ยังให้ลิงก์ไปยังแหล่งข้อมูลในรูปแบบVMxxx:1ที่คุณสามารถคลิกเพื่อตรวจสอบแหล่งที่ได้รับการประเมินซึ่งแสดงเป็น:

({ let a = 3 })

แล้วทำไมมันถึงทำเช่นนี้?

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

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

นี่เป็นตัวอย่างที่ดีของบางสิ่งที่คล้ายกันมาก:

https://stackoverflow.com/a/28431346/46588

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

กล่าวโดยย่อ:คอนโซลพยายามจำลองบริบทการดำเนินการทั่วโลกอย่างแม่นยำที่สุด แต่เนื่องจากข้อ จำกัด ของการโต้ตอบกับเอ็นจิ้น v8 และความหมายของ JavaScript บางครั้งก็ยากหรือแก้ไม่ได้

ฉันถามคำถามเช่นนี้:

@getify ฉันมีคำถามนี้: ในการสร้างรูปแบบ #IIFE เราใช้ parans รอบการประกาศฟังก์ชั่นเพื่อแปลงเป็นนิพจน์ฟังก์ชั่นแล้วเรียกมัน ตอนนี้ในฟังก์ชั่น IIFE ของลูกศรทำไมเราต้องมี parans ด้วย! ฟังก์ชั่นลูกศรไม่ได้แสดงออกมาเป็นค่าเริ่มต้นอยู่แล้ว!

และนี่คือคำตอบของ Kyle Simpson:

ฟังก์ชั่นลูกศรเป็น expr แต่เราต้องการ parens รอบ b / c ของ "โอเปอเรเตอร์สำคัญ" (sorta) ดังนั้น parens สุดท้ายที่จะเรียกใช้ Arrow-IIFE ใช้กับฟังก์ชั่นทั้งหมดและไม่ใช่แค่สัญลักษณ์สุดท้ายของร่างกาย .

x => console.log(x)(4)

VS

(x => console.log(x))(4)

- getify (@getify) 12 มิถุนายน 2563