บทความนี้อธิบายถึงคุณสมบัติขั้นสูงของการเขียนโปรแกรมเชิงวัตถุใน JavaScript แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
1. สามวิธีในการสร้างวัตถุ:
วิธีการก่อสร้างครั้งแรก: วัตถุใหม่
var a = วัตถุใหม่ (); ax = 1, ay = 2;
วิธีการก่อสร้างที่สอง: การวัดโดยตรงของวัตถุ
var b = {x: 1, y: 2};วิธีการก่อสร้างที่สาม: กำหนดประเภท
จุดฟังก์ชัน (x, y) {this.x = x; this.y = y;} var p = จุดใหม่ (1,2);2. เข้าถึงวัตถุ
เข้าถึงคุณสมบัติของวัตถุ
สัญลักษณ์วงเล็บ: ฮีโร่ ['ชื่อ'] -
โน้ตชี้: Hero.name
หากไม่มีคุณสมบัติที่เข้าถึงได้จะไม่ได้กำหนดจะถูกส่งคืน
วิธีการเข้าถึงวัตถุ
เพิ่มวงเล็บคู่หนึ่งหลังจากชื่อวิธี: hero.say ()
วิธีการเข้าถึงเช่นแอตทริบิวต์การเข้าถึง: ฮีโร่ ['พูด'] ()
3. ลบแอตทริบิวต์และวิธีการ
// สร้างวัตถุว่างเปล่า var hero = {}; // เพิ่มแอตทริบิวต์และวิธีการไปยัง hero.name = "javaScript"; hero.value = "helloWorld"; hero.sayname = function () {return "hello" + hero.name;}; // เอาต์พุต javascriptalert (hero.sayname ()); // เอาท์พุทสวัสดี JavaScript // ลบแอตทริบิวต์ชื่อของ Hero Object DELETE HERO.NAME; // ทดสอบการแจ้งเตือน (HERO.SAYNAME ()); // เอาต์พุตสวัสดีไม่ได้กำหนด4. ใช้ค่านี้
// สร้างวัตถุว่างเปล่า var hero = {}; // เพิ่มแอตทริบิวต์และวิธีการให้กับฮีโร่วัตถุ Hero.name = "JavaScript"; hero.value = "HelloWorld"; hero.sayname = function () {return "hello" + this.name;}; // เอาท์พุท JavaScriptTalet (hero.sayname ()); // เอาต์พุตสวัสดี JavaScriptสรุป:
①นี่จริง ๆ แล้วหมายถึง "วัตถุนี้" หรือ "วัตถุปัจจุบัน"
②การใช้งานนี้เป็นปัญหาสำหรับคนส่วนใหญ่ ดังนั้นจึงไม่แนะนำให้ใช้มากเกินไป!
5. วัตถุในตัว
วัตถุในตัวสามารถแบ่งออกเป็นสามกลุ่ม:
①วัตถุคลาสการห่อหุ้มข้อมูล - รวมถึงวัตถุอาร์เรย์บูลีนจำนวนและสตริง วัตถุเหล่านี้แสดงถึงประเภทข้อมูลที่แตกต่างกันใน JavaScript และทั้งหมดมีค่าการส่งคืนแบบต่าง ๆ ของตัวเองรวมถึงสถานะที่ไม่ได้กำหนดและ NULL
②วัตถุคลาสเครื่องมือ - รวมถึงวัตถุที่ใช้ในการจัดเตรียมการสำรวจเช่นคณิตศาสตร์วันที่ regexp ฯลฯ
③วัตถุข้อผิดพลาดคลาสคลาส - รวมถึงวัตถุข้อผิดพลาดทั่วไปและวัตถุคลาสข้อผิดพลาดพิเศษอื่น ๆ อีกมากมาย พวกเขาสามารถช่วยเราแก้ไขสถานะการทำงานของโปรแกรมเมื่อมีข้อยกเว้นบางอย่างเกิดขึ้น
6. วัตถุวัตถุ
วัตถุเป็นวัตถุหลักของวัตถุทั้งหมดในจาวาสคริปต์ซึ่งหมายความว่าวัตถุทั้งหมดได้รับการสืบทอดจากวัตถุวัตถุ
สร้างวัตถุเปล่า:
var object = {}; var obj = วัตถุใหม่ ();7. วัตถุอาร์เรย์
วัตถุอาร์เรย์ใช้เพื่อจัดเก็บหลายค่าในตัวแปรเดียว
สร้างวัตถุอาร์เรย์เปล่า:
var object = {}; var obj = array ใหม่ ();ตัวอย่างเช่น 1:
// ตัวอย่างสตริงอินเวอร์ // กำหนดสตริง var str = "a, b, c, d, e, f, g"; // ใช้วิธีการแยก () ของวัตถุสตริงเพื่อตัดสตริงเป็นอาร์เรย์ var arr = str.split (","); // ใช้วิธีการย้อนกลับ () ของวัตถุอาร์เรย์ arr = arr.Reverse (); // ทดสอบการแจ้งเตือนการพิมพ์ (arr.toString ());8. วัตถุสไตรลิ่ง
ความแตกต่างระหว่างวัตถุสตริงและประเภทสตริงพื้นฐาน:
var str = "hello"; var obj = สตริงใหม่ ("โลก"); แจ้งเตือน (typeof str); // typeof stringalert (typeof obj); // typeof objectตัวอย่างเช่น 1:
// ตัวอย่างของการพิจารณาว่าสตริงมีสตริงที่ระบุ // กำหนดสองสตริงที่จะตัดสิน var str = "abcdefg"; var substr = "efg";/** กำหนดฟังก์ชั่นเพื่อตัดสินว่าสตริงมีสตริงที่ระบุ * * * * * * * * * * * * * * * * * * * * * * * * สตริง (str); // สกัดกั้นสตริงที่ตัดสิน var result = string.substr (str.indexof (substr), substr.length);/** ตรวจสอบว่าสตริงที่สกัดกั้นนั้นว่างเปล่า * * ว่างเปล่าหรือไม่แสดงว่าสตริงที่ระบุไม่มีสตริงที่ระบุ * * ไม่ว่างเปล่า false;}} การแจ้งเตือน (sub (str, substr));
9. ต้นแบบ
ฟังก์ชั่นเองก็เป็นวัตถุที่มีวิธีการและคุณสมบัติ ตอนนี้สิ่งที่เราต้องการศึกษาเป็นอีกคุณสมบัติหนึ่งของวัตถุฟังก์ชั่น - ต้นแบบ
เพิ่มวิธีการและคุณสมบัติโดยใช้ต้นแบบ
เขียนคุณสมบัติต้นแบบใหม่โดยใช้คุณสมบัติของตัวเอง
ขยายวัตถุในตัว
เพิ่มวิธีการและคุณสมบัติโดยใช้ต้นแบบ
ด้านล่างคือการสร้างวัตถุฟังก์ชั่นใหม่และตั้งค่าคุณสมบัติและวิธีการบางอย่าง:
ฟังก์ชั่นฮีโร่ (ชื่อ, สี) {this.name = name; this.color = color; this.whatareyou function () {return "ฉันเป็น" + this.color + "" + this.name; }} var hero = ฮีโร่ใหม่ ("javascript", "red"); แจ้งเตือน (hero.whatareyou ()); // เอาต์พุตฉันเป็นจาวาสคริปต์สีแดงเพิ่มคุณสมบัติและวิธีการบางอย่างไปยังวัตถุฟังก์ชัน Hero ด้านบน:
hero.prototype.price = 100; hero.prototype.rating = 3; hero.prototype.getInfo = function () {return "การจัดอันดับ:" + this.rating + ", ราคา:" this.price;} การแจ้งเตือน (hero.getInfo (); // การจัดอันดับผลลัพธ์: 3, ราคา: 100วิธีการข้างต้นสามารถทำได้เช่นนี้:
hero.prototype = {ราคา: 100, คะแนน: 3, getinfo: function () {return "การจัดอันดับ:" + this.rating + ", ราคา:" + this.price; -เขียนคุณสมบัติต้นแบบใหม่โดยใช้คุณสมบัติของตัวเอง
ฉันควรทำอย่างไรถ้าแอตทริบิวต์ของวัตถุนั้นเหมือนกับแอตทริบิวต์ต้นแบบ? คำตอบคือคุณลักษณะของวัตถุมีลำดับความสำคัญสูงกว่าแอตทริบิวต์ต้นแบบ
ฟังก์ชั่นฮีโร่ () {this.name = "jscript";} hero.prototype.name = "javascript"; var hero = new hero (); Alert (hero.name); // เอาท์พุท JScriptDelete Hero.name; Alert (Hero.name); // output javascriptขยายวัตถุในตัว
// เพิ่มฟังก์ชั่นเพื่อตัดสินสำหรับอาร์เรย์อาร์เรย์ต้นแบบอาร์เรย์อาร์เรย์ prototype.inarray = ฟังก์ชั่น (สี) {สำหรับ (var i = 0, len = this.length; i <len; i ++) {ถ้า (นี่ [i] === สี) {return true; }} return false;} // กำหนดอาร์เรย์วัตถุ var a = ["สีแดง", "สีเขียว", "blue"]; // ทดสอบการแจ้งเตือน (a.inarray ("สีแดง")); //tuealert(a.inarray("yellow ")); //เท็จ10. มรดก
หากทั้งสองคลาสเป็นประเภทอินสแตนซ์เดียวกันก็มีความสัมพันธ์บางอย่างระหว่างพวกเขา เราเรียกความสัมพันธ์ทั่วไประหว่างประเภทของอินสแตนซ์เดียวกัน "มรดก"
ความสัมพันธ์ในการสืบทอดมีความหมายอย่างน้อยสามประการ:
①อินสแตนซ์ของคลาสย่อยสามารถแบ่งปันวิธีการคลาสแม่
subclasses สามารถแทนที่วิธีการของคลาสแม่หรือขยายวิธีการใหม่
③คลาสย่อยและคลาสพาเรนต์เป็นทั้ง "ประเภท" ของอินสแตนซ์คลาสย่อย
ในจาวาสคริปต์ไม่รองรับ "มรดก" กล่าวคือไม่มีไวยากรณ์ที่สืบทอดมาในจาวาสคริปต์ ในแง่นี้ JavaScript ไม่ใช่ภาษาที่มุ่งเน้นวัตถุโดยตรง
11. ห่วงโซ่ต้นแบบ
ห่วงโซ่ต้นแบบเป็นวิธีการสืบทอดเริ่มต้นที่กำหนดโดยมาตรฐาน ECMASCRIPT
ตัวอย่างเช่น:
ฟังก์ชั่น a () {this.name = "a"; this.toString = function () {return this.name};} function b () {this.name = "b";} ฟังก์ชั่น c () {this.name = "c"; this.age = 18;คำอธิบาย:
วัตถุถูกสร้างขึ้นโดยตรงในคุณสมบัติต้นแบบของวัตถุ B และไม่ขยายต้นแบบดั้งเดิมของวัตถุเหล่านี้
เอนทิตีใหม่ถูกสร้างขึ้นผ่านใหม่ A () จากนั้นใช้เพื่อเขียนทับต้นแบบของวัตถุ
JavaScript เป็นภาษาที่อาศัยวัตถุทั้งหมดและไม่มีแนวคิดของชั้นเรียน
ดังนั้นจึงจำเป็นต้องสร้างเอนทิตีใหม่ด้วย A () ใหม่ก่อนที่งานสืบทอดที่เกี่ยวข้องจะเสร็จสมบูรณ์ผ่านคุณสมบัติของเอนทิตี
หลังจากเสร็จสิ้นการใช้งานมรดกดังกล่าวการดัดแปลงการเขียนใหม่หรือการลบใด ๆ ของ A () จะไม่ส่งผลกระทบต่อ B ()
สืบทอดมาจากต้นแบบเท่านั้น:
ฟังก์ชั่น a () {} a.prototype.name = "a"; a.prototype.toString = function () {return this.name}; ฟังก์ชั่น b () {} b.prototype = a.prototype; b.prototype.name = "b" "c"; c.prototype.age = 18; c.prototype.getage = function () {return this.age};การสืบทอดระหว่างวัตถุ (เนื้อหาเพิ่มเติมไม่สามารถเป็นได้) (สำเนาตื้น)
// ฟังก์ชั่นยอมรับวัตถุและส่งคืนฟังก์ชั่นการคัดลอก ExtendCopy (P) {var z = {}; // กำหนดวัตถุเปล่า z สำหรับ (var i ใน p) {// var i = 0; ฉัน <p.length; i ++ z [i] = p [i]; // หากคุณได้รับการปฏิบัติเป็นอาร์เรย์คุณสามารถเข้าใจ} // uber แอตทริบิวต์: ใช้ p เป็นพาเรนต์ของ z และจุด z ไปยังต้นแบบของ p z.uber = p; return z;} // define object a แต่วัตถุ A ไม่ใช่วัตถุฟังก์ชัน var a = {ชื่อ: "a", toStr: function () {return this.name;}} // define วัตถุ B แต่วัตถุ B ไม่ใช่ฟังก์ชันวัตถุ var b = extedCopy (a); b.name = "b"; b.toStr = function () {return this.uber.toStr () + "," + this.name;}; // กำหนดวัตถุ c แต่วัตถุ C ไม่ใช่วัตถุฟังก์ชัน var c = extercopy (b); c.name = 18; // เอาท์พุท a, b, 18PS: เลย์เอาต์รหัสจำนวนมากในบทช่วยสอนไม่ได้มาตรฐาน นี่คือการจัดรูปแบบรหัส JavaScript และเครื่องมือการตกแต่งเพื่อให้ทุกคนใช้:
เครื่องมือการจัดรูปแบบรหัส JavaScript:
http://tools.vevb.com/code/js
JavaScript Code Beautification/การบีบอัด/การจัดรูปแบบ/เครื่องมือเข้ารหัส:
http://tools.vevb.com/code/jscompress
JSMIN ONLINE JS Tool Tool:
http://tools.vevb.com/code/jsmincompress
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ JavaScript โปรดตรวจสอบหัวข้อพิเศษของไซต์นี้: "การสอนเชิงวัตถุ JavaScript", "สรุปทักษะการดำเนินงาน JSON ใน JavaScript", "สรุปผลการสลับ JavaScript และเทคนิคการค้นหา JavaScript" "สรุปโครงสร้างข้อมูล JavaScript และทักษะอัลกอริทึม", "บทสรุปของอัลกอริทึมและเทคนิคการสำรวจ JavaScript Traversal" และ "สรุปการใช้งานทางคณิตศาสตร์ JavaScript"
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน