คู่มือ Ultimate สำหรับ Getters และ Setters ใน JavaScript

getters และ setters ฟังก์ชั่นหรือวิธีการที่ใช้ในการ ได้รับ และ ชุด ค่าของตัวแปร. แนวคิดของผู้ตั้งตัวคือ ทั่วไปในการเขียนโปรแกรมคอมพิวเตอร์: ภาษาการเขียนโปรแกรมระดับสูงเกือบทั้งหมดมาพร้อมกับชุดของไวยากรณ์ในการติดตั้ง getters และ setters รวมถึง JavaScipt.

ในโพสต์นี้เราจะดูว่าผู้ตั้งตัวรับคืออะไรและทำอย่างไร สร้างและใช้ใน JavaScript.

Getters-setters และ encapsulation

แนวคิดของ getters และ setters ถูกกล่าวถึงเสมอ ร่วมกับการห่อหุ้ม. การห่อหุ้มสามารถ เข้าใจในสองวิธี.

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

ประการที่สองมีคำจำกัดความที่เข้มงวดตามที่การห่อหุ้มจะทำ ซ่อนข้อมูล, เพื่อให้ไม่สามารถเข้าถึงได้จากรหัสอื่น, ยกเว้นผ่าน getters และ setters. ด้วยวิธีนี้เราไม่ได้จบลง เขียนทับข้อมูลสำคัญโดยไม่ได้ตั้งใจ ด้วยรหัสอื่น ๆ ในโปรแกรม.

สร้าง getters และ setters

1. ด้วยวิธีการ

ตั้งแต่ getters และ setters อยู่ ฟังก์ชั่นพื้น ที่ดึง / เปลี่ยนค่ามี มากกว่าหนึ่งวิธี เพื่อสร้างและใช้พวกเขา วิธีแรกคือ:

 var obj = foo: 'นี่คือค่าของ foo', getFoo: function () return this.foo; , setFoo: function (val) this.foo = val;  console.log (obj.getFoo ()); // "นี่คือค่าของ foo" obj.setFoo ('hello'); console.log (obj.getFoo ()); // "สวัสดี"

นี่คือ วิธีที่ง่ายที่สุด เพื่อสร้าง getters และ setters มีทรัพย์สิน foo และมีสองวิธี: getFoo และ setFoo ไปยัง ส่งคืนและกำหนดค่า ถึงคุณสมบัตินั้น.

2. ด้วยคำค้นหา

มากขึ้น “เป็นทางการ” และวิธีที่มีประสิทธิภาพในการสร้าง getters และ setters คือการใช้ ได้รับ และ ชุด คำหลัก.

ไปยัง สร้างทะเยอทะยาน, วาง ได้รับ คำหลัก ด้านหน้าของการประกาศฟังก์ชั่นที่จะทำหน้าที่เป็นวิธีการทะเยอทะยานและใช้ ชุด คำหลัก ในทางเดียวกันกับ สร้างตัวตั้ง. ไวยากรณ์มีดังนี้:

 var obj = fooVal: 'นี่คือค่าของ foo', รับ foo () return this.fooVal; , set foo (val) this.fooVal = val;  console.log (obj.foo); // "นี่คือค่าของ foo" obj.foo = 'hello'; console.log (obj.foo); // "สวัสดี" 

โปรดทราบว่าข้อมูลสามารถเป็นได้เท่านั้น เก็บไว้ภายใต้ชื่อคุณสมบัติ (fooVal) นั่นคือ ต่าง จากชื่อของวิธี getter-setter (foo) เนื่องจากคุณสมบัติถือ getter-setter ไม่สามารถเก็บข้อมูลได้ เช่นกัน.

วิธีไหนดีกว่ากัน?

หากคุณเลือกสร้าง getters และ setters ด้วยคำหลักคุณสามารถใช้ ผู้ประกอบการที่ได้รับมอบหมายเพื่อตั้งค่าข้อมูล และ ตัวดำเนินการ dot เพื่อรับข้อมูล, เช่นเดียวกับที่คุณจะเข้าถึง / กำหนดค่าของคุณสมบัติปกติ.

