Объем уровня блока
ES5 не имеет масштабов уровня блока, только глобальные объемы и объем функций. Благодаря этому, объем переменных очень широкий, поэтому вы должны создать его сразу же, как только введете функцию. Это вызывает так называемое увеличение переменной.
Функция «улучшения переменной» ES5 часто вызывает ошибку, если вы не осторожны:
1. Внутренняя переменная охватывает внешнюю переменную
var tmp = new date (); function f () {console.log (tmp); if (false) {// выполнять undefinedvar tmp = "hello world";}}2. Переменные протекают в глобальные переменные
var s = 'hello'; for (var i = 0; i <s.length; i ++) {console.log (s [i]);} console.log (i); // 5В прошлом мы часто используем закрытие для решения этой проблемы (например, функции самостоятельного выполнения). Теперь, основываясь на этой проблеме, ES6 добавил область на уровне блоков, поэтому нет необходимости выполнять функции само по себе.
пусть и констант
ES6 является обратно совместимым, а поддержание обратной совместимости означает никогда не изменять поведение кода JS на веб -платформе, поэтому объем переменных, созданных VAR, все еще будет глобальной областью объема и функции. Таким образом, даже если у вас есть область на уровне блока, он не может решить проблему «улучшения переменной» ES5. Поэтому здесь ES6 добавил два новых ключевых слова: Let and Const.
1. Дайте
«Пусть - более совершенный вар», у него есть лучшие правила объема.
2. Конфликт
Конст объявляет константу только для чтения. После объявления значение константа не может быть изменено, но объект, объявленный CONM
const a = []; a.push ('hello'); // исполняемая a = ['dave']; // сообщить об ошибкеВы также можете использовать object.freeze, чтобы заморозить объект
const foo = object.freeze ({}); // В нормальном режиме следующая строка не работает; // в строгом режиме строка сообщит об ошибке foo.prop = 123; //Используйте Let and Const:
• Переменные действительны только в рамках на уровне блока, где находится объявление
• Объявление переменной может использоваться только (временная мертвая зона)
• Переменные не могут быть определены многократно
• объявленная глобальная переменная, атрибуты, которые не принадлежат к глобальным объектам
var a = 1; window.a // 1let b = 1; window.b // undefined
Это ключевое слово
Мы знаем, что это в функции ES5 указывает на область применения, где находится время выполнения. например
function foo () {settimeout (function () {console.log ('id:', this.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 21Здесь я объявляю функцию Foo, которая является внутренней частью установки функции задержки, печатая this.id каждые 100 мс. Мы называем это через foo.call ({id: 42}) и устанавливаем область применения для этой функции. На самом деле требуется 100 миллисекунд. Поскольку это указывает на прицел, где находится время выполнения, это здесь указывает на окно глобального объекта, а не на функцию. здесь:
• Используйте Call, чтобы изменить контекст выполнения Foo, чтобы контекст выполнения функции больше не был окном, чтобы отличить этот указатель в Settimeout
• Метод Settimeout подвешен под объектом Window, поэтому он указывает на область выполнения - объект Window.
Код, вызванный тайм-аутом, выполняется в глобальном объеме, поэтому значение этого в функции указывает на объект окна в нетронутом режиме и не определено в строгом режиме-《Javascript Advanced Programming》
Чтобы решить эту проблему, наша обычная практика состоит в том, чтобы назначить это другим переменным:
Функция foo () {var that = this; setTimeout (function () {console.log ('id:', this.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42Теперь ES6 запустил функцию стрелки, чтобы решить эту проблему.
Функция стрелки
Идентификатор => выражение
var sum = (num1, num2) => {return num1 + num2; } // эквивалентно var sum = function (num1, num2) {return num1 + num2;};• Если функция имеет только один параметр, можно пропустить скобки
• Если функция имеет только один оператор возврата, брекеты и возврат могут быть опущены
• Если функция возвращает объект напрямую, скобки должны быть добавлены вне объекта. (Потому что пустой объект {} и пустой блок {} выглядят точно так же. Так что вам нужно обернуть литералы объекта в скобки.)
В ответ на проблему этого ключевого слова ES6 указывает на область применения, где эта привязка определяется в функции стрелки, а не указывает на область применения, где находится среда выполнения. С момента этого момента этот момент был фиксирован, что способствует инкапсулирующим функциям обратного вызова.
Функция foo () {var that = this; settimeout (() => {console.log ('id:', this.id);}, 100);} var id = 21; foo.call ({id: 42}); // id: 42ПРИМЕЧАНИЕ. Фиксация, указывающая на функцию стрелки, это не потому, что существует механизм, чтобы связывать это внутри функции стрелки. Фактическая причина заключается в том, что функция стрелки не имеет этого своего собственного. Функция стрелки вообще не имеет своего собственного, а внутреннее это в блоке внешнего кода. Это приводит к:
• Нельзя использовать в качестве конструктора
• Вы не можете использовать Call (), Apply (), Bind () и другие методы для изменения направления этого
Классы и наследство
Традиционная Ecmascript не имеет концепции классов. Он описывает концепцию прототипов цепей и использует прототипные цепи в качестве основного метода реализации наследования. Основная идея состоит в том, чтобы использовать прототипы, чтобы один эталонный тип наследовал свойства и методы другого эталонного типа. Традиционный способ достижения такого поведения - через конструктор:
точка функции (x, y) {this.x = x; this.y = y;} point.prototype.tostring = function () {return '(' + this.x + ',' + this.y + ')';}; var p = new Point (1, 2);Здесь точка конструктора будет иметь прототип объекта (прототип), который содержит указатель в точку (конструктор), а экземпляр P содержит внутренний указатель на объект прототипа (PROP). Таким образом, все наследование реализуется через цепочку прототипа. Для получения подробной информации см. В этой статье My: Prototype и Constructor в JavaScript
сорт
ES6 предоставляет стиль письма, который ближе к традиционным языкам, представляя концепцию класса как шаблон для объектов. Через ключевое слово класса вы можете определить класс. Но классы являются просто синтаксическим сахаром для объектно-ориентированного рисунка на основе прототипов. Существуют смешанные обзоры о введении класса, и многие люди думают, что это серьезный недостаток, но для меня это хороший синтаксис, потому что обычный способ наследования прототипов может часто обернуть меня.
// Определить точку класса класса {Constructor (x, y) {this.x = x; this.y = y;} toString () {return '(' + this.x + ',' + this.y + ')';}} var p = new Point (1, 2);• В классе есть метод конструктора, который является методом по умолчанию класса. Этот метод автоматически вызывается при генерации экземпляра объекта через новую команду. Класс должен иметь метод конструктора. Если не явно определено, пустой метод конструктора будет добавлен по умолчанию.
• Это ключевое слово в методе конструктора представляет объект экземпляра.
• При определении метода «класса» (например, ToString в приведенном выше примере) вам не нужно добавлять функцию ключевого слова перед ним, просто поместите определение функции.
• При его использовании вы также используете новую команду непосредственно в классе, которая точно такой же, как и использование конструктора.
• Все методы класса определены на свойстве прототипа класса
Наследство класса - расширить
Наследование между классом может быть достигнуто с помощью ключевого слова Extends, которое намного яснее и удобнее, чем наследование ES5, путем изменения цепочки прототипа.
Class Colorpoint Extends Point {Constructor (x, y, color) {super (x, y); // Вызовите конструктор (x, y) родительского класса (x, y) this.color = color;} toString () {return this.color + '' + super.toString (); // Вызовите ToString () родительского класса}}• Супер ключевое слово, когда называется как функция (то есть Super (... args)), представляет конструктор родительского класса; При вызове как объект (то есть Super.prop или Super.method ()), представляет родительский класс. Здесь он представляет конструктор родительского класса и используется для создания этого объекта родительского класса.
• Подкласс должен вызвать метод Super в методе конструктора, в противном случае ошибка будет сообщена при создании нового экземпляра. Это связано с тем, что подкласс не имеет своего собственного объекта, но наследует этот объект родительского класса, а затем обрабатывает его. Если супер -метод не вызван, подкласс не получит этот объект.
Модульный
Исторически, у JavaScript никогда не было модульной системы, и невозможно разделить большую программу на небольшие взаимозависимые файлы, а затем собрать их простым способом, что создало огромное препятствие для разработки крупных и сложных проектов. Чтобы адаптироваться к разработке крупных модулей, сообщество сформулировало некоторые решения для загрузки модулей, такие как CMD и AMD.
Модульное написание ES6:
Import {stat, существует, readfile} от 'fs';Суть приведенного выше кода заключается в загрузке 3 методов из модуля FS, а другие методы не загружаются. Этот вид загрузки называется «загрузка времени компиляции», то есть ES6 может завершить загрузку модуля во время компиляции, что более эффективно, чем метод загрузки модуля CommonJS. Конечно, это также приводит к неспособности ссылаться на сам модуль ES6, потому что он не является объектом.
Функция модуля в основном состоит из двух команд:
• Экспорт
Внешний интерфейс, используемый для указания модуля и внешнего интерфейса, должен установить соотношение соответствия один к одному с переменными внутри модуля.
// написать метод Один экспорт var m = 1; // Экспорт ошибок 1; // Метод записи два var m = 1; export {m}; // error export m; // write three therning var n = 1; export {n as m};• Импорт
Используется для ввода функций, предоставленных другими модулями. Он принимает объект (представлен в брекетах), который указывает имя переменной, которое будет импортировано из других модулей (также может быть загружено с помощью * Всего)
Строка интерполяция
В разработке JavaScript нам часто нужно вывозить шаблоны, как это:
Функция Sayshello (имя) {return "Привет, мое имя"+name+"i am am"+getage (18);} function getage (возраст) {return age;} sayhello ("brand") // "Привет, меня зовут бренд. Мне 18"Нам нужно использовать + для конкатената строк и переменных (или выражений). Примеры относительно просты, поэтому они кажутся безобидными, но как только они станут более сложными, они будут казаться довольно громоздкими и неудобными, и это использование также делает нас утомительными. В связи с этим ES6 вводит шаблонные строки, которые могут легко и изящно вставить значения JS в строки.
Шаблон строка
Для струн шаблонов это:
• упаковка с обратными тренажами ``;
• Используйте $ {} для вывода значений;
• Содержание в $ {} может быть любое выражение JavaScript, поэтому функциональные вызовы и арифметические операции являются законными;
• Если значение не является строкой, оно будет преобразовано в строку;
• Держите все пробелы, новые линии и отступы и выведите их на строку результата (можно записать строки нескольких строк)
• Используйте бэки и брекеты внутри
Для примера выше, строка шаблона записывается следующим образом:
Функция SayShello (name) {return `Привет, мое имя $ {name} Я $ {getage (18)}`;} function getage (возраст) {return Age;} sayhello ("brand") // "Привет, меня зовут Бренди Ам 18"Строгий режим
Одна из целей строгого режима - разрешить быстрее отладки ошибок. Лучший способ помочь разработчикам отладка-это бросить ошибки, когда возникают определенные закономерности, вместо того, чтобы молча не сработать или демонстрировать странное поведение (часто происходит в нетронутом режиме). Код в строгом режиме будет добавлять больше сообщений об ошибках, что может помочь разработчикам быстро заметить некоторые проблемы, которые должны быть решены немедленно. В ES5 строгий режим является необязательным, но в ES6 многие функции требуют использования строгого режима, который помогает нам написать лучший JavaScript.
Вышеупомянутое - проблема «дефекта» ES6 улучшила JavaScript, которую редактор представил вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!