สรุปจุดความรู้พื้นฐานของ JavaScript (แนะนำ)

ตัวแปรที่กำหนดไว้นอกฟังก์ชั่นจะต้องเป็นตัวแปรส่วนกลาง ตัวแปรที่กำหนดไว้ในฟังก์ชั่นหากมีการประกาศ VAR แล้วตัวแปรจะเป็นตัวแปรท้องถิ่น หากไม่ได้ประกาศ VAR ตัวแปรจะเป็นตัวแปรส่วนกลาง

จาวาสคริปต์

 var global = "global"; test (); การทดสอบฟังก์ชั่น () {var local = "local"; document.writeln (ทั่วโลก); document.writeLn (local);} document.writeln (ทั่วโลก); document.writeln (local);

2. คุกกี้สองประเภท

i) คุกกี้ถาวรจะถูกเก็บไว้ในฮาร์ดดิสก์ของลูกค้า

ii) ตอบคุกกี้: มันจะไม่ถูกเก็บไว้ในฮาร์ดดิสก์ของลูกค้า แต่จะถูกวางไว้ในหน่วยความจำของกระบวนการเบราว์เซอร์ เมื่อเบราว์เซอร์ถูกปิดคุกกี้ตอบกลับจะถูกทำลาย

3. ใน JavaScript ฟังก์ชั่นเป็นวัตถุ

4. ใน JavaScript ไม่มีแนวคิดของวิธีการ (ฟังก์ชั่น) มากเกินไป

5. วัตถุฟังก์ชัน

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

6. อาร์กิวเมนต์วัตถุโดยนัย

ใน JavaScript แต่ละฟังก์ชั่นมีอาร์กิวเมนต์วัตถุโดยนัยซึ่งแสดงถึงพารามิเตอร์ที่ส่งผ่านไปยังฟังก์ชันจริง อาร์กิวเมนต์ความยาวแสดงจำนวนพารามิเตอร์ที่ผ่านจริง

7. ชื่อฟังก์ชั่นความยาว

วัตถุฟังก์ชั่นแต่ละรายการมีแอตทริบิวต์ความยาวซึ่งระบุจำนวนพารามิเตอร์ที่ฟังก์ชั่นคาดว่าจะยอมรับ มันแตกต่างจากอาร์กิวเมนต์ของฟังก์ชั่น อาร์กิวเมนต์ความยาวแสดงจำนวนพารามิเตอร์ที่ได้รับการยอมรับจากฟังก์ชันจริง

8. มีข้อมูลดั้งเดิมห้าชนิดใน JavaScript

ไม่ได้กำหนด, โมฆะ, บูลีน, ตัวเลขและสตริง (หมายเหตุ: ใน JavaScript ไม่มีชนิดข้อมูลถ่าน)

มีค่าเดียวสำหรับประเภทข้อมูลที่ไม่ได้กำหนด: undefined;

มีค่าเดียวสำหรับประเภทข้อมูล null: null;

มีสองค่าของประเภทข้อมูลบูลีน: จริงและเท็จ;

9. ผู้ประกอบการประเภทของ

Typeof เป็นตัวดำเนินการที่ไม่ได้ตามด้วยชื่อของตัวแปร มันถูกใช้เพื่อรับชนิดข้อมูลของตัวแปร ค่าที่ส่งคืนคือ: ไม่ได้กำหนด, บูลีน, ตัวเลข, สตริงและวัตถุ

10. ใน JavaScript หากฟังก์ชั่นไม่ได้ประกาศค่าส่งคืนมันจะส่งคืนความสัมพันธ์ระหว่าง undefined11, null และ undefined

ไม่ได้กำหนดนั้นมาจาก Null ตัวอย่างเช่น:

ความสัมพันธ์ระหว่าง NULL และ Undefined

จาวาสคริปต์

 การแจ้งเตือน (undefined == null); // เบราว์เซอร์ส่งคืนจริง

11. การแปลงประเภทบังคับ

มี 3 casts ใน JavaScript: บูลีน (ค่า), หมายเลข (ค่า), สตริง (ค่า)

12. วัตถุวัตถุ

ใน JavaScript วัตถุทั้งหมดได้รับการสืบทอดมาจากวัตถุวัตถุ

วัตถุวัตถุ

จาวาสคริปต์

 var object = new Object (); สำหรับ (var v ในวัตถุ) {Alert (V);}

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

คุณสมบัติในวัตถุวัตถุไม่สามารถระบุได้

จาวาสคริปต์

 การแจ้งเตือน (Object.propertyisenumerable ("Prototype"));

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

ถัดไปมาดูกันว่าคุณสมบัติในวัตถุหน้าต่างสามารถระบุได้หรือไม่

คุณสมบัติในวัตถุหน้าต่างมีการแจกแจง

