JavaScript OOP มุ่งเน้นไปที่วัตถุ

การเขียนโปรแกรมเชิงวัตถุ (OOP) เป็นกระบวนทัศน์การเขียนโปรแกรมและยังเป็นวิธีการพัฒนาโปรแกรม วัตถุหมายถึงอินสแตนซ์ของคลาส มันใช้วัตถุเป็นหน่วยพื้นฐานของโปรแกรมการห่อหุ้มโปรแกรมและข้อมูลในนั้นเพื่อปรับปรุงความสามารถในการนำกลับมาใช้ความยืดหยุ่นและความยืดหยุ่นของซอฟต์แวร์ - วิกิพีเดีย

โดยทั่วไปการมุ่งเน้นวัตถุรวมถึง: การสืบทอด, การห่อหุ้ม, polymorphism, abstraction

มรดกของรูปแบบวัตถุ

สำเนาเบา

 var person = {ชื่อ: 'Allin', อายุ: 18, ที่อยู่: {home: 'Home', Office: 'Office',} sclools: ['x', 'z'],}; var programer = {ภาษา: 'js',}; ฟังก์ชั่นขยาย (p, c) {var c = c || - สำหรับ (var prop ใน p) {c [prop] = p [prop]; }} ขยาย (บุคคล, โปรแกรม); programer.name; // allinprogramer.address.home; // homeprogramer.address.home = 'House'; //houseperson.address.home; // บ้าน

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

