เกือบ 20 ปีที่แล้วเมื่อ JavaScript เกิดมามันเป็นเพียงภาษาสคริปต์เว็บที่เรียบง่าย หากคุณลืมเติมชื่อผู้ใช้ของคุณมันจะปรากฏขึ้นคำเตือน
ทุกวันนี้มันเกือบจะมีอำนาจทุกอย่างด้วยการใช้งานที่เหลือเชื่อทุกชนิดตั้งแต่ปลายด้านหน้าไปด้านหลัง โปรแกรมเมอร์ใช้มันเพื่อให้โครงการขนาดใหญ่มากขึ้นเรื่อย ๆ
ความซับซ้อนของรหัส JavaScript ก็เพิ่มขึ้นอย่างรวดเร็ว หน้าเว็บเดียวมีรหัส JavaScript 10,000 บรรทัดซึ่งเป็นเรื่องธรรมดามานานแล้ว ในปี 2010 วิศวกรเปิดเผยว่าความยาวรหัสของ Gmail คือ 443,000 บรรทัด!
ในการเขียนและรักษารหัสที่ซับซ้อนดังกล่าวจะต้องใช้กลยุทธ์แบบแยกส่วน ในปัจจุบันแนวทางหลักในอุตสาหกรรมคือการใช้ "การเขียนโปรแกรมเชิงวัตถุ" ดังนั้นวิธีที่ JavaScript ใช้การเขียนโปรแกรมเชิงวัตถุได้กลายเป็นหัวข้อร้อนแรง
ปัญหาคือไวยากรณ์ Javascipt ไม่สนับสนุน "คลาส" (คลาส) ซึ่งทำให้วิธีการเขียนโปรแกรมเชิงวัตถุแบบดั้งเดิมเป็นไปไม่ได้ที่จะใช้โดยตรง โปรแกรมเมอร์ได้ทำการสำรวจจำนวนมากเพื่อศึกษาวิธีจำลอง "ชั้นเรียน" ด้วย JavaScript บทความนี้สรุปสามวิธีของ JavaScript ที่กำหนด "คลาส" กล่าวถึงลักษณะของแต่ละวิธีและเน้นวิธีที่ดีที่สุดในสายตาของฉัน
-
สามวิธีในการกำหนดคลาสใน JavaScript
ในการเขียนโปรแกรมเชิงวัตถุคลาสเป็นเทมเพลตสำหรับวัตถุที่กำหนดคุณสมบัติและวิธีการที่ใช้ร่วมกันโดยกลุ่มวัตถุเดียวกัน (หรือที่เรียกว่า "อินสแตนซ์"
ภาษา JavaScript ไม่สนับสนุน "คลาส" แต่วิธีแก้ปัญหาบางอย่างสามารถใช้เพื่อจำลอง "คลาส"
1. วิธีตัวสร้าง
นี่เป็นวิธีการคลาสสิกและวิธีการสอนในตำราเรียน มันใช้ตัวสร้างเพื่อจำลอง "คลาส" และใช้คำหลักนี้เพื่ออ้างถึงวัตถุอินสแตนซ์ภายใน
การคัดลอกรหัสมีดังนี้:
ฟังก์ชัน cat () {
this.name = "ผมใหญ่";
-
เมื่อสร้างอินสแตนซ์ให้ใช้คำหลักใหม่
การคัดลอกรหัสมีดังนี้:
var cat1 = แมวใหม่ ();
การแจ้งเตือน (cat1.name); // ผมใหญ่
คุณสมบัติและวิธีการของชั้นเรียนยังสามารถกำหนดไว้ในวัตถุต้นแบบของตัวสร้าง
การคัดลอกรหัสมีดังนี้:
cat.prototype.makesound = function () {
แจ้งเตือน ("meow meow");
-
สำหรับการแนะนำอย่างละเอียดเกี่ยวกับวิธีนี้โปรดดูชุดของบทความที่ฉันเขียนว่า "การเขียนโปรแกรมเชิงวัตถุ JavaScript" ฉันจะไม่พูดถึงเรื่องนี้ที่นี่ ข้อเสียเปรียบหลักคือมันค่อนข้างซับซ้อนและใช้สิ่งนี้และต้นแบบซึ่งใช้งานได้ดีมากในการเขียนและอ่าน
2. Object.create () วิธีการ
เพื่อแก้ข้อบกพร่องของ "วิธีการสร้าง" และเพื่อสร้างวัตถุที่สะดวกยิ่งขึ้นรุ่นที่ห้าของ ECMASCript ซึ่งเป็นมาตรฐานสากลของ JavaScript (ปัจจุบันมีรุ่นที่สาม) เสนอวิธีการใหม่ Object.create ()
การใช้วิธีนี้ "คลาส" เป็นวัตถุไม่ใช่ฟังก์ชัน
การคัดลอกรหัสมีดังนี้:
var cat = {
ชื่อ: "ผมใหญ่",
Makeound: function () {alert ("meow meow meow"); -
-
จากนั้นใช้ object.create () โดยตรงเพื่อสร้างอินสแตนซ์โดยไม่ต้องใช้ใหม่
การคัดลอกรหัสมีดังนี้:
var cat1 = object.create (แมว);
การแจ้งเตือน (cat1.name); // ผมใหญ่
cat1.makesound (); // meow meow meow meow
ปัจจุบันเบราว์เซอร์เมเจอร์รุ่นล่าสุด (รวมถึง IE9) ได้ปรับใช้วิธีนี้ หากคุณพบเบราว์เซอร์เก่าคุณสามารถใช้รหัสต่อไปนี้เพื่อปรับใช้ด้วยตัวเอง
การคัดลอกรหัสมีดังนี้:
if (! object.create) {
Object.create = function (o) {
ฟังก์ชั่น f () {}
f.prototype = o;
คืน F () ใหม่;
-
-
วิธีนี้ง่ายกว่า "วิธีการสร้าง" แต่ไม่สามารถใช้แอตทริบิวต์ส่วนตัวและวิธีการส่วนตัวและข้อมูลไม่สามารถแชร์ระหว่างวัตถุอินสแตนซ์ได้ดังนั้นการจำลอง "คลาส" จึงไม่ครอบคลุมเพียงพอ
3. กฎหมายมินิมัลลิสต์
โปรแกรมเมอร์ชาวดัตช์ Gabor de Mooij เสนอวิธีการใหม่ที่ดีกว่า Object.create () ซึ่งเขาเรียกว่า "วิธีการมินิมัลลิสต์" นี่เป็นวิธีที่ฉันแนะนำ
3.1 บรรจุภัณฑ์
วิธีนี้ไม่ได้ใช้สิ่งนี้และต้นแบบและรหัสนั้นง่ายมากในการปรับใช้ซึ่งอาจเป็นสาเหตุที่เรียกว่า "กฎหมายมินิมัลลิสต์"
ก่อนอื่นมันยังใช้วัตถุเพื่อจำลอง "คลาส" ในชั้นเรียนนี้กำหนดตัวสร้าง createNew () เพื่อสร้างอินสแตนซ์
การคัดลอกรหัสมีดังนี้:
var cat = {
CreateNew: function () {
// รหัสบางส่วนที่นี่
-
-
จากนั้นใน createNew () กำหนดวัตถุอินสแตนซ์และใช้วัตถุอินสแตนซ์นี้เป็นค่าส่งคืน
การคัดลอกรหัสมีดังนี้:
var cat = {
CreateNew: function () {
var cat = {};
cat.name = "ผมใหญ่";
cat.makesound = function () {alert ("meow meow"); -
คืนแมว;
-
-
เมื่อใช้งานให้เรียกใช้เมธอด createNew () เพื่อรับวัตถุอินสแตนซ์
การคัดลอกรหัสมีดังนี้:
var cat1 = cat.createnew ();
cat1.makesound (); // meow meow meow meow
ข้อดีของวิธีการนี้คือมันง่ายที่จะเข้าใจมีโครงสร้างที่ชัดเจนและสง่างามและสอดคล้องกับการก่อสร้าง "การเขียนโปรแกรมเชิงวัตถุ" แบบดั้งเดิมดังนั้นคุณสมบัติต่อไปนี้สามารถนำไปใช้งานได้ง่าย
3.2 มรดก
มันสะดวกมากที่จะใช้คลาสหนึ่งคลาสในชั้นเรียนถัดไป เพียงเรียกวิธีการ createNew () ของวิธีหลังในวิธี createNew ()
ก่อนกำหนดชั้นเรียนสัตว์
การคัดลอกรหัสมีดังนี้:
var iment = {
CreateNew: function () {
var iment = {};
Animal.sleep = function () {Alert ("Sleep in"); -
สัตว์กลับมา;
-
-
จากนั้นในวิธีการ createnew () ของแมววิธีการ createnew () ของสัตว์เรียกว่า
การคัดลอกรหัสมีดังนี้:
var cat = {
CreateNew: function () {
var cat = iment.createnew ();
cat.name = "ผมใหญ่";
cat.makesound = function () {alert ("meow meow"); -
คืนแมว;
-
-
อินสแตนซ์ของแมวที่ได้รับในลักษณะนี้จะสืบทอดทั้งคลาสแมวและชั้นสัตว์
การคัดลอกรหัสมีดังนี้:
var cat1 = cat.createnew ();
cat1.sleep (); // นอนใน
3.3 คุณลักษณะส่วนตัวและวิธีการส่วนตัว
ในวิธี CreateNew () ตราบใดที่วิธีการและคุณสมบัติที่ไม่ได้กำหนดไว้ในวัตถุ CAT นั้นเป็นส่วนตัว
การคัดลอกรหัสมีดังนี้:
var cat = {
CreateNew: function () {
var cat = {};
var sound = "meow meow meow";
cat.makesound = function () {alert (เสียง); -
คืนแมว;
-
-
เสียงตัวแปรภายในในตัวอย่างข้างต้นไม่สามารถอ่านได้จากภายนอกและสามารถอ่านได้ด้วยวิธีการสาธารณะของ Cat () เท่านั้น
การคัดลอกรหัสมีดังนี้:
var cat1 = cat.createnew ();
การแจ้งเตือน (cat1.sound); // ไม่ได้กำหนด
3.4 การแบ่งปันข้อมูล
บางครั้งเราต้องการวัตถุอินสแตนซ์ทั้งหมดเพื่อให้สามารถอ่านและเขียนข้อมูลภายในเดียวกัน ในเวลานี้เพียงแค่ห่อหุ้มข้อมูลภายในนี้ภายในวัตถุคลาสและนอกวิธี CreateNew ()
การคัดลอกรหัสมีดังนี้:
var cat = {
เสียง: "meow meow meow",
CreateNew: function () {
var cat = {};
cat.makesound = function () {alert (cat.sound); -
cat.changesound = function (x) {cat.sound = x; -
คืนแมว;
-
-
จากนั้นมีการสร้างวัตถุอินสแตนซ์สองรายการ:
การคัดลอกรหัสมีดังนี้:
var cat1 = cat.createnew ();
var cat2 = cat.createnew ();
cat1.makesound (); // meow meow meow meow
ในเวลานี้หากมีวัตถุอินสแตนซ์และข้อมูลที่แชร์ได้รับการแก้ไขวัตถุอินสแตนซ์อื่นจะได้รับผลกระทบเช่นกัน
การคัดลอกรหัสมีดังนี้:
CAT2.CHANGESOUND ("LALALA");
cat1.makesound (); // lalala
(เกิน)