จาวาสคริปต์

 สำหรับ (var v ในหน้าต่าง) {console.log (v);}

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

13. ใน JavaScript คุณสามารถเพิ่มแอตทริบิวต์ของวัตถุหรือลบแอตทริบิวต์ของวัตถุแบบไดนามิกแบบไดนามิก

เพิ่ม/ลบคุณสมบัติของวัตถุแบบไดนามิกแบบไดนามิก

จาวาสคริปต์

 var object = new Object (); Alert (Object.username); // undefined Object.username = "Zhangsan"; Alert (Object.username); // zhangsan object ["รหัสผ่าน"] = "123"; แจ้งเตือน (object.password);

14. วิธีที่พบบ่อยที่สุดในการกำหนดวัตถุใน JavaScript

วิธีที่พบบ่อยที่สุดในการกำหนดวัตถุ

จาวาสคริปต์

 var object = {ชื่อผู้ใช้: "Zhangsan", รหัสผ่าน: 12345}; Alert (Object.username); แจ้งเตือน (Object.password);

15. อาร์เรย์

คำจำกัดความของอาร์เรย์

จาวาสคริปต์

 // วิธีการ 1 var array = array ใหม่ (); array.push (1); array.push (2); array.push (3); Alert (array.length); // วิธีที่ 2 (แนะนำ) var array = [1,25,4]; array.sort (); การแจ้งเตือน (อาร์เรย์);

เรียกวิธีการเรียงลำดับ () ของอาร์เรย์และเบราว์เซอร์พิมพ์ 1, 25, 4 ซึ่งไม่ใช่ผลลัพธ์ที่เราคาดหวัง

สำหรับวิธีการเรียงลำดับของอาร์เรย์ JavaScript มันจะแปลงเนื้อหาที่จะจัดเรียงเป็นสตริง (เรียกว่าวิธี TOSTRING ()) และจัดเรียงตามลำดับของสตริง

วิธีการต่อไปนี้สามารถรับผลลัพธ์ที่เราคาดหวัง (เรียงตามขนาดอาร์เรย์):

การจัดเรียงอาร์เรย์

จาวาสคริปต์

 ฟังก์ชั่นเปรียบเทียบ (num1, num2) {var temp1 = parseint (num1); var temp2 = parseint (num2); if (temp1 <temp2) {return -1; } อื่นถ้า (temp1 == temp2) {return 0; } else {return 1; }} var array = [1,25,3]; array.sort (เปรียบเทียบ); แจ้งเตือน (อาร์เรย์);

จากนั้นเรานำไปใช้ในฟังก์ชั่นที่ไม่ระบุชื่อ:

การเรียงลำดับฟังก์ชันที่ไม่ระบุชื่อ

จาวาสคริปต์

 var array = [1,25,3]; array.sort (ฟังก์ชั่น (num1, num2) {var temp1 = parseint (num1); var temp2 = parseint (num2); ถ้า (temp1 <temp2) {return -1;} อื่นถ้า (temp1 == temp2) {return 0;} {return 1;}}); การแจ้งเตือน (อาร์เรย์);

16. ห้าวิธีในการกำหนดวัตถุใน JavaScript (ไม่มีแนวคิดของคลาสใน JavaScript, วัตถุเท่านั้น) i) ขยายคุณสมบัติและวิธีการตามวัตถุที่มีอยู่

ขยายคุณสมบัติและวิธีการตามวัตถุที่มีอยู่

จาวาสคริปต์

 var object = new Object (); // เพิ่มแอตทริบิวต์ชื่อ Object.name = "Zhangsan"; // เพิ่ม method method sayname object.sayname = ฟังก์ชั่น (ชื่อ) {this.name = name; การแจ้งเตือน (this.name);}; object.sayname ("kyle"); // เรียกเมธอด sayname แอตทริบิวต์ชื่อจะถูกแก้ไขเป็น kyle และเบราว์เซอร์จะพิมพ์ kyle

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

ii) สร้างวัตถุในโรงงาน

วิธีการจากโรงงานที่ไม่มีพารามิเตอร์:

จาวาสคริปต์

 // ฟังก์ชั่นวิธีการเป็นโรงงาน createObject () {var object = new Object (); // สร้างวัตถุวัตถุ name = "Zhangsan"; // เพิ่มแอตทริบิวต์ชื่อ object.password = "123"; // เพิ่มแอตทริบิวต์รหัสผ่าน object.get = function () {// เพิ่มการแจ้งเตือนวิธีการรับ - return object; // ส่งคืนวัตถุนี้} var object1 = createObject (); // ปฏิทิน A CreateObject Factory Method เพื่อสร้าง Object1Var Object2 = createObject (); // วิธีการสร้างโรงงานสร้างวัตถุเพื่อสร้าง Object2Object1.get ();