อย่างไรก็ตามหากคุณเลือกวิธีแรกในการเข้ารหัส getters และ setters คุณต้องเรียกใช้ setter และ getter method ใช้ไวยากรณ์การเรียกใช้ฟังก์ชัน เพราะมันเป็นฟังก์ชั่นทั่วไป (ไม่มีอะไรพิเศษเหมือนที่สร้างโดยใช้ ได้รับ และ ชุด คำหลัก).

นอกจากนี้ยังมีโอกาสที่คุณอาจท้ายโดยไม่ตั้งใจ กำหนดค่าอื่น ๆ กับคุณสมบัติที่เก็บเมธอด getter-setter และ สูญเสียพวกเขาอย่างสมบูรณ์! สิ่งที่คุณไม่ต้องกังวลในวิธีการในภายหลัง.

ดังนั้นคุณจะเห็นว่าทำไมฉันพูด เทคนิคที่สองแข็งแกร่งกว่า.

ป้องกันการเขียนทับ

ถ้าด้วยเหตุผลบางอย่างที่คุณชอบเทคนิคแรกให้สร้างคุณสมบัติที่เก็บเมธอด getter-setter อ่านเท่านั้น โดยการสร้างพวกเขา การใช้ Object.defineProperties. สร้างคุณสมบัติผ่าน Object.defineProperties, Object.defineProperty และ Reflect.defineProperty กำหนดค่าโดยอัตโนมัติ ไปยัง เขียนได้: false ซึ่งหมายความว่า อ่านเท่านั้น:

 / * การป้องกันการเขียนทับ * / var obj = foo: 'นี่คือค่าของ foo'; Object.defineProperties (obj, 'getFoo': value: function () return this.foo;, 'setFoo': value: ฟังก์ชัน (val) this.foo = val;) obj.getFoo = 66; // getFoo จะไม่ถูกเขียนทับ! console.log (obj.getFoo ()); // "นี่คือค่าของ foo" 

การดำเนินงานภายใน getters และ setters

เมื่อคุณแนะนำผู้ที่ได้รับและผู้ตั้งคุณสามารถไปข้างหน้าและ ดำเนินการกับข้อมูล ก่อนที่จะเปลี่ยนหรือคืนมัน.

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

 var obj = n: 67, รับ id () return 'ID คือ:' + this.n; , ตั้ง id (val) ถ้า (typeof val === 'number') this.n = val;  console.log (obj.id); // "ID คือ: 67" obj.id = 893; console.log (obj.id); // "ID คือ: 893" obj.id = 'hello'; console.log (obj.id); // "ID คือ: 893" 

ปกป้องข้อมูลด้วย getters และ setters

จนถึงตอนนี้เราครอบคลุมการใช้ตัวรับและตัวตั้งค่าในบริบทแรกของการห่อหุ้ม มาดูข้อที่สองกันเถอะ ซ่อนข้อมูลจากโค้ดภายนอก ด้วยความช่วยเหลือของ getters และ setters.

ข้อมูลที่ไม่มีการป้องกัน

การตั้งค่า getters และ setters ไม่ได้หมายความว่าข้อมูลสามารถเข้าถึงและเปลี่ยนแปลงได้ด้วยวิธีการเหล่านั้นเท่านั้น ในตัวอย่างต่อไปนี้มัน เปลี่ยนโดยตรง โดยไม่ต้องสัมผัสวิธี getter และ setter:

 var obj = fooVal: 'นี่คือค่าของ foo', รับ foo () return this.fooVal; , set foo (val) this.fooVal = val;  obj.fooVal = 'hello'; console.log (obj.foo); // "สวัสดี" 

เราไม่ได้ใช้ setter แต่ เปลี่ยนแปลงข้อมูลโดยตรง (fooVal). ข้อมูลที่เราตั้งไว้ในตอนแรก obj ไปแล้ว! เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น (โดยไม่ได้ตั้งใจ) คุณ ต้องการการป้องกัน สำหรับข้อมูลของคุณ คุณสามารถเพิ่มได้โดย การ จำกัด ขอบเขต ข้อมูลของคุณอยู่ที่ไหน คุณสามารถทำได้โดยทั้งสองอย่าง การกำหนดขอบเขตของบล็อก หรือ ฟังก์ชั่นการกำหนดขอบเขต.

