JavaScript - ภาพรวมของวัตถุ

JavaScript เป็นภาษา Object Oriented Programming (OOP) ภาษาโปรแกรมสามารถเรียกได้ว่าเป็นภาษาเชิงวัตถุหากมีความสามารถพื้นฐานสี่ประการให้กับนักพัฒนา -

Encapsulation - ความสามารถในการจัดเก็บข้อมูลที่เกี่ยวข้องไม่ว่าจะเป็นข้อมูลหรือวิธีการรวมกันในวัตถุ
Aggregation - ความสามารถในการจัดเก็บวัตถุหนึ่งภายในวัตถุอื่น
Inheritance - ความสามารถของคลาสในการพึ่งพาคลาสอื่น (หรือจำนวนคลาส) สำหรับคุณสมบัติและวิธีการบางอย่าง
Polymorphism - ความสามารถในการเขียนฟังก์ชันหรือวิธีการเดียวที่ทำงานได้หลายวิธี

ออบเจ็กต์ประกอบด้วยคุณลักษณะ หากแอตทริบิวต์มีฟังก์ชันจะถือว่าเป็นวิธีการของออบเจ็กต์มิฉะนั้นแอตทริบิวต์จะถือเป็นคุณสมบัติ

คุณสมบัติของวัตถุ

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

ไวยากรณ์สำหรับการเพิ่มคุณสมบัติให้กับวัตถุคือ -

objectName.objectProperty = propertyValue;

For example - รหัสต่อไปนี้รับชื่อเอกสารโดยใช้ไฟล์ "title" คุณสมบัติของ document วัตถุ.

var str = document.title;

วิธีการวัตถุ

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

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

For example - ต่อไปนี้เป็นตัวอย่างง่ายๆเพื่อแสดงวิธีใช้ไฟล์ write() วิธีการของวัตถุเอกสารเพื่อเขียนเนื้อหาใด ๆ บนเอกสาร

document.write("This is test");

วัตถุที่ผู้ใช้กำหนด

อ็อบเจ็กต์ที่ผู้ใช้กำหนดเองและอ็อบเจ็กต์ในตัวทั้งหมดเป็นอ็อบเจ็กต์ที่เรียกว่า Object.

ตัวดำเนินการใหม่

newตัวดำเนินการใช้เพื่อสร้างอินสแตนซ์ของวัตถุ ในการสร้างวัตถุไฟล์new ตัวดำเนินการตามด้วยวิธีการสร้าง

ในตัวอย่างต่อไปนี้วิธีการสร้างคือ Object (), Array () และ Date () ตัวสร้างเหล่านี้เป็นฟังก์ชัน JavaScript ในตัว

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

ตัวสร้าง Object ()

ตัวสร้างคือฟังก์ชันที่สร้างและเตรียมข้อมูลเบื้องต้นให้กับวัตถุ JavaScript มีฟังก์ชันตัวสร้างพิเศษที่เรียกว่าObject()เพื่อสร้างวัตถุ ค่าส่งคืนของObject() ตัวสร้างถูกกำหนดให้กับตัวแปร

ตัวแปรประกอบด้วยการอ้างอิงไปยังวัตถุใหม่ คุณสมบัติที่กำหนดให้กับวัตถุไม่ใช่ตัวแปรและไม่ได้กำหนดด้วยvar คำสำคัญ.

ตัวอย่าง 1

ลองใช้ตัวอย่างต่อไปนี้ มันแสดงให้เห็นถึงวิธีการสร้างวัตถุ

<html>
   <head>
      <title>User-defined objects</title>     
      <script type = "text/javascript">
         var book = new Object();   // Create the object
         book.subject = "Perl";     // Assign properties to the object
         book.author  = "Mohtashim";
      </script>      
   </head>
   
   <body>  
      <script type = "text/javascript">
         document.write("Book name is : " + book.subject + "<br>");
         document.write("Book author is : " + book.author + "<br>");
      </script>   
   </body>
</html>

เอาต์พุต

Book name is : Perl 
Book author is : Mohtashim

ตัวอย่าง 2

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างวัตถุด้วยฟังก์ชันที่กำหนดโดยผู้ใช้ ที่นี่this คีย์เวิร์ดใช้เพื่ออ้างถึงออบเจ็กต์ที่ถูกส่งผ่านไปยังฟังก์ชัน

<html>
   <head>   
   <title>User-defined objects</title>
      <script type = "text/javascript">
         function book(title, author) {
            this.title = title; 
            this.author  = author;
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
      </script>      
   </body>
</html>

เอาต์พุต

Book title is : Perl 
Book author is : Mohtashim

การกำหนดวิธีการสำหรับวัตถุ

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

ตัวอย่าง

ลองใช้ตัวอย่างต่อไปนี้ จะแสดงวิธีการเพิ่มฟังก์ชันพร้อมกับวัตถุ

<html>
   
   <head>
   <title>User-defined objects</title>
      <script type = "text/javascript">
         // Define a function which will work as a method
         function addPrice(amount) {
            this.price = amount; 
         }
         
         function book(title, author) {
            this.title = title;
            this.author  = author;
            this.addPrice = addPrice;  // Assign that method as property.
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>

เอาต์พุต

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

คีย์เวิร์ด "with"

‘with’ คีย์เวิร์ดใช้เป็นชวเลขชนิดหนึ่งสำหรับอ้างอิงคุณสมบัติหรือวิธีการของอ็อบเจ็กต์

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

ไวยากรณ์

ไวยากรณ์สำหรับกับวัตถุมีดังนี้ -

with (object) {
   properties used without the object name and dot
}

ตัวอย่าง

ลองดูตัวอย่างต่อไปนี้

<html>
   <head>
   <title>User-defined objects</title>   
      <script type = "text/javascript">
         // Define a function which will work as a method
         function addPrice(amount) {
            with(this) {
               price = amount;
            }
         }
         function book(title, author) {
            this.title = title;
            this.author = author;
            this.price = 0;
            this.addPrice = addPrice;  // Assign that method as property.
         }
      </script>      
   </head>
   
   <body>   
      <script type = "text/javascript">
         var myBook = new book("Perl", "Mohtashim");
         myBook.addPrice(100);
         
         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>      
   </body>
</html>

เอาต์พุต

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

JavaScript เนทีฟออบเจ็กต์

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

นี่คือรายการของ JavaScript Native Objects ที่สำคัญทั้งหมด -

JavaScript Number Object
วัตถุบูลีน JavaScript
วัตถุสตริง JavaScript
JavaScript Array Object
JavaScript Date Object
วัตถุคณิตศาสตร์ JavaScript
JavaScript RegExp Object