ES6 (Ecmascript 6) - это стандарт для новой новой версии языка JavaScript, кодовой Harmony (значение гармонии, очевидно, не следит за темпом моей страны, мы вошли в версию китайской мечты). Последний стандарт был сформулирован как ES5, который был выпущен в 2009 году. В настоящее время стандартизация ES6 ведется, и официально завершенная версия, как ожидается, будет выпущена в декабре 2014 года. Но большинство стандартов готовы, а также внедряется поддержка ES6 от браузеров.
Способ определения классов в ES6 является синтаксисом сахара для определения классов в ES3 и ES5. Хотя есть некоторые различия, общий способ определения классов является более кратким, а наследование класса более удобно. Если вы хотите быть более знакомым с наследством в ES6, лучше всего понять метод прототипа наследования в ES5. В парке блога есть много статей, в которых говорится о наследстве JS. Студенты, которые хотят иметь глубокое понимание, будут искать его сами;
Определите класс:
Каждый класс, определенный с использованием метода класса, по умолчанию имеет функцию конструктора. Эта функция является основной функцией функции конструктора. Это внутри корпуса функции указывает на сгенерированный экземпляр. Say () {} - это метод на прототипе. Мы определяем простой класс:
Запустите следующий код
«Использовать строгое»; класс Person {Constructor (name) {this.Name = name; } shower () {console.log ("Скажи привет"); }}; new Person (). say (); // консоль выведетПРИМЕЧАНИЕ. У класса, объявленного в ES6, нет проблемы с объявлением функции заранее. Класс должен быть объявлен сначала, а затем используется, в противном случае произойдет исключение. Мы просто изменяем позицию кода в приведенной выше демонстрации и немедленно сообщаем об ошибке. (Если вы понимаете это с мышлением в ES5, объявленный класс не объявляет заранее. Для знаний о объявлении заранее класс, объявленный через имя класса {}, является именем класса VAR = function () {});
Запустите следующий код
«Использовать строго»; new Person (). SAIN (); класс Person {Constructor (name) {this.name = name; } shower () {console.log ("Скажи привет"); }};Статические методы определения функций:
Если статический объявляется в скобках перед именем функции при определении функции, то эта функция является статической функцией, статическим методом и не имеет ничего общего с прототипом:
Запустите следующий код
«Использовать строгое»; класс Person {Constructor (name) {this.Name = name; } static shows () {console.log ("Скажи привет"); }}; Person.say ();Определите метод прототипа:
Определите метод прототипа и объявите его напрямую как следующее: function name () {}, кронштейны являются списком параметров, а скобки являются кодовыми блоками. Метод определения прототипа в ES5 заключается в использовании: Constructor.Prototype. Prototype Method name () {}. Эта форма письма очень громоздкая. Способ определения прототипа с использованием ES6 немного похож на Java и C#. Это характеристики относительно высоких языков:
Запустите следующий код
«Использовать строгое»; класс Person {Constructor (name) {this.Name = name; } shower () {console.log ("Скажи привет"); } sing () {console.log ("lalalala"); }}; new Person (). say (); // Вывод: скажем, Hinev Person (). Sing (); // Выход: ЛалалалалаСтатические свойства и свойства прототипа:
Немного сложно определить статические свойства после завершения определения класса. Автор языка реализует этот метод, чтобы избежать путаницы кода. Все статические свойства определены в одном и том же месте, так как же код может быть более стандартизирован?
Запустите следующий код
«Использовать строгое»; класс Person {Constructor (name) {this.Name = name; }}; Person.hands = 2; console.log (person.hands);Атрибуты не могут быть определены на прототипе. Мы можем только определить набор и попасть на прототип, значение и сеттер. Обратите внимание, что значение и сеттер находятся на прототипе ...:
Запустите следующий код
Class Person {Constructor (_name) {this._name = _name; } получить name () {return this._name; } set name (_name) {this._name = _name; }} var p = new Person (); p.name = "heheda"; console.log (p.name); // Вывод: hehedaconsole.log (p._name); // Вывод: ХехедаЕсли вы хотите определить атрибут прототипа, просто определите атрибут внутри конструктора. Если он унаследован, подкласс также будет наследовать атрибут родительского класса:
Запустите следующий код
Class Person {constructor () {this.name = "default"; }} класс Человек Extends Person {constructor () {super (); }} console.log (new Man (). name);Наследство продлевает класса:
ES5 уже имеет наследство, но этот вид наследства часто циркулирует. Наследование ES6 основано только на инкапсуляции наследования прототипа (синоним сахара). Хотя это действительно намного проще, Java наследство легче выучить. Смон в следующем демонстрационном примере означает Супермена, не думайте так;
Запустите следующий код
«Использовать строгое»; класс Person {Constructor (name) {this.Name = name; } shower () {console.log ("Скажи привет"); вернуть это; }}; класс Sman Extends Person {constructor (имя, power) {super (name); this.superpower = power; } show () {console.log (this.superpower); вернуть это; }} console.log (new sman ("clark", "pee"). show (). say (). name); // Вывод: Пи говорит привет КларкЕсли вы хотите использовать наследство, Super () должен быть выполнен в подклассе, чтобы вызвать родительский класс. В противном случае компилятор бросит ошибку. Супер в подкласс имеет три функции. Первый - это назвать его непосредственно в качестве конструктора, вторым является действовать как экземпляр родительского класса, а третьим является вызов статического метода родительского класса в статическом методе в подклассе;
Основное различие между наследованием 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, upumerable: false, записываемость: true, настраивается: true}}); // наследуют атрибуты прототипа и перезаписать конструктор;Легче увидеть разницу между ними с изображениями, и изображение показывает разницу между наследством между ES5 и ES6: http://keenwon.com/1524.html;
ES5 имитирует наследование ES6:
Из -за транскодерного вавиля мы можем использовать код ES5 для изучения того, как реализуется наследование ES6, и наследство ES6:
Запустите следующий код
«Использовать строгое»; класс Person {Constructor (name) {this.Name = name; } shower () {console.log ("Скажи привет"); вернуть это; }}; класс Sman Extends Person {constructor (имя, power) {super (name); this.superpower = power; } show () {console.log (this.superpower); вернуть это; }} console.log (new sman ("clark", "pee"). show (). say (). name);После использования Babel для преобразования в ES5 код стал таким. Я сам добавил небольшой комментарий, прости меня за то, что я непослушная и любящая свобода ...:
Запустите следующий код
var _createClass = function () {function defineProperties (target, props) {for (var i = 0; i <props.length; i ++) {var descriptor = props [i]; Descriptor.Enumerable = descriptor.Enumerable || ЛОЖЬ; descriptor.configeraility = true; if ("value" в дескрипторе) Descriptor.writable = true; Object.DefineProperty (Target, Descriptor.Key, Descriptor); }} return function (Constructor, ProtoProps, StaticProps) {// Скопировать прототип if (protoprops) defineproperties (constructor.prototype, protoprops); // Скопировать свойство if (staticprops) DefineProperties (Constructor, StaticProps); вернуть конструктор; }; } (); function _classcallcheck (encement, constructor) {if (! (экземпляр экземпляра Constructor)) {Throw New TypeError («Не может вызвать класс как функцию»); }} function _possibleconstructorreturn (self, call) {if (! self) {throw new ReferenceError («Это не было инициализировано - super () не называется»); } return call && (typeof call === "Object" || typeof call === "function")? звонок: self; } // Ниже приведен код, выраженный в наследствах ES6. _inherits реализует наследование прототипа и наследование атрибутов состояния родительского класса: функция _inherits (subclass, superclass) {if (superclass! == "" && superclass! == null) {бросает новый типер ("супер -выражение должно быть нулевым или функцией, а не" + superclass); } // наследуйте прототип родительского класса и исправить конструктор как подкласс; subclass.prototype = object.create (superclass && superclass.prototype, {constructor: {value: subclass, перечислен: false, записи: true, настраивается: true}}); // определить __proto__ для объекта подкласса, чтобы можно было достичь статического наследования атрибута; if (superclass) object.setprototypeof? Object.setPrototypeof (subclass, superclass): subclass .__ Proto__ = superclass; // Последнее, если разработчик: новый подкласс, фактическое состояние: Object {__proto __: родительский класс, конструктор: подкласс}}; /* var sup = function () {}; var sub = function () {}; _inherits (sub, sup); // значение этой реализации наследования; Как подкласс объекта наследует родительский класс, в качестве конструктора, подкласс наследует суб .Prototype .__ Proto__ === Sup.prototype // true sub.prototype.constructor === sub; // true sub .__ Proto__ === sup; // true */var person = function () {function personcem (name). this.name = name; } _createClass (человек, [{key: "say", value: function shower () {console.log ("say hi"); вернуть это;}}]); возвращающийся человек; } (); ; var sman = function (_person) {_inherits (sman, _person); function sman (name, power) {// В настоящее время это .__ Proto__ указал на прототип конструктора _classcallcheck (this, sman); // Это предложение эквивалентно Super () в ES6, передавая атрибуты родительского класса через вызов и выполняя наследование; var _this = _possibleconstructorreturn (this, object.getPrototypeof (sman) .call (это, имя)); _this.superpower = power; // динамический возврат _this; вернуть _this; } _createClass (sman, [{key: "show", value: function show () {console.log (this.superpower); вернуть это;}}]); вернуть Смон; }(Человек); console.log (new sman ("clark", "pee"). Show (). Say (). name);Множественное наследство:
Используйте Mix-in для достижения множественного наследования, а метод написания: Class Sub Extends Mix (OBJ0, OBJ1, OBJ2). Микс - это просто метод, нам нужно определить этот метод сами:
Запустите следующий код
<html> <Head> <meta charset = "utf-8"> </head> <body> <script> "strict"; Функциональный микс (... микшины) {Class Mix {} для (let Mixin of Mixins) {copyProperties (Mix, Mixin); CopyProperties (Mix.Prototype, Mixin.Prototype); } return Mix; } функция copyProperties (Target, Source) {for (let Key of Refert.ownkeys (source)) {if (key! == "Constructor" && key! == "Prototype" && key! == "name") {let desc = object.getownPropertyDescriptor (source, key); Object.DefineProperty (Target, Key, Desc); }}} класс man {kork () {console.log ("working"); }} класс женщина {say () {console.log ("show"); }} класс Superman Extends Mix (мужчина, женщина) {constructor () {super (); }} var sm = new Superman (); sm.work (); sm.say (); // На самом деле, у них нет отношений наследования, они просто копируют атрибуты подкласса; console.log (SM Exance Of Man); console.log (sm ancome of woman); </script> </body> </html>Выше приведено соответствующие знания о новых функциях JavaScript ES6, которые редактор представил вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!