วิธีการจากโรงงานที่มีพารามิเตอร์:

จาวาสคริปต์

 ฟังก์ชั่น createObject (ชื่อ, รหัสผ่าน) {var object = new Object (); Object.name = ชื่อ; Object.password = รหัสผ่าน; Object.get = function () {Alert (this.name+","+this.password); - return object;} var object1 = createObject ("Zhangsan", "123"); var object2 = createObject ("lisi", "456"); object1.get (); object2.get ();

ข้อเสียของสองวิธีจากโรงงานข้างต้นโดยไม่มีพารามิเตอร์และด้วยพารามิเตอร์:

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

วิธีการที่ดีขึ้นจากโรงงาน:

จาวาสคริปต์

 ฟังก์ชั่น get () {การแจ้งเตือน (this.name+","+this.password);} function createObject (ชื่อ, รหัสผ่าน) {var object = new Object (); Object.name = ชื่อ; Object.password = รหัสผ่าน; Object.get = get; return object;} var object1 = createObject ("Zhangsan", "123"); var object2 = createObject ("lisi", "456"); object1.get (); object2.get ();

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

iii) วิธีตัวสร้างเพื่อสร้างวัตถุ

ตัวสร้างที่ไม่มีพารามิเตอร์:

จาวาสคริปต์

 Function Person () {// ก่อนที่จะดำเนินการบรรทัดแรกของรหัสเอ็นจิ้น JS จะสร้างวัตถุสำหรับเรา this.name = "จางซาน"; this.password = "123"; this.getInfo = function () {Alert (this.name+","+this.password); - // มีคำสั่งส่งคืนโดยนัยที่นี่เพื่อส่งคืนวัตถุที่สร้างขึ้นก่อนหน้านี้ (ซึ่งเป็นสถานที่ที่แตกต่างจากวิธีการโรงงาน)} var p1 = บุคคลใหม่ (); p1.getInfo ();

ตัวสร้างที่มีพารามิเตอร์

จาวาสคริปต์

 ฟังก์ชั่นบุคคล (ชื่อรหัสผ่าน) {this.name = name; this.password = รหัสผ่าน; this.getInfo = function () {Alert (this.name+","+this.password); };} var p1 = บุคคลใหม่ ("จาง", "123"); var p2 = บุคคลใหม่ ("lisi", "456"); p1.getinfo (); p2.getinfo ();

iv) การสร้างวัตถุต้นแบบ (ต้นแบบ)

ต้นแบบเป็นคุณสมบัติในวัตถุวัตถุ

ต้นแบบ

จาวาสคริปต์

 ฟังก์ชันบุคคล () {} person.prototype.name = "zhangsan"; person.prototype.password = "123"; person.prototype.getInfo = function () {แจ้งเตือน (this.name+"," password);}; var p1 = บุคคลใหม่ (); var p2 = บุคคลใหม่ (); p1.name = "kyle"; // หลังจากสร้างวัตถุให้เปลี่ยนแอตทริบิวต์ p1.getInfo (); p2.getInfo ();

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

ต้นแบบ

จาวาสคริปต์

 ฟังก์ชันบุคคล () {} person.prototype.name = new Array (); person.prototype.password = "123"; person.prototype.getInfo = function () {แจ้งเตือน var p1 = บุคคลใหม่ (); var p2 = บุคคลใหม่ (); p1.name.push ("จาง"); p1.name.push ("lisi"); p1.password = "456"; p1.getinfo (); p2.getinfo ()

เบราว์เซอร์จะพิมพ์: จางซาน, Lisi, 456 และจางซาน, Lisi, 123

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

ใช้ Prototype + Constructor เพื่อกำหนดวัตถุ

จาวาสคริปต์

 ฟังก์ชันบุคคล () {this.name = new Array (); this.password = "123";} person.prototype.getInfo = function () {alert (this.name+","+this.password);}; var p1 = บุคคลใหม่ (); var p2 = บุคคลใหม่ (); p1.name.push ("จาง"); p2.name.push ("lisi"); p1.getInfo (); p2.getInfo ();

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

v) วิธีการต้นแบบแบบไดนามิก

จาวาสคริปต์

 ฟังก์ชั่นบุคคล () {this.name = "Zhangsan"; this.password = "123"; if (typeof person.flag == "undefined") {แจ้งเตือน ("เรียกใช้"); person.prototype.getInfo = function () {Alert (this.name + "," + this.password); } person.flag = true; }} var p1 = บุคคลใหม่ (); var p2 = บุคคลใหม่ (); p1.getInfo (); p2.getInfo ();

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

17. มรดกของวัตถุใน JavaScript (5 วิธี)

วิธีแรก: การแอบอ้างวัตถุ

เลียนแบบการสืบทอดวัตถุ

