Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > บทความจากสมาชิก > JavaScript and Class Object การสร้างและใช้งานคลาสใน JavaScript



 
Clound SSD Virtual Server

JavaScript and Class Object การสร้างและใช้งานคลาสใน JavaScript

JavaScript and Class Object การสร้างและใช้งานคลาสใน JavaScript เราทราบกันดีว่าการเขียนโปรแกรมเชิงวัตถุนั้น ช่วยในเรื่องของ Reusable โค้ดที่เราเคยเขียนมานั้นจะสามารถนำกลับมาใช้ใหม่ได้อย่างง่ายๆ อีกทั้ง เราสามารถนำไปใช้ได้หลากหลาย

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

Code (Javascript)
<script type="text/javascript">
     var product_names = new Array();
     var product_prices = new Array();
     var product_qtys = new Array();
     product_names[0] = "Product 1";
     product_prices[0] = 200.00;
     product_qtys[0] = 3;

     product_names[1] = "Product 2";
     product_prices[1] = 210.00;
     product_qtys[1] = 2;

     product_names[2] = "Product 3";
     product_prices[2] = 220.00;
     product_qtys[2] = 6;

     // คำนวนราคารวม
     var sum = 0;
     for(var i = 0; i < product_prices.length; i++) {
          document.write(product_names[i] + " total price =  " +  (product_qtys[i] * product_prices[i]) + "<br />");
          sum += product_qtys[i] * product_prices[i];
     }
     document.write("Sum : " + sum.toFixed(2));
</script>


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

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

ลองเล่นสนุกด้วยการเขียน Class
ลองดูตัวอย่างต่อไปนี้ครับ เราจะแยกส่วนประกาศคลาส Product ไว้ในไฟล์ๆหนึ่ง แล้วเดี๋ยวเราจะให้อีกไฟล์นำไปเรียกใช้ครับ สมมุติว่าไฟล์นี้ชื่อ product.js นะครับ

Code (Javascript)
<script type="text/javascript">
     var Product = function(name, price, qty) {
          this.Name = name;
          this.Price = price;
          this.Qty = qty;

          this.GetTotalPrice= function() {
               return this.Price * this.Qty;
          }
          this.ToString = function() {
               return this.Name + " total price : " + (this.Qty * this.Price);
          }
     }
</script>


การสร้างคลาสใน Javascript เราจะสร้างเป็นฟังก์ชั่นครับ เพียงแต่ว่า โดยที่ตัวมันเองก็เป็น Constructor ในตัวเราใส่ค่าเริ่มต้นให้มันได้ครับ และในการสร้างคุณสมบัติของคลาส (หรือที่เราเรียกว่า Property นั่นแหละครับ) เราจะประกาศคล้ายตัวแปร แต่ใส่คีย์เวิร์ดว่า this ข้างหน้าตัวแปรนั้นแล้วตามด้วยเครื่องหมาย dot (.) แค่นี้ก็จะได้คุณลักษณะของคลาสนั้นๆแล้วครับ สำหรับ พฤติกรรมของคลาสหรือที่เราเรียกว่า Behavior หรือที่เราเรียกๆกันตามศัพท์ OOP นั้นว่า Method นั้นก็คือฟังก์ชั่นธรรมดานี่แหละ แต่ติดตัว Class นั้นมา เราก็ประกาศโดยใช้คีย์เวิร์ด this. นำแล้วตามด้วยชื่อ Method แล้วก็นิยามการทำงานตามปกติครับ








ทีนี้มาถึงขั้นตอนการใช้งาน สมมุติว่าในไฟล์ HTML นะครับ

Code (Javascript)
<script type="text/javascript" src="product.js"></script>
<script type="text/javascript">
// อาเรย์เอาไว้เก็บกลุ่มของ product
var products = new Array();
products[0] = new Product("Product 1", 200.00, 3);
products[1] = new Product("Product 2", 210.00, 2);
products[2] = new Product("Product 3", 220.00, 6);

// เปลี่ยนแปลงค่าได้ด้วยครับ
products[0].Name = "My product";
products[2].Qty = 1;

// ทดลองแสดงผล
var sum = 0.0;
for(var i = 0; i < products.length; i++) {
     document.write(products[i].ToString() + "<br />");
     sum += products[i].GetTotalPrice();
}
document.write("Total price : " + sum.toFixed(2));
</script>



ผลลัพธ์ที่ได้จะเป็นดังนี้ครับ
My product total price : 600
Product 2 total price : 420
Product 3 total price : 220
Total price : 1240.00


เราสามารถกำหนดการเข้าถึง property ได้อีกด้วย ใน OOP สำหรับ Property ที่เป็น Public นั้นโค้ดภายนอกจะสามารถเข้าถึงได้ ทั้ง Read และ Write วิธีการทำ Public Property ก็แค่ใส่ this. นำหน้าตัวแปรนั้นๆ ทีนี้สำหรับตัวแปรที่เป็น Private หรือตัวแปรที่เราต้องการใช้แต่ภายในล่ะทำอย่างไร ... ก็ไม่ยากเลยครับ ประกาศโดยใช้คีย์เวิร์ด var นำหน้าเช่นเคย

Code (Javascript)
var Product = function(name, price, qty) {
  this.Name = name;
  this.Price = price;
  this.Qty = qty;
  var vat = 1.7;

  this.GetTotalPrice= function() {
	   return this.Price * this.Qty;
  }
  this.ToString = function() {
	   return this.Name + " total price : " + (this.Qty * this.Price);
  }
  this.GetIncludeVatPrice = function() {
       return this.Price * vat;
  }
 }


ในตัวอย่างเราจะเพิ่มเมธอดสำหรับดูราคาที่รวมภาษีไปแล้ว แต่เราจะกำหนดอัตราภาษีไว้ในคลาสเลย เราไม่ต้องการให้คนที่เอาคลาสนี้ไปใช้ ไปปรับแต่งตัวแปรที่เก็บภาษี เราก็ไม่ต้องใช้ this. เราใช้แค่คีย์เวิร์ด var ก็พอครับ








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


Reference : http://www.codezy.com
   
Share
Bookmark.   

  By : Kenessar
  Article : บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
  Score Rating :
  Create Date : 2012-04-20
  Download : Download  JavaScript and Class Object การสร้างและใช้งานคลาสใน JavaScript (0.0010 MB)
Sponsored Links
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่