แนะนำ
บทความนี้ส่วนใหญ่แนะนำบทความถัดไปของรูปแบบของการสร้างวัตถุ การใช้เทคนิคต่าง ๆ สามารถหลีกเลี่ยงข้อผิดพลาดหรือเขียนโค้ดที่มีความคล่องตัวมาก
รูปแบบ 6: ฟังก์ชั่นไวยากรณ์น้ำตาล
ฟังก์ชั่นไวยากรณ์น้ำตาลเป็นส่วนขยายในการเพิ่มวิธีการ (ฟังก์ชั่น) ลงในวัตถุอย่างรวดเร็ว สิ่งนี้ส่วนใหญ่ใช้คุณสมบัติของต้นแบบ รหัสค่อนข้างง่าย ก่อนอื่นให้ดูที่รหัสการใช้งาน:
การคัดลอกรหัสมีดังนี้:
if (typeof function.prototype.method! == "function") {
function.prototype.method = function (ชื่อ, การใช้งาน) {
this.prototype [ชื่อ] = การใช้งาน;
คืนสิ่งนี้;
-
-
เมื่อขยายวัตถุคุณสามารถใช้มันได้เช่นนี้:
การคัดลอกรหัสมีดังนี้:
var person = function (ชื่อ) {
this.name = ชื่อ;
-
.method ('getName',
การทำงาน () {
ส่งคืนสิ่งนี้ชื่อ;
-
.Method ('setName', ฟังก์ชัน (ชื่อ) {
this.name = ชื่อ;
คืนสิ่งนี้;
-
ด้วยวิธีนี้เราเพิ่มสองวิธี: getName และ setName ไปยังฟังก์ชันบุคคล ถัดไปให้ตรวจสอบผลลัพธ์:
การคัดลอกรหัสมีดังนี้:
var a = คนใหม่ ('อดัม');
console.log (a.getName ()); // 'อดัม'
console.log (a.setName ('eve'). getName ()); // 'อีฟ'
รูปแบบ 7: ค่าคงที่วัตถุ
ค่าคงที่วัตถุเป็นศูนย์รวมของวิธีการต่าง ๆ ที่จัดทำโดย Set, Get, IFDENTING ในวัตถุ ยิ่งไปกว่านั้นวิธีการที่กำหนดจะรักษาชุดวัตถุแรกเท่านั้นและการตั้งค่าในภายหลังจะไม่ถูกต้องซึ่งได้บรรลุวัตถุประสงค์ของผู้อื่นที่ไม่สามารถโอเวอร์โหลดได้ รหัสการใช้งานมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var constant = (function () {
ค่าคงที่ var = {}
OwnProp = Object.prototype.hasownProperty,
// อนุญาตให้ใช้ค่าสามประเภทเท่านั้น
อนุญาต = {
สตริง: 1,
หมายเลข: 1,
บูลีน: 1
-
คำนำหน้า = (math.random () + "_"). slice (2);
กลับ {
// ตั้งค่าคุณสมบัติด้วยชื่อ
ชุด: ฟังก์ชัน (ชื่อ, ค่า) {
if (this.isdefined (ชื่อ)) {
กลับเท็จ;
-
if (! OwnProp.Call (อนุญาตให้ค่า typeof)) {
กลับเท็จ;
-
ค่าคงที่ [คำนำหน้า + ชื่อ] = ค่า;
กลับมาจริง;
-
// ตรวจสอบว่ามีคุณสมบัติชื่อชื่อ
isDefined: function (ชื่อ) {
ส่งคืน OwnProp.CALL (ค่าคงที่คำนำหน้า + ชื่อ);
-
// รับแอตทริบิวต์ชื่อชื่อ
รับ: ฟังก์ชั่น (ชื่อ) {
if (this.isdefined (ชื่อ)) {
คืนค่าคงที่ [คำนำหน้า + ชื่อ];
-
คืนค่า null;
-
-
-
รหัสการตรวจสอบมีดังนี้:
การคัดลอกรหัสมีดังนี้:
// ตรวจสอบว่ามีอยู่จริง
console.log (constant.isdefined ("maxwidth")); // เท็จ
// คำนิยาม
console.log (constant.set ("maxwidth", 480)); // จริง
// ทดสอบซ้ำ
console.log (constant.isdefined ("maxwidth")); // จริง
// พยายามนิยามใหม่
console.log (constant.set ("maxwidth", 320)); // เท็จ
// พิจารณาว่าคำจำกัดความดั้งเดิมยังคงมีอยู่
console.log (constant.get ("maxwidth")); // 480
โหมด 8: โหมดแซนด์บ็อกซ์
โหมด Sandbox ให้บริบทแยกต่างหากสำหรับหนึ่งโมดูลหรือมากกว่าโดยไม่ส่งผลกระทบต่อบริบทของโมดูลอื่น ๆ ตัวอย่างเช่นมี Sandbox ที่มีเหตุการณ์สามวิธีคือ DOM และ AJAX หากสองคนถูกเรียกให้สร้างสภาพแวดล้อมไม่มีการรบกวนกับสภาพแวดล้อมทั้งสาม รหัสการใช้งาน Sandbox มีดังนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น sandbox () {
// แปลงพารามิเตอร์เป็นอาร์เรย์
var args = array.prototype.slice.call (อาร์กิวเมนต์)
// พารามิเตอร์สุดท้ายคือการโทรกลับ
การโทรกลับ = args.pop ()
// ยกเว้นพารามิเตอร์สุดท้ายโมดูลอื่น ๆ ทั้งหมดที่จะเลือก
โมดูล = (args [0] && typeof args [0] === "สตริง")? Args: args [0],
ฉัน;
// บังคับผู้ให้บริการใหม่
if (! (อินสแตนซ์ของ Sandbox นี้)) {
ส่งคืน Sandbox ใหม่ (โมดูลการโทรกลับ);
-
// เพิ่มคุณสมบัติ
this.a = 1;
this.b = 2;
// เพิ่มโมดูลลงในวัตถุนี้
// หากไม่มีโมดูลหรือพารามิเตอร์ที่ผ่านคือ "*" ดังนั้นโมดูลทั้งหมดจะถูกส่งผ่าน
if (! โมดูล || โมดูล == '*') {
โมดูล = [];
สำหรับ (i ใน sandbox.modules) {
if (sandbox.modules.hasownproperty (i)) {
modules.push (i);
-
-
-
// เริ่มต้นโมดูลที่ต้องการ
สำหรับ (i = 0; i <modules.length; i += 1) {
Sandbox.modules [โมดูล [i]] (นี่);
-
// โทรกลับ
การโทรกลับ (นี่);
-
// เพิ่มวัตถุต้นแบบโดยค่าเริ่มต้น
sandbox.prototype = {
ชื่อ: "แอปพลิเคชันของฉัน",
เวอร์ชัน: "1.0",
getName: function () {
ส่งคืนสิ่งนี้ชื่อ;
-
-
จากนั้นเรากำหนดโมดูลเริ่มต้นเริ่มต้น:
การคัดลอกรหัสมีดังนี้:
sandbox.modules = {};
sandbox.modules.dom = function (box) {
box.getElement = function () {
-
box.getStyle = function () {
-
box.foo = "bar";
-
sandbox.modules.event = function (box) {
// เข้าถึงต้นแบบ Sandbox หากจำเป็น:
// box.constructor.prototype.m = "mmmm";
box.attacheVent = function () {
-
box.detacheVent = function () {
-
-
sandbox.modules.ajax = function (box) {
box.makerequest = function () {
-
box.getResponse = function () {
-
-
วิธีการโทรมีดังนี้:
การคัดลอกรหัสมีดังนี้:
// วิธีการโทร
Sandbox (['Ajax', 'Event'], function (box) {
console.log (typeof (box.foo));
// ไม่มีการเลือก DOM ดังนั้น Box.foo จึงไม่มีอยู่จริง
-
Sandbox ('Ajax', 'dom', ฟังก์ชั่น (กล่อง) {
console.log (typeof (box.attachevent));
// ไม่มีการเลือกเหตุการณ์ดังนั้นสิ่งที่แนบมาที่กำหนดไว้ในเหตุการณ์ไม่มีอยู่เช่นกัน
-
Sandbox ('*', ฟังก์ชั่น (กล่อง) {
console.log (กล่อง); // วิธีการทั้งหมดที่กำหนดไว้ข้างต้นสามารถเข้าถึงได้
-
ด้วยวิธีการโทรที่แตกต่างกันสามวิธีเราจะเห็นได้ว่าบริบทของทั้งสามวิธีนั้นแตกต่างกัน คนแรกไม่มี Foo; อันที่สองไม่มีสิ่งที่แนบมาเพราะมีเพียง Ajax และ DOM เท่านั้นที่โหลด แต่เหตุการณ์ไม่ได้โหลด อันที่สามไม่โหลดทุกอย่าง
รูปแบบที่ 9: สมาชิกคงที่
สมาชิกคงที่เป็นเพียงคุณสมบัติคงที่ที่จัดทำโดยฟังก์ชั่นหรือวัตถุซึ่งสามารถแบ่งออกเป็นส่วนตัวและสาธารณะเช่นเดียวกับสาธารณะคงที่และส่วนตัวคงที่ใน C# หรือ Java
ก่อนอื่นดูสมาชิกสาธารณะ สมาชิกสาธารณะนั้นง่ายมาก วิธีการและฟังก์ชั่นที่เราประกาศมักจะเป็นสาธารณะเช่น:
การคัดลอกรหัสมีดังนี้:
// ตัวสร้าง
var gadget = function () {
-
// วิธีการคงที่สาธารณะ
gadget.isshiny = function () {
กลับ "คุณเดิมพัน";
-
// วิธีปกติในการเพิ่มบนต้นแบบ
gadget.prototype.setPrice = function (ราคา) {
this.price = ราคา;
-
// โทรหาวิธีการคงที่
console.log (gadget.isshiny ()); // "คุณเดิมพัน"
// สร้างอินสแตนซ์และเรียกเมธอด
var iphone = gadget ใหม่ ();
iPhone.SetPrice (500);
console.log (typeof gadget.setprice); // "ไม่ได้กำหนด"
console.log (typeof iphone.isshiny); // "ไม่ได้กำหนด"
gadget.prototype.isshiny = gadget.isshiny;
console.log (iPhone.isshiny ()); // "คุณเดิมพัน"
สำหรับสมาชิกคงที่ส่วนตัวเราสามารถใช้คุณสมบัติการปิดของพวกเขาเพื่อนำไปใช้ ต่อไปนี้เป็นสองวิธีการใช้งาน
วิธีการใช้งานครั้งแรก:
การคัดลอกรหัสมีดังนี้:
var gadget = (function () {
// ตัวแปร/คุณสมบัติคงที่
var counter = 0;
// การปิดส่งคืนการใช้งานใหม่ของตัวสร้างใหม่
return function () {
console.log (เคาน์เตอร์ += 1);
-
- // ดำเนินการทันที
var g1 = gadget ใหม่ (); // บันทึก 1
var g2 = gadget ใหม่ (); // บันทึก 2
var g3 = gadget ใหม่ (); // บันทึก 3
จะเห็นได้ว่าถึงแม้ว่ามันจะเป็นวัตถุใหม่ทุกครั้ง แต่จำนวนก็ยังคงเพิ่มขึ้นเพื่อให้บรรลุวัตถุประสงค์ของสมาชิกแบบคงที่
วิธีที่สอง:
การคัดลอกรหัสมีดังนี้:
var gadget = (function () {
// ตัวแปร/คุณสมบัติคงที่
var counter = 0,
Newgadget;
// การใช้งานตัวสร้างใหม่
newGadget = function () {
เคาน์เตอร์ += 1;
-
// อนุญาตให้เข้าถึงวิธีการ
newGadget.prototype.getLastid = function () {
เคาน์เตอร์กลับ;
-
// เขียนทับคอนสตรัคเตอร์
กลับ Newgadget;
- // ดำเนินการทันที
var iphone = gadget ใหม่ ();
iPhone.getLastid (); // 1
var iPod = gadget ใหม่ ();
ipod.getLastid (); // 2
var iPad = gadget ใหม่ ();
iPad.getLastid (); // 3
จำนวนยังเพิ่มขึ้นซึ่งสามารถทำได้โดยใช้คุณสมบัติการปิดของวิธีการอนุญาตภายใน
สรุป
นี่คือบทความถัดไปของโหมดการสร้างวัตถุ บทความทั้งสองร่วมกันมี 9 รูปแบบ พวกเขาเป็นโหมดการสร้างวัตถุที่เรามักจะใช้ในการเขียนโปรแกรม JavaScript รายวัน สถานการณ์ต่าง ๆ มีบทบาทที่แตกต่างกัน ฉันหวังว่าทุกคนจะเลือกโหมดที่เกี่ยวข้องตามความต้องการของพวกเขา