การโยงฟังก์ชัน
การโยงฟังก์ชัน ไม่มีอะไรนอกจากการจัดกลุ่มฟังก์ชันในบรรทัดเดียวโดยใช้เครื่องหมายจุด . การโยงประเภทนี้ทำให้โค้ดมีความกระชับและยังช่วยเพิ่มประสิทธิภาพอีกด้วย ในที่นี้เราจะมาเรียนรู้การโยงฟังก์ชัน โดยใช้วัตถุธรรมดา
a) ไม่มีการโยงฟังก์ชัน
ในตัวอย่างต่อไปนี้ วัตถุ 'obj' จะถูกสร้างขึ้นและในวัตถุนั้น ทรัพย์สินสาธารณะ เรียกว่า 'i' โดยใช้คำสำคัญ 'this' และเริ่มต้นกำหนดค่า 0 ในภายหลังในฟังก์ชันที่ผู้ใช้กำหนดที่เรียกว่า add(), subtract() และ print() จะถูกสร้างขึ้นภายในวัตถุ 'obj' เดียวกัน ตอนนี้วัตถุ "obj" จะทำหน้าที่เหมือนคลาส (เป็นคุณสมบัติที่สามารถแชร์กับวัตถุอื่นได้)
ตอนนี้มีการสร้างอ็อบเจ็กต์ที่เรียกว่า 'x' (กำหนดโดยผู้ใช้) ขึ้นโดยใช้คีย์เวิร์ด 'ใหม่' และทำให้เข้าถึงได้โดยใช้คุณสมบัติของอ็อบเจกต์ "obj" เนื่องจากฟังก์ชันที่ประกาศภายใน "obj" เช่น add(), subtract() และ print() จะไม่ถูกส่งกลับ การโยงฟังก์ชัน เป็นไปไม่ได้และ ไม่ได้กำหนด จะแสดงเป็นเอาต์พุตในขณะที่แต่ละฟังก์ชัน (unchained) จะดำเนินการเอาต์พุตเป็น 3 (ผู้ใช้ระบุ '5-2')
ตัวอย่าง
<html>
<body>
<script>
var obj = function(){
this.i = 0;
this.add = function(i){
this.i += i;
};
this.subtract = function(i){
this.i -= i;
};
this.print = function(){
document.write(this.i);
document.write("</br>");
document.write(x.add(3)); // returns undefined
}
}
var x = new obj();
x.add(5);
x.subtract(2);
x.print(); // 5-2 = 3 so prints 3.
x.add(5).subtract(2).print(); // function chaining is not possible so undefined
</script>
</body>
</html> ผลลัพธ์
3 undefined
b) ด้วยฟังก์ชัน chaining
ในตัวอย่างต่อไปนี้ เมื่อพิจารณาจากสถานการณ์ตัวอย่างข้างต้น โดยใช้คำสั่ง "return this" ที่ผู้ใช้กำหนด ฟังก์ชันต่างๆ เช่น add() และ subtract() จะถูกส่งคืน และทำให้ฟังก์ชัน chaining เป็นไปได้โดยแสดง 3 เป็นเอาต์พุต
ตัวอย่าง
<html>
<body>
<script>
var obj = function(){
this.i = 0;
this.add = function(i){
this.i += i;
return this;
};
this.subtract = function(i){
this.i -= i;
return this;
};
this.print = function(){
document.write(this.i);
}
}
var x = new obj();
x.add(5).subtract(2).print();
</script>
</body>
</html> ผลลัพธ์
3
