ES6 (ECMASCRIPT 6) เป็นมาตรฐานสำหรับภาษา JavaScript เวอร์ชันใหม่ที่กำลังจะมาถึงชื่อ Harmony (ความหมายของความสามัคคีไม่ได้ติดตามการก้าวของประเทศของฉันเราได้เข้าสู่เวอร์ชั่นฝันจีน) มาตรฐานสุดท้ายได้รับการกำหนดเป็น ES5 ซึ่งออกในปี 2009 ปัจจุบันมาตรฐานของ ES6 กำลังดำเนินการอยู่และคาดว่าจะได้รับการสรุปอย่างเป็นทางการในเดือนธันวาคม 2014 แต่มาตรฐานส่วนใหญ่พร้อมและสนับสนุน ES6 โดยเบราว์เซอร์
วิธีการกำหนดคลาสใน ES6 คือน้ำตาลไวยากรณ์สำหรับการกำหนดคลาสใน ES3 และ ES5 แม้ว่าจะมีความแตกต่างบางอย่าง แต่วิธีโดยรวมในการกำหนดคลาสนั้นมีความรัดกุมมากขึ้นและการสืบทอดในชั้นเรียนนั้นสะดวกกว่า หากคุณต้องการที่จะคุ้นเคยกับการสืบทอดใน ES6 มากขึ้นคุณควรเข้าใจวิธีการสืบทอดต้นแบบใน ES5 มีบทความมากมายในบล็อก Park ที่บอกว่าการสืบทอด JS นักเรียนที่ต้องการมีความเข้าใจในเชิงลึกจะค้นหาตัวเอง
กำหนดคลาส:
แต่ละคลาสที่กำหนดโดยใช้เมธอดคลาสมีฟังก์ชั่นคอนสตรัคเตอร์โดยค่าเริ่มต้น ฟังก์ชั่นนี้เป็นฟังก์ชั่นหลักของฟังก์ชั่นคอนสตรัคเตอร์ สิ่งนี้ภายในฟังก์ชั่นร่างกายชี้ไปที่อินสแตนซ์ที่สร้างขึ้น Say () {} เป็นวิธีการบนต้นแบบ เรากำหนดคลาสง่าย ๆ :
เรียกใช้รหัสต่อไปนี้
"ใช้อย่างเข้มงวด"; บุคคลในชั้นเรียน {constructor (ชื่อ) {this.name = name; } พูดว่า () {console.log ("Say hi"); }}; คนใหม่ (). say (); // คอนโซลจะส่งออกทักทายหมายเหตุ: ชั้นเรียนที่ประกาศใน ES6 ไม่มีปัญหาของการประกาศฟังก์ชั่นล่วงหน้า ชั้นเรียนจะต้องประกาศก่อนแล้วจึงใช้มิฉะนั้นจะมีข้อยกเว้นเกิดขึ้น เราเพียงแค่เปลี่ยนตำแหน่งรหัสในการสาธิตข้างต้นและรายงานข้อผิดพลาดทันที (ถ้าคุณเข้าใจด้วยความคิดใน ES5 ชั้นเรียนที่ประกาศจะไม่ประกาศล่วงหน้าสำหรับคะแนนความรู้เกี่ยวกับการประกาศล่วงหน้าชั้นเรียนที่ประกาศผ่านชื่อคลาส {} คือชื่อคลาส var = ฟังก์ชัน () {});
เรียกใช้รหัสต่อไปนี้
"ใช้อย่างเข้มงวด"; คนใหม่ (). say (); คนในชั้นเรียน {constructor (ชื่อ) {this.name = name; } พูดว่า () {console.log ("Say hi"); -วิธีการคงที่ในการกำหนดฟังก์ชั่น:
หากมีการประกาศแบบคงที่ในวงเล็บปีกกาก่อนชื่อฟังก์ชั่นเมื่อกำหนดฟังก์ชันฟังก์ชั่นนี้เป็นฟังก์ชั่นคงที่วิธีการคงที่และไม่มีส่วนเกี่ยวข้องกับต้นแบบ:
เรียกใช้รหัสต่อไปนี้
"ใช้อย่างเข้มงวด"; บุคคลในชั้นเรียน {constructor (ชื่อ) {this.name = name; } Static Says () {console.log ("Say Hi"); }}; person.say ();กำหนดวิธีการต้นแบบ:
กำหนดวิธีการต้นแบบและประกาศโดยตรงเช่นนี้: ชื่อฟังก์ชัน () {} วงเล็บเป็นรายการพารามิเตอร์และวงเล็บปีกกาคือบล็อกโค้ด วิธีการกำหนดต้นแบบใน ES5 คือการใช้: constructor.prototype ชื่อวิธีต้นแบบชื่อ () {} แบบฟอร์มการเขียนนี้ยุ่งยากมาก วิธีการกำหนดต้นแบบโดยใช้ ES6 เป็นเหมือน Java และ C# เหล่านี้เป็นลักษณะของภาษาที่ค่อนข้างสูง:
เรียกใช้รหัสต่อไปนี้
"ใช้อย่างเข้มงวด"; บุคคลในชั้นเรียน {constructor (ชื่อ) {this.name = name; } พูดว่า () {console.log ("Say hi"); } sing () {console.log ("lalalala"); }}; คนใหม่ (). say (); // เอาท์พุท: พูดคน hinev (). ร้องเพลง (); // เอาท์พุท: lalalalalaคุณสมบัติคงที่และคุณสมบัติต้นแบบ:
มันค่อนข้างยุ่งยากในการกำหนดคุณสมบัติคงที่หลังจากนิยามคลาสเสร็จสิ้น ผู้เขียนภาษาใช้วิธีนี้เพื่อหลีกเลี่ยงความสับสนในรหัส คุณสมบัติคงที่ทั้งหมดถูกกำหนดไว้ในสถานที่เดียวกันดังนั้นรหัสจะได้มาตรฐานมากขึ้นได้อย่างไร?
เรียกใช้รหัสต่อไปนี้
"ใช้อย่างเข้มงวด"; บุคคลในชั้นเรียน {constructor (ชื่อ) {this.name = name; }}; person.hands = 2; console.log (person.hands);ไม่สามารถกำหนดแอตทริบิวต์บนต้นแบบได้ เราสามารถกำหนดชุดและรับบนต้นแบบค่าและ setter เท่านั้น โปรดทราบว่าค่าและ setter อยู่บนต้นแบบ ... :
เรียกใช้รหัสต่อไปนี้
บุคคลในชั้นเรียน {constructor (_name) {this._name = _name; } รับชื่อ () {return this._name; } ตั้งชื่อ (_name) {this._name = _name; }} var p = บุคคลใหม่ (); p.name = "heheda"; console.log (p.name); // ผลลัพธ์: hehedaconsole.log (p._name); // เอาท์พุท: hehedaหากคุณต้องการกำหนดแอตทริบิวต์ต้นแบบให้กำหนดแอตทริบิวต์ภายในตัวสร้าง หากได้รับการสืบทอดคลาสย่อยจะสืบทอดแอตทริบิวต์ของคลาสแม่ด้วย:
เรียกใช้รหัสต่อไปนี้
บุคคลในชั้นเรียน {constructor () {this.name = "default"; }} คนในชั้นเรียนขยายบุคคล {constructor () {super (); }} console.log (คนใหม่ (). ชื่อ);มรดกขยายของชั้นเรียน:
ES5 มีมรดกอยู่แล้ว แต่การสืบทอดแบบนี้มักจะไหลเวียน ES6 การสืบทอดจะขึ้นอยู่กับการห่อหุ้มมรดกต้นแบบ (น้ำตาลคำพ้อง) แม้ว่ามันจะง่ายกว่ามาก แต่การสืบทอดของ Java นั้นง่ายต่อการเรียนรู้ Sman ในตัวอย่างการสาธิตต่อไปนี้หมายถึงซูเปอร์แมนอย่าคิดอย่างนั้น
เรียกใช้รหัสต่อไปนี้
"ใช้อย่างเข้มงวด"; บุคคลในชั้นเรียน {constructor (ชื่อ) {this.name = name; } พูดว่า () {console.log ("Say hi"); คืนสิ่งนี้; }}; คลาส sman ขยายบุคคล {constructor (ชื่อ, พลัง) {super (ชื่อ); this.SuperPower = Power; } show () {console.log (this.superpower); คืนสิ่งนี้; }} console.log (ใหม่ sman ("Clark", "pee"). show (). say (). ชื่อ); // เอาท์พุท: ฉี่กล่าวว่าสวัสดีคลาร์กหากคุณต้องการใช้การสืบทอด Super () จะต้องดำเนินการในคลาสย่อยเพื่อเรียกคลาสพาเรนต์ มิฉะนั้นคอมไพเลอร์จะโยนข้อผิดพลาด Super ใน subclass มีสามฟังก์ชั่น สิ่งแรกคือเรียกมันโดยตรงว่าเป็นตัวสร้างที่สองคือทำหน้าที่เป็นอินสแตนซ์ของคลาสแม่และที่สามคือการเรียกวิธีการคงที่ของคลาสแม่ในวิธีการคงที่ในคลาสย่อย;
ความแตกต่างที่สำคัญระหว่างการสืบทอด ES6 และการสืบทอด ES5 การสืบทอดที่ใช้กันทั่วไปใน ES5 คือการตั้งค่าต้นแบบของคลาสย่อยเป็นอินสแตนซ์ของคลาสแม่ คลาสย่อยตามธรรมชาติมีวิธีการและคุณสมบัติทั้งหมดของคลาสแม่:
เรียกใช้รหัสต่อไปนี้
var sup = function () {this.sub = true;}; sup.prototype.protosup = {sup: "sup"}; var sub = function () {this.sub = true;}; sub.prototype = new sup (); // สืบทอดต้นแบบ; sub.prototype.constructor = sub; // แก้ไขตัวสร้าง;มรดกที่ใช้ใน ES6 นั้นยอดเยี่ยมกว่าและจะไม่ถูกรบกวนจากชั้นเรียนหลัก การสืบทอดนี้เป็นการรวมกันของการใช้มรดกและการใช้งานมรดกต้นแบบ:
เรียกใช้รหัสต่อไปนี้
var sup = function () {this.sub = true;}; var sub = function () {this.sup = true; sup.apply (นี่); // สืบทอดคุณสมบัติและวิธีการของสิ่งนี้;}; sub .__ proto__ = sup; // สืบทอดคุณสมบัติคงที่ของ SUP; sub.prototype = object.create (sup.prototype, {constructor: {value: sub, enumerable: false, writable: true, กำหนดค่าได้: true}}); // สืบทอดคุณลักษณะต้นแบบและเขียนทับคอนสตรัคเตอร์มันง่ายกว่าที่จะเห็นความแตกต่างระหว่างทั้งสองกับรูปภาพและรูปภาพแสดงความแตกต่างระหว่างการสืบทอดระหว่าง ES5 และ ES6: http://keenwon.com/1524.html;
ES5 จำลองการสืบทอดของ ES6:
เนื่องจาก Transcoder Babel เราสามารถใช้รหัส ES5 เพื่อสำรวจว่า ES6 ได้ดำเนินการอย่างไรและการสืบทอด ES6: การสืบทอด:
เรียกใช้รหัสต่อไปนี้
"ใช้อย่างเข้มงวด"; บุคคลในชั้นเรียน {constructor (ชื่อ) {this.name = name; } พูดว่า () {console.log ("Say hi"); คืนสิ่งนี้; }}; คลาส sman ขยายบุคคล {constructor (ชื่อ, พลัง) {super (ชื่อ); this.SuperPower = Power; } show () {console.log (this.superpower); คืนสิ่งนี้; }} console.log (ใหม่ sman ("Clark", "pee"). show (). say (). ชื่อ);หลังจากใช้ Babel เพื่อแปลงเป็น ES5 รหัสก็กลายเป็นเช่นนี้ ฉันเพิ่มความคิดเห็นตัวเองเล็กน้อยยกโทษให้ฉันเพราะเป็นอิสระที่ไม่เกรงกลัวและรัก ... ::
เรียกใช้รหัสต่อไปนี้
var _createClass = function () {function defelEproperties (เป้าหมาย, อุปกรณ์ประกอบฉาก) {สำหรับ (var i = 0; i <props.length; i ++) {var descriptor = props [i]; descriptor.enumerable = descriptor.enumerable || เท็จ; descriptor.configalle = true; if ("value" ใน descriptor) descriptor.writable = true; Object.defineProperty (เป้าหมาย, descriptor.key, descriptor); }} ฟังก์ชั่นการส่งคืน (ตัวสร้าง, protoprops, staticprops) {// คัดลอกต้นแบบถ้า (protoprops) defeleproperties (constructor.prototype, protoprops); // คัดลอกคุณสมบัติถ้า (StaticProps) DefinEproperties (Constructor, StaticProps); ตัวสร้างกลับ; - - ฟังก์ชั่น _classCallCheck (อินสแตนซ์, ตัวสร้าง) {ถ้า (! (อินสแตนซ์อินสแตนซ์ของตัวสร้าง)) {โยน typeError ใหม่ ("ไม่สามารถเรียกคลาสเป็นฟังก์ชัน"); }} ฟังก์ชั่น _possibleConstructorreturn (ตัวเองโทร) {ถ้า (! ตัวเอง) {โยน referenceReRESS ใหม่ ("สิ่งนี้ยังไม่ได้เริ่มต้น - super () ไม่ได้ถูกเรียก"); } return call && (typeof call === "object" || typeof call === "function")? โทร: ตัวเอง; } // ต่อไปนี้เป็นรหัสที่แสดงใน ES6 สืบทอด _inherits ใช้การสืบทอดของต้นแบบและการสืบทอดของแอตทริบิวต์สถานะระดับพาเรนต์: ฟังก์ชั่น _inherits (subclass, superclass) {ถ้า (typeof superclass! == "function" && superclass! == null) {โยน typeerror ใหม่ ( } // สืบทอดต้นแบบของคลาสแม่และแก้ไขตัวสร้างเป็นคลาสย่อย; subclass.prototype = object.create (superclass && superclass.prototype, {constructor: {value: subclass, enumerable: false, writable: true, กำหนดค่า: true}}); // กำหนด __proto__ สำหรับวัตถุ subclass เพื่อให้สามารถสืบทอดแอตทริบิวต์แบบคงที่ if (superclass) object.setPrototypeof? Object.setPrototypeof (subclass, superclass): subclass .__ proto__ = superclass; // สุดท้ายถ้านักพัฒนา: subclass ใหม่สถานะจริงคือ: Object {__proto __: คลาสหลัก, ตัวสร้าง: subclass}}; /* var sup = function () {}; var sub = function () {}; _inherits (sub, sup); // ความหมายของการใช้มรดกนี้; ในฐานะที่เป็น subclass ของวัตถุสืบทอดคลาสหลักในฐานะตัวสร้าง subclass สืบทอด sub.prototype .__ proto__ === sup.prototype // true sub.prototype.constructor === sub; // true sub .__ proto__ === this.name = ชื่อ; } _CreateClass (บุคคล, [{คีย์: "พูด", ค่า: ฟังก์ชั่นบอกว่า () {console.log ("Say hi"); return this;}}]); คนกลับ; - - var sman = function (_person) {_inherits (sman, _person); ฟังก์ชั่น sman (ชื่อ, พลัง) {// ในเวลานี้. __ proto__ ได้ชี้ไปที่ต้นแบบของตัวสร้าง _classcallcheck (นี่, sman); // ประโยคนี้เทียบเท่ากับ super () ใน ES6 ผ่านแอตทริบิวต์ของคลาสแม่ผ่านการโทรและดำเนินการมรดก; var _this = _possibleConstructorreturn (นี่, object.getPrototypeof (sman). call (ชื่อนี้)); _This.SuperPower = Power; // ส่งคืนแบบไดนามิก _ นี่; กลับ _ นี่; } _CreateClass (sman, [{key: "show", value: function show () {console.log (this.superpower); return this;}}]); กลับมาสแมน; }(บุคคล); console.log (ใหม่ sman ("Clark", "pee"). show (). say (). ชื่อ);การสืบทอดหลายครั้ง:
ใช้ Mix-in เพื่อให้ได้หลายมรดกและวิธีการเขียนคือ: คลาสย่อยขยายการผสม (OBJ0, OBJ1, OBJ2) Mix เป็นเพียงวิธีการเราต้องกำหนดวิธีนี้ด้วยตนเอง:
เรียกใช้รหัสต่อไปนี้
<html> <head> <meta charset = "utf-8"> </head> <body> <body> <script> "ใช้อย่างเข้มงวด"; ฟังก์ชั่นผสม (... mixins) {class mix {} สำหรับ (ให้ mixin ของ mixins) {copyproperties (mix, mixin); CopyProperties (mix.prototype, mixin.prototype); } return mix; } function copyProperties (เป้าหมาย, แหล่งที่มา) {สำหรับ (ให้คีย์ของ rechorm.ownkeys (แหล่งที่มา)) {ถ้า (คีย์! == "constructor" && key! == "ต้นแบบ" && key! == "name") Object.defineProperty (เป้าหมาย, คีย์, desc); }}} คนในคลาส {work () {console.log ("ทำงาน"); }} ชั้นเรียนผู้หญิง {say () {console.log ("พูด"); }} คลาส Superman ขยาย Mix (Man, Woman) {constructor () {super (); }} var sm = new superman (); Sm.work (); Sm.say (); // ในความเป็นจริงพวกเขาไม่มีความสัมพันธ์การสืบทอดพวกเขาเพียงแค่คัดลอกแอตทริบิวต์ไปยังคลาสย่อย; console.log (sm instance man); console.log (SM Instance Woman); </script> </body> </html>ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับคุณสมบัติใหม่ของ JavaScript ES6 ที่บรรณาธิการแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!