เผยแพร่ครั้งแรกที่: https://mingjiezhang.github.io/
ใน JavaScript วัตถุนี้ถูกผูกไว้กับสภาพแวดล้อมการดำเนินการตามฟังก์ชันรันไทม์ (นั่นคือบริบท)
เริ่มต้นด้วยการสาธิตใน React
เมื่อ Facebook อัปเดตเมื่อเร็ว ๆ นี้ React คลาสใน ES6 จะถูกเพิ่มลงในวิธีการสร้างส่วนประกอบ Facebook ยังแนะนำว่าการสร้างส่วนประกอบใช้กำหนดคลาสส่วนประกอบโดยการกำหนดคลาสที่สืบทอดมาจาก React.Component การสาธิตอย่างเป็นทางการ:
คลาส LikeButton ขยาย React.Component {constructor () {super (); this.state = {liked: false}; this.handleclick = this.handleclick.bind (นี่);} handleclick () {this.setstate ({liked:! 'ชอบ': 'haven/' t liked '; return (<div onclick = {this.handleclick}> คุณ {text} สิ่งนี้คลิกเพื่อสลับ </div>);}} reactdom.render (<likebutton />มีการใช้งานมากมายในการสาธิตข้างต้น ในชั้นเรียน LikeButton ขยาย React.Component เราประกาศชั้นเรียนเพราะสิ่งนี้ถูกกำหนดโดยบริบทของมันโดยเฉพาะดังนั้นเราจึงไม่สามารถรู้การใช้งานนี้ในคำจำกัดความของคลาส มันเทียบเท่ากับคลาสใหม่ที่กำหนดไว้ข้างต้นการเรียกฟังก์ชัน constructor () ครั้งแรกบริบทนี้ของสิ่งนี้ state เป็นวัตถุอินสแตนซ์; ในทำนองเดียวกันบริบทของ this.state.liked ในฟังก์ชั่น render () ก็เป็นวัตถุเช่นกัน ปัญหาคือ onclick = {this.handleclick} ไม่มีปัญหาในการอ้างอิงถึงฟังก์ชั่นนี้และบริบทที่นี่คือวัตถุ
ในเวลานี้ปัญหาคือใน react.createClass, handleclick () จะผูกกับอินสแตนซ์ LikeButton โดยอัตโนมัติเมื่อเหตุการณ์ onClick ถูกเรียกใช้ ในเวลานี้บริบทของฟังก์ชั่นนี้เป็นอินสแตนซ์ อย่างไรก็ตามในการเขียนคลาส ES6 Facebook ยกเลิกการเชื่อมโยงอัตโนมัติ หลังจากอินสแตนซ์ LikeButton บริบทของ handleclick () เป็นอินสแตนซ์การสนับสนุนของ DIV (อินสแตนซ์การสนับสนุน) และบริบทของ handleclick () เดิมถูกผูกไว้เป็นอินสแตนซ์ของ LikeButton เรามีวิธีแก้ไขปัญหานี้หลายอย่าง
ใช้ฟังก์ชัน bind () เพื่อเปลี่ยนบริบทของสิ่งนี้
คุณสามารถใช้ฟังก์ชั่น Constructor () ในการประกาศคลาส
this.handleclick = this.handleclick.bind (นี่);
วิธีนี้คือการผูก () การผูกและใช้หลายครั้ง ในวิธีนี้หลังจากประกาศอินสแตนซ์แล้วเราสามารถใช้ฟังก์ชัน handleclick () ได้ทุกที่ในอินสแตนซ์และบริบทของฟังก์ชัน handleclick () นี้เป็นวัตถุอินสแตนซ์แบบไม่ชอบ
นอกจากนี้เรายังสามารถผูกบริบทนี้กับวัตถุอินสแตนซ์ของ LikeButton ที่ใช้ฟังก์ชัน รหัสมีดังนี้
<div onclick = {this.handleclick.bind (นี่)}> คุณ {text} สิ่งนี้ คลิกเพื่อสลับ </div>วิธีนี้ต้องการให้เราผูกกับวัตถุส่วนประกอบทุกครั้งที่ใช้ฟังก์ชัน bind ()
ฟังก์ชั่นลูกศรของ ES6
ฟังก์ชั่นลูกศร => ได้รับการเพิ่มใน ES6 นอกเหนือจากความสะดวกสบายฟังก์ชั่นลูกศรมีคุณสมบัติอื่นที่จะผูกฟังก์ชั่นนี้กับบริบทที่กำหนดไว้ คุณสมบัตินี้ยังสามารถช่วยเราแก้ปัญหานี้ได้ ใช้รหัสต่อไปนี้:
<div onclick = {() => this.handleclick ()}> คุณ {text} สิ่งนี้ คลิกเพื่อสลับ </div>วิธีนี้บริบทของ this.handleclick () จะถูกผูกไว้กับวัตถุอินสแตนซ์ LikeButton โดยส่วนตัวแล้วฉันเชื่อว่าการใช้ฟังก์ชั่นลูกศรทำให้ JavaScript ใกล้เคียงกับรูปแบบการเขียนโปรแกรมเชิงวัตถุ
สรุปนี้
สาระสำคัญของสิ่งนี้คือ: สิ่งนี้ไม่มีส่วนเกี่ยวข้องกับขอบเขต แต่มีเพียงบริบทการดำเนินการ
ข้างต้นเป็นวิธีการสร้างองค์ประกอบนี้ใน ES6 ใน React ที่ตัวแก้ไขแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!