การอภิปรายวัตถุ JavaScript

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

1. ตัวอักษรวัตถุ:

ต่อไปนี้เป็นเนื้อหาที่ยกมา: บุคคล var = { ชื่อ:โมฆะ, setName: ฟังก์ชั่น (ชื่อ) { this.name = ชื่อ; ส่งคืน this.name; - getName:ฟังก์ชั่น(){ การแจ้งเตือน (this.name); - -

วิธีการเขียนโปรแกรมที่มีคุณสมบัติ JavaScript ประกอบด้วยชื่อแอตทริบิวต์ วิธีการ setName และ getName ในหน่วยคลาส มันค่อนข้างง่ายที่จะเรียกเมธอด person.setname('R') จากจุดนี้เป็นต้นไป สิ่งนี้จะชี้ไปที่บุคคลและ คุณลักษณะและวิธีการของบุคคลทั้งหมด ไม่เป็นส่วนตัวสามารถเรียกได้

โหมดการเรียกคอนสตรัคเตอร์ 2.Prototype

ต่อไปนี้เป็นเนื้อหาที่ยกมา: var คน = ฟังก์ชั่น(){ นี้.ชื่อ = null; - Person.prototype.setName = ฟังก์ชั่น (ชื่อ) { this.name = ชื่อ; - Person.prototype.getName = ฟังก์ชั่น(){ การแจ้งเตือน (this.name); -

นอกจากนี้ยังเป็นวิธีการเขียนโปรแกรมทั่วไปในการสร้างคลาส Person จากนั้นใช้ต้นแบบเพื่อขยายคลาสและเพิ่มเมธอด ความแตกต่างที่ใหญ่ที่สุดจากอ็อบเจ็กต์ตัวอักษรคือเมื่อเรียกใช้เมธอดของคลาสนี้ คุณต้องใช้ new ก่อน (คล้ายกับ Java การเรียกคลาส) var p = new Person();p.getName(); หากคุณสร้างมันโดยตรงโดยไม่ใช้ new จะเกิดข้อผิดพลาดขึ้น และข้อผิดพลาดนี้จะไม่ถูกรายงานและหาสาเหตุของข้อผิดพลาดได้ยาก มาจากการชี้ไปที่ Person.prototypel และ Person ไม่มีเมธอด setName

3. ใช้ฟังก์ชันที่ไม่ระบุชื่อสำหรับการเขียนโปรแกรมเชิงฟังก์ชัน

ต่อไปนี้เป็นเนื้อหาที่ยกมา: (การทำงาน(){ ชื่อวาร์; var setName = ฟังก์ชั่น (n) { ชื่อ = น; - window['person']['setName'] = setName; var getName = ฟังก์ชั่น(){ การแจ้งเตือน (ชื่อ); - window['person']['getName'] = getName; -

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

4. การเขียนโปรแกรมในชั้นเรียน (ไม่รู้จะเรียกว่าอะไร)

ต่อไปนี้เป็นเนื้อหาที่ยกมา: คน var = function(){ ชื่อ var = null; กลับ{ setName:ฟังก์ชั่น(n){ ชื่อ = น; - getName:ฟังก์ชั่น(){ การแจ้งเตือน (ชื่อ); - - -

มันคล้ายกับ object literals มาก ยกเว้นว่าสิ่งนี้ถูกละเว้น และวิธีการและคุณสมบัติสามารถทำให้เป็นแบบส่วนตัวได้

5.ห่วงโซ่วิธี

ต่อไปนี้เป็นเนื้อหาที่ยกมา: var คน = ฟังก์ชั่น(){ นี้.ชื่อ = null; - บุคคล.ต้นแบบ = { setName: ฟังก์ชั่น (ชื่อ) { this.name = ชื่อ; คืนสิ่งนี้; - getName:ฟังก์ชั่น(){ การแจ้งเตือน (this.name); คืนสิ่งนี้; - -

jQuery เป็น method chaining ไลบรารี่ที่คลาสสิกที่สุด หากคุณยังไม่เข้าใจว่า method chaining คืออะไร ลองดูตัวอย่างนี้:

ต่อไปนี้เป็นเนื้อหาที่ยกมา: var p = บุคคลใหม่ (); p.setName('ทอม').getName().setName('เรย์').getName();

เนื่องจากแต่ละวิธีลงท้ายด้วย return this จึงมีการสร้างคลาสแบบผูกมัดเมธอด

นี่เป็นวิธีการที่ฉันคุ้นเคยมากกว่า ทุกคนมีลักษณะเฉพาะของตัวเอง จึงมีวิธีการมากมายไม่รู้จบ อย่างไรก็ตาม ฉันอยากจะสำรวจประเด็นต่อไปนี้

1. เกี่ยวกับพอยน์เตอร์นี้

สิ่งนี้ใช้เมื่อสร้างหมวดหมู่ต่างๆ แต่บทบาทของสิ่งนี้คืออะไร อันที่จริง สิ่งนี้มีบทบาทสำคัญในการใช้ซ้ำและการสืบทอด มาดูตัวอย่างการสืบทอดกันก่อน:
ขั้นแรกให้สร้างคลาส Person:

ต่อไปนี้เป็นเนื้อหาที่ยกมา: var คน = ฟังก์ชั่น(){ นี้.ชื่อ = null; - Person.prototype.setName = ฟังก์ชั่น (ชื่อ) { this.name = ชื่อ; - Person.prototype.getName = ฟังก์ชั่น(){ การแจ้งเตือน (this.name); - Person.prototype.getAge = ฟังก์ชั่น(){ อายุ = this.age || ''; การแจ้งเตือน(อายุ); -

จากนั้นสร้างคลาส Children และรวมวิธีการและคุณสมบัติทั้งหมดของ Person:

ต่อไปนี้เป็นเนื้อหาที่ยกมา: var Children = ฟังก์ชั่น (อายุ) { นี้.ชื่อ = null; this.age = อายุ; - Children.prototype = บุคคลใหม่ (); // สืบทอดคุณสมบัติและวิธีการของบุคคล Children.prototype.ageJudge = function(){ //เพิ่มวิธีการใหม่ให้กับ Children ด้วย ถ้า(this.age > 18){ alert('ผู้ใหญ่~'); } อื่น { alert('อายุต่ำกว่า 18 ปี~'); - - Children.prototype.getName = function(){ //แทนที่เมธอด getName var about = this.name + ' ' + this.age; การแจ้งเตือน (เกี่ยวกับ); - var tom = เด็กใหม่(12); อายุ var = tom.getAge(); //12 var Judg = tom.ageJudge(); //อายุต่ำกว่า 18 ปี~ var setN = tom.setName('ทอม'); var get = tom.getName(); //ทอม 12

นี่คือการสืบทอด จากนั้นเราจะดูที่ฟังก์ชันง่ายๆ ที่นำมาใช้ซ้ำ:

ต่อไปนี้เป็นเนื้อหาที่ยกมา: var SetColor = ฟังก์ชั่น () { this.style.พื้นหลังสี = '#000'; //นี่ชี้ไปที่หน้าต่าง - document.body.onclick = SetColor; //สิ่งนี้ชี้ไปที่เนื้อหาในเวลานี้ documnet.getElementById('color').onmouseout = SetColor; //นี่ชี้ไปที่ documnet.getElementById('color') หลังจากเห็นฟังก์ชั่นนี้แล้ว ก็ต้องเกิดความเข้าใจใหม่เกี่ยวกับเรื่องนี้ เลยมีคำถามว่า ควรใช้หรือไม่ ลองมาดูตัวอย่างง่ายๆ กัน var setColor = { เริ่มต้น: ฟังก์ชั่น (obj) { this.obj = obj; // นี่ชี้ไปที่ setColor this.obj.onclick = this.color; - สี: ฟังก์ชั่น () { this.style.พื้นหลังสี = '#000'; //นี่ชี้ไปที่ obj - -

ในชั้นเรียนเดียว สิ่งนี้ชี้ให้เห็นถึงสองจุด ซึ่งบางครั้งทำให้ผู้คนสับสน คนที่เพิ่งเรียนรู้จะสับสนกับสิ่งนี้ และเปลี่ยนวิธีการเขียนโค้ดเล็กน้อย:

ต่อไปนี้เป็นเนื้อหาที่ยกมา: var setColor = { เริ่มต้น: ฟังก์ชั่น (obj) { setColor.obj = obj; setColor.obj.onclick = setColor.color; - สี: ฟังก์ชั่น () { this.style.BackgroundColor = '#000'; //สิ่งนี้สามารถอำนวยความสะดวกในการนำเมธอดกลับมาใช้ใหม่ได้ - -

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

ต่อไปนี้เป็นเนื้อหาที่ยกมา: var คน = ฟังก์ชั่น(){ นี้.ชื่อ = null; - Person.prototype.setName = ฟังก์ชั่น (ชื่อ) { this.name = ชื่อ; - Person.setName('tom'); // วิธีที่ผิด: สิ่งนี้ในเมธอด setName จะชี้ไปที่ Person.prototypel บุคคลไม่มีเมธอด setName

ตามที่กล่าวไว้ก่อนหน้านี้ หากไม่ได้เขียนเป็น var p = new Person();p.setName('tom'); สิ่งนี้ในคลาสนี้จะชี้ไปที่ Person.prototypel โดยตรง ข้อผิดพลาดนี้จะไม่เกิดขึ้นระหว่างการคอมไพล์หรือรันไทม์ ข้อผิดพลาดจะถูกรายงาน บางครั้งมันอาจทำให้ปวดหัว ดังนั้นเวลาเขียนโค้ด ฉันมักจะเลือกสิ่งนี้อย่างระมัดระวัง

2. การห่อหุ้มคลาส

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

ต่อไปนี้เป็นเนื้อหาที่ยกมา: บุคคล var = { ชื่อ:โมฆะ, init:ฟังก์ชั่น(ชื่อ){ this.setName(ชื่อ); - setName: ฟังก์ชั่น (ชื่อ) { this.name = ชื่อ; ส่งคืน this.name; - - person.init('ทอม'); //tom

ในคลาสนี้มีทั้งหมด 2 วิธี คือ init และ setName และเราต้องการเรียกใช้ setName จาก init เท่านั้น หรือวิธีการต่างๆ ที่จะเพิ่มเข้าไปในอนาคตและไม่ต้องการให้ปรากฏ:

person.setName('ทอม'); //tom

เรียกเมธอด setName โดยตรง คุณต้องการให้เมธอด setName เป็นแบบส่วนตัว และแอตทริบิวต์ name จะเป็นแบบส่วนตัว ซึ่งจะป้องกันไม่ให้โปรแกรมเมอร์รายอื่นเรียกเมธอดที่คุณไม่ต้องการให้ถูกเรียกเมื่อใช้คลาสของคุณ
แล้วเราควร encapsulate class ให้ดีได้อย่างไร? ลองวิธีการเขียนโปรแกรมอื่นแล้วดูว่าเวอร์ชันที่แก้ไขเป็นอย่างไรบ้าง:

ต่อไปนี้เป็นเนื้อหาที่ยกมา: คน var = function(){ ชื่อ var = null; var setName = ฟังก์ชั่น (n) { ชื่อ = น; ชื่อผู้ส่งคืน; - กลับ{ เริ่มต้น: ฟังก์ชั่น (n) { ชื่อชุด(n); - - -

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