สำเนาลึก

 ฟังก์ชั่น ExtendEdeeply (P, C) {var c = c || - สำหรับ (var prop ใน p) {ถ้า (typeof p [prop] === "Object") {c [prop] = (p [prop] .constructor === อาร์เรย์)? []: {}; Extenddeeply (p [prop], c [prop]); } else {c [prop] = p [prop]; -

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

 ExtendDeeply (บุคคล, โปรแกรม); programer.address.home = 'allin'; person.address.home; // home ใช้การโทรและนำไปใช้กับมรดกฟังก์ชัน parent () {this.name = "abc"; this.address = {home: "home"};} function child () {parent.call (นี่); this.language = "JS"; } Object.create () ใน ES5 var p = {ชื่อ: 'allin'}; var obj = object.create (o); obj.name; // Allin

Object.create () เป็นทางเลือกสำหรับผู้ให้บริการใหม่จะถูกปล่อยออกมาหลังจาก ES5 เท่านั้น นอกจากนี้เรายังสามารถจำลองวิธีนี้ด้วยตนเอง:

 // จำลอง Object.create () ฟังก์ชั่น MyCreate (O) {function f () {}; f.prototype = o; o = ใหม่ f (); return o;} var p = {ชื่อ: 'allin'}; var obj = myCreate (o); obj.name; // Allin

ปัจจุบันเบราว์เซอร์เมเจอร์รุ่นล่าสุด (รวมถึง IE9) ได้ปรับใช้วิธีนี้ หากคุณพบเบราว์เซอร์เก่าคุณสามารถใช้รหัสต่อไปนี้เพื่อปรับใช้ด้วยตัวเอง

 if (! object.create) {object.create = function (o) {function f () {} f.prototype = o; คืน F () ใหม่; - -

มรดกของชั้นเรียน

 Object.create () คนฟังก์ชั่น (ชื่อ, อายุ) {} person.prototype.headcount = 1; person.prototype.eat = function () {console.log ('การกิน ... ');} programmer ฟังก์ชั่น (ชื่อ, อายุ, ชื่อ) // สร้างโปรแกรมเมอร์ความสัมพันธ์การสืบทอด prototype.constructor = โปรแกรมเมอร์; // แก้ไขการชี้ของตัวสร้าง

โทรหาเมธอดพาเรนต์คลาส

 ฟังก์ชั่นบุคคล (ชื่ออายุ) {this.name = name; this.age = age;} person.prototype.headCount = 1; person.prototype.eat = function () {console.log ('การกิน ... ');} โปรแกรมเมอร์ฟังก์ชั่น (ชื่อ, อายุ, ชื่อ) {person.apply (นี่, อาร์กิวเมนต์); // เรียกตัวสร้างของคลาสแม่} programmer.prototype = object.create (person.prototype); programmer.prototype.constructor = programmer; programmer.prototype.language = "js" person.prototype.eat.apply (ข้อโต้แย้ง); // เรียกเมธอดในคลาสพาเรนต์}

บรรจุุภัณฑ์

เนมสเปซ

JS ไม่มีเนมสเปซดังนั้นจึงสามารถจำลองด้วยวัตถุได้

 var app = {}; // แอพ Namespace // โมดูล 1App.Module1 = {ชื่อ: 'Allin', f: function () {console.log ('Hi Robot'); }}; app.module1.name; // "allin" app.module1.f (); // สวัสดีหุ่นยนต์

สมาชิกคงที่

 ฟังก์ชั่นบุคคล (ชื่อ) {var อายุ = 100; this.name = name;} // member person.walk = function () {console.log ('static');}; person.walk (); // คงที่

ส่วนตัวและสาธารณะ

 ฟังก์ชันบุคคล (id) {// คุณสมบัติส่วนตัวและวิธีการ var name = 'allin'; var work = function () {console.log (this.id); - // คุณสมบัติและวิธีการสาธารณะ this.id = id; this.say = function () {console.log ('Say Hello'); work.call (นี่); - var p1 = บุคคลใหม่ (123); p1.name; // undefinedp1.id; // 123p1.say (); // ทักทาย 123

เป็นแบบแยกส่วน

 var modulea; modulea = function () {var prop = 1; ฟังก์ชั่น func () {} return {func: func, prop: prop};} (); // เรียกใช้ฟังก์ชันที่ไม่ระบุชื่อทันที

Prop, func จะไม่รั่วไหลไปสู่ขอบเขตทั่วโลก หรือวิธีการเขียนอื่นใช้ใหม่

 modulea = ฟังก์ชันใหม่ () {var prop = 1; ฟังก์ชั่น func () {} this.func = func; this.prop = prop;}

เกี่ยวกับความหลากหลาย

วิธีการจำลองการโหลดซ้ำ

แอตทริบิวต์อาร์กิวเมนต์สามารถรับจำนวนพารามิเตอร์จริงของการเรียกใช้ฟังก์ชันและสามารถใช้สิ่งนี้เพื่อจำลองการโอเวอร์โหลดของวิธีการ

 ฟังก์ชันสาธิต (a, b) {console.log (demo.length); // รับจำนวนพารามิเตอร์อย่างเป็นทางการคอนโซลล็อก (อาร์กิวเมนต์ความยาว); // รับจำนวนพารามิเตอร์จริง console.log (อาร์กิวเมนต์ [0]); // พารามิเตอร์จริงครั้งแรก 4 console.log (อาร์กิวเมนต์ [1]); // พารามิเตอร์จริงที่สอง 5} การสาธิต (4, 5, 6); // ใช้การเพิ่มฟังก์ชันพารามิเตอร์จริงความยาวตัวแปรเพิ่ม () {var total = 0; สำหรับ (var i = arguments.length-1; i> = 0; i-) {total += อาร์กิวเมนต์ [i]; } return total;} console.log (เพิ่ม (1)); // ใช้การเพิ่มฟังก์ชันพารามิเตอร์จริงความยาวตัวแปรเพิ่ม () {var total = 0; สำหรับ (var i = arguments.length-1; i> = 0; i-) {total += อาร์กิวเมนต์ [i]; } return total;} console.log (เพิ่ม (1)); // 1console.log (เพิ่ม (1, 2, 3)); // 7 // ในกรณีของพารามิเตอร์ที่แตกต่างกันฟังก์ชัน FontSize () {var ele = document.getElementById ('JS'); if (arguments.length == 0) {return ele.style.fontsize; } else {ele.style.fontsize = อาร์กิวเมนต์ [0]; }} FontSize (18); console.log (fontsize ()); // ในกรณีของการตั้งค่าฟังก์ชั่นประเภทต่าง ๆ () {var ele = document.getElementById ('js'); if (typeof อาร์กิวเมนต์ [0] === "object") {สำหรับ (var p ในอาร์กิวเมนต์ [0]) {el.style [p] = อาร์กิวเมนต์ [0] [p]; }} else {ele.style.fontsize = อาร์กิวเมนต์ [0]; Ele.style.BackgroundColor = อาร์กิวเมนต์ [1]; }} การตั้งค่า (18, 'สีแดง'); การตั้งค่า ({fontsize: 20, backgroundColor: 'Green'});

วิธีการเขียนใหม่

 ฟังก์ชั่น f () {} var f = new f (); f.prototype.run = function () {console.log ('f');} f.run (); // ff.run = function () {console.log ('fff');} f.run (); // fff

คลาสนามธรรม

โยนข้อผิดพลาดใหม่ (''); ในคอนสตรัคเตอร์โยนข้อยกเว้น สิ่งนี้จะป้องกันไม่ให้คลาสนี้ถูกเรียกโดยตรง

 ฟังก์ชั่น detectorbase () {โยนข้อผิดพลาดใหม่ ('คลาสนามธรรมไม่สามารถเรียกใช้โดยตรง!');} detectorbase.prototype.detect = function () {console.log ('การตรวจจับเริ่มต้น ... ');}; detectorbase.prototype.stop = function () function () {โยนข้อผิดพลาดใหม่ ('ข้อผิดพลาด');}; // var d = new detectorbase (); // ข้อผิดพลาดที่ไม่ถูกต้อง: คลาสนามธรรมไม่สามารถเรียกใช้โดยตรง! ฟังก์ชั่น linkdetector () {} linkdetector.prottotype = object.create LinkDetector (); console.log (l); // linkdetector {} __ proto__: linkdetectorl.detect (); // การตรวจจับเริ่มต้น ... l.init (); // ข้อผิดพลาดที่ไม่ถูกต้อง: ข้อผิดพลาด