1. การบล็อกการกำหนดขอบเขต

วิธีหนึ่งคือการ ใช้ขอบเขตบล็อก ภายในซึ่งข้อมูลจะถูกกำหนดโดยใช้ ปล่อย คำหลักไหน จำกัด ขอบเขต ไปยังบล็อกนั้น.

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

 / * BLOCK SCOPE เว้นวงเล็บไว้คนเดียว! * / let fooVal = 'นี่คือค่าของ foo'; var obj = รับ foo () return fooVal; , ตั้งค่า foo (val) fooVal = val fooVal = 'hello'; // จะไม่ส่งผลกระทบต่อ fooVal ภายใน block console.log (obj.foo); // "นี่คือค่าของ foo"

การเปลี่ยน / การสร้าง fooValนอกบล็อก จะไม่ส่งผลกระทบ fooVal อ้างอิงภายใน getters setters.

2. ฟังก์ชั่นการกำหนดขอบเขต

วิธีทั่วไปในการปกป้องข้อมูลด้วยการกำหนดขอบเขตคือโดย เก็บข้อมูลไว้ในฟังก์ชั่น และ คืนวัตถุ ด้วย getters และ setters จากฟังก์ชันนั้น.

 ฟังก์ชั่น myobj () var fooVal = 'นี่คือค่าของ foo'; return get foo () return fooVal; , ตั้งค่า foo (val) fooVal = val fooVal = 'hello'; // จะไม่ส่งผลต่อ fooVal var obj = myobj (); console.log (obj.foo); // "นี่คือค่าของ foo"

วัตถุ (พร้อมกับ foo () getter-setter ข้างใน) ส่งคืนโดย myObj () ฟังก์ชั่นคือ บันทึกไว้ใน obj, แล้ว obj จะใช้ในการ โทร getter และ setter.

3. การปกป้องข้อมูลโดยไม่มีการกำหนดขอบเขต

ยังมีอีกวิธีหนึ่งที่คุณสามารถปกป้องข้อมูลของคุณจากการถูกเขียนทับได้ โดยไม่ จำกัด ขอบเขต. ตรรกะเบื้องหลังจะเป็นดังนี้: คุณจะเปลี่ยนข้อมูลได้อย่างไรถ้าคุณไม่รู้ว่าเรียกว่าอะไร?

ถ้าข้อมูลมี ชื่อตัวแปร / คุณสมบัติที่สามารถทำซ้ำได้อย่างง่ายดาย, โอกาสที่จะไม่มีใคร (แม้แต่ตัวเราเอง) กำลังจะเขียนทับมันด้วยการกำหนดค่าบางอย่างให้กับชื่อตัวแปร / คุณสมบัตินั้น.

 var obj = s89274934764: 'นี่คือค่าของ foo', รับ foo () return this.s89274934764; , set foo (val) this.s89274934764 = val;  console.log (obj.foo); // "นี่คือค่าของ foo" 

ดูสินั่นเป็นวิธีหนึ่งในการจัดการสิ่งต่าง ๆ แม้ว่าชื่อที่ฉันเลือกนั้นไม่ใช่ชื่อที่ดีจริงๆ แต่คุณก็สามารถทำได้ ใช้ค่าหรือสัญลักษณ์แบบสุ่ม เพื่อสร้างชื่อคุณสมบัติตามที่ Derick Bailey เสนอในโพสต์บล็อกนี้ เป้าหมายหลักคือการ เก็บข้อมูลที่ซ่อนอยู่ จากรหัสอื่นและให้คู่ getter-setter เข้าถึง / อัพเดต.

เมื่อใดที่คุณควรใช้ getters และ setters?

ตอนนี้เป็นคำถามใหญ่: คุณเริ่มมอบหมายให้ผู้ตั้งค่าและผู้ตั้งค่า ข้อมูลทั้งหมดของคุณ ตอนนี้?

ถ้าคุณคือ การซ่อนข้อมูล, แล้วมี ไม่มีทางเลือกอื่น.

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