จาวาสคริปต์

 // เป็นผู้นำฟังก์ชันการเรียนคลาส (ชื่อผู้ใช้) {this.userName = ชื่อผู้ใช้; this.sayhello = function () {Alert (this.username); };} // ฟังก์ชั่น subclass child (ชื่อผู้ใช้, รหัสผ่าน) {// รหัสสามบรรทัดต่อไปนี้เป็นสิ่งสำคัญที่สุด this.method = พาเรนต์; นี่คือวิธีการ (ชื่อผู้ใช้); ลบสิ่งนี้วิธี; this.password = รหัสผ่าน; this.sayworld = function () {Alert (this.password); };} var p = ผู้ปกครองใหม่ ("จาง"); var c = เด็กใหม่ ("lisi", "123"); P.Sayhello (); C.Sayhello (); C.SayWorld ()

วิธีที่สอง: โทร ()

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

การโทรสืบทอดคลาสแม่

จาวาสคริปต์

 การทดสอบฟังก์ชั่น (str) {แจ้งเตือน (this.name+","+str);} var object = new Object (); object.name = "Zhangsan"; // test.call เทียบเท่ากับการเรียกฟังก์ชั่นทดสอบการทดสอบ (วัตถุ "html5war");

ต่อไปเราใช้วิธีการโทรเพื่อใช้การสืบทอดวัตถุ

จาวาสคริปต์

 // เป็นผู้นำฟังก์ชันการเรียนคลาส (ชื่อผู้ใช้) {this.userName = ชื่อผู้ใช้; this.sayhello = function () {Alert (this.username); };} // ฟังก์ชั่น subclass child (ชื่อผู้ใช้, รหัสผ่าน) {parent.call (ชื่อผู้ใช้); this.password = รหัสผ่าน; this.sayworld = function () {Alert (this.password); };} var p = ผู้ปกครองใหม่ ("จาง"); var c = เด็กใหม่ ("lisi", "123"); P.Sayhello (); C.Sayhello (); C.SayWorld ();

วิธีที่สาม: ใช้ ()

ใช้สืบทอดคลาสแม่

จาวาสคริปต์

 // เป็นผู้นำฟังก์ชันการเรียนคลาส (ชื่อผู้ใช้) {this.userName = ชื่อผู้ใช้; this.sayhello = function () {Alert (this.username); };} // ฟังก์ชั่น subclass child (ชื่อผู้ใช้, รหัสผ่าน) {parent.apply (นี่, อาร์เรย์ใหม่ (ชื่อผู้ใช้)); this.password = รหัสผ่าน; this.sayworld = function () {Alert (this.password); };} var p = ผู้ปกครองใหม่ ("จาง"); var c = เด็กใหม่ ("lisi", "123"); P.Sayhello (); C.Sayhello (); C.SayWorld ();

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

มีความแตกต่างระหว่างวิธีการสมัครและวิธีการโทร: parent.apply (นี่คืออาร์เรย์ใหม่ (ชื่อผู้ใช้)); พารามิเตอร์ที่สองที่ผ่านเป็นอาร์เรย์ในขณะที่วิธีการโทรผ่านพารามิเตอร์ข้อมูลที่ไม่ต่อเนื่อง วิธีการทั้งสองนี้ไม่สามารถพูดได้ว่าดีและไม่ดีขึ้นอยู่กับสถานการณ์การใช้งานเฉพาะ

วิธีที่สี่: วิธีลูกโซ่ต้นแบบ (ไม่สามารถผ่านพารามิเตอร์ไปยังตัวสร้าง)

มรดกลูกโซ่ต้นแบบ

จาวาสคริปต์

 ฟังก์ชัน parent () {} parent.prototype.hello = "hello"; parent.prototype.sayhello = function () {Alert (this.hello);}; ฟังก์ชั่นเด็ก () {} child.prototype = ผู้ปกครองใหม่ (); child.prototype.world = "World"; child.prototype.sayworld = function () {Alert (this.world);}; var c = เด็กใหม่ (); C.Sayhello (); C.SayWorld ();

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

วิธีที่ห้า: วิธีผสม (แนะนำ)

ใช้วิธีการไฮบริดเพื่อใช้การสืบทอดวัตถุ

จาวาสคริปต์

 ฟังก์ชั่นพาเรนต์ (สวัสดี) {this.hello = hello;} parent.prototype.sayhello = function () {Alert (this.hello);} function child (สวัสดีโลก) {parent.call (นี่สวัสดี); this.world = world;} child.prototype = ผู้ปกครองใหม่ (); child.prototype.sayworld = function () {Alert (this.world);} var c = เด็กใหม่ ("สวัสดี", "โลก"); C.Sayhello (); C.Sayworld ();

บทสรุปด้านบนของจุดความรู้พื้นฐาน JavaScript (แนะนำ) คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น