Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Что нового в JavaScript 1.8.5

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

Отличное время для JavaScript. Мало того, что он становится гораздо более уважаемым языком, но он также растет по популярности и особенностям. Поскольку все больше браузеров начинают внедрять функции стандарта ECMAScript 5th edition, JavaScript становится еще более мощной платформой. В этом уроке мы поговорим о новых доступных вам методах.


Что такое ECMAScript 5?

ECMAScript является официальным названием того, что мы все называем JavaScript. Это не значит, что мы ошибаемся; просто имя «JavaScript» является товарным знаком Oracle; поэтому Ecma International (первоначально Европейская ассоциация производителей компьютеров, поэтому ECMA) использует термин «ECMAScript» для обозначения стандарта JavaScript. Последняя версия этого стандарта является пятым изданием, и она была одобрена чуть более года назад (3 декабря 2009 года). Она включает в себя огромный набор замечательных дополнений, и некоторые из них начинают появляться в браузерах. Реализации ECMAScript 5 называются JavaScript 1.8.5.

В этом уроке мы рассмотрим функции JavaScript 1.8.5, доступные нам в бета-версии Firefox 4. Вы с удовольствием обнаружите, что большинство последних версий других браузеров тоже есть. , , кроме одного. На этот раз это Opera, даже IE9 включил многие из них.


Функция 1: Object.create

Этот метод очень важен; он действительно делает прототипное наследование чище. Ранее (в ECMAScript 3rd edition), чтобы создать объект и установить его прототип, вы сделали бы что-то вроде этого:

Я единственный, кто думает, что выглядит странно, когда прототип был за пределами функции конструктора? И наследование становится еще более грязным. С Object.create все становится намного проще. Вышеприведенное может быть закодировано следующим образом:

Здесь происходит следующее: я вызываю object.create, передавая ему объект для использования в качестве прототипа нового объекта, возвращаемого Object.create. При использовании Object.create мне не нужно беспокоиться об определении прототипа отдельно. На самом деле, у меня гораздо больше гибкости, чтобы решить, куда двигаться при создании и наследовании объектов. Например, я не могу поместить массив eaten в прототип, потому что массив является ссылочным значением, поэтому каждый объект, созданный с dog, будет делиться этим массивом. Я решил проверить его, прежде чем использовать его здесь, но если бы я захотел обернуть Object.create(dog) в функцию make_dog, я мог бы определить его там так же легко.

И это самое замечательное в Object.create; вы можете выбрать, как это сделать.

Есть второй параметр, который принимает Object.create; это объект дескриптора свойств. Это немного сложно, но это также часть следующей функции, которую мы будет разбираться, так что давайте рассмотрим это.


Функция 2: Object.defineProperty

Если у вас есть объект, на который вы хотите определить свойство, вы, вероятно, сделаете это так:

Это все еще отлично работает в ES5, но если вы хотите получить более мелкомасштабный элемент управления, вы можете получить его с помощью Object.defineProperty. Первый параметр - это объект, которому вы назначаете свойство. Второй параметр - это имя свойства в виде строки. Конечным свойством является объект дескриптора. Вот как это работает. Это (очевидно) объект, и он может иметь комбинацию следующих свойств, все из которых описывают свойство, которое мы добавляем:

  • value: используйте это, чтобы установить значение свойства. По умолчанию задано значение undefined.
  • writeable: используйте это логическое значение, чтобы определить, является ли это переменной только для чтения. Если оно доступно для записи, то установите true. По умолчанию равно false.
  • configurable: используйте это логическое значение, чтобы определить, можно ли изменить тип (значение vs. method) этого свойства или удалить его. Если оно настраивается, то true. По умолчанию false.
  • enumerable: используйте это логическое значение, чтобы определить, включено ли это свойство, когда свойства объекта перечисляются (цикл for-in или метод keys). По умолчанию false.
  • get: используйте это, чтобы определить пользовательский метод getter. По умолчанию задано значение undefined.
  • set: используйте это, чтобы определить собственный setter. По умолчанию задано значение undefined.

Обратите внимание, что значения по умолчанию для логических опций выше - это обратные значения старых стандартов obj.prop = val. Кроме того, знайте, что вы не можете определить value или writable, когда get или set определены, и наоборот.

Итак, как бы вы это использовали? Попробуйте следующее:

Помимо того, что 7 лет жизни собаки не ровняются 7 годам жизни человека, вы должны заметить, что мы не установили value или writable здесь, потому что мы используем get и set. Эти функции не доступны напрямую. Они «волшебным образом» запускаются за кулисами, когда вы устанавливаете или запрашиваете свойство. В этом примере я использую эти функции, чтобы сохранить age и human_years. Если вы не хотите, чтобы «другое» значение было доступно, вы могли бы использовать анонимную функцию самозапуска, чтобы скрыть ее замыканием:

Конечно, нет ничего, что помешало бы вам сделать что-то глупое внутри get или set, поэтому используйте их с умом.

Вы можете использовать форму объекта дескриптора свойства для добавления свойств к объектам с Object.create. Сделайте это следующим образом:

Просто используйте имя свойства как свойство объекта дескриптора; затем установите атрибуты через объект в значении.


Функция 3: Object.defineProperties

Если вы хотите сразу определить несколько свойств, вы можете использовать объект дескрипторов свойств так же, как и Object.create, чтобы определить их, используя Object.defineProperties.

Для редких случаев, когда вы не используете объектный литерал в качестве второго параметра, - то будут использоваться только перечислимые свойства объекта properties.


Функция 4: Object.getOwnPropertyDescriptor

Если вы когда-либо захотите узнать специфику свойства, вы можете использовать эту функцию Object.getOwnPropertyDescriptor. Обратите внимание на «own»; это работает только со свойствами самого объекта, а не с цепочкой прототипов.

Как вы можете видеть, это работает со свойствами, установленными как старым, так и новым способом. Object.getOwnPropertyDescriptor принимает два параметра: объект и имя свойства в виде строки.


Функция 5: Object.keys

Всегда хотели получить все ключи объекта? Теперь вы можете сделать это легко с Object.keys. Передайте в эту функцию объект, и она вернет массив всех перечислимых свойств этого объекта. Вы также можете передать массив, и вы получите массив индексов.


Функция 6: Object.getOwnPropertyNames

Это похоже на Object.keys, за исключением того, что она включает в себя все свойства - даже те, которые не перечисляемы. По более длинному имени функции вы можете сказать, что вы не захотите ее использовать. Обычно вам нужны keys.


Функция 7: Object.preventExtensions / Object.isExtensible

Если вы когда-либо хотели создать функцию, которая не принимает новые параметры, вы можете сделать это сейчас. Запустите свой объект через Object.preventExtensions и он откажется от всех попыток добавления новых параметров. Эта функция идет рука об руку с Object.isExtensible, которая возвращает true, если вы можете расширить объект и false, если не можете.

Следует отметить, что все свойства объекта во время выполнения Object.preventExtensions все равно могут быть изменены или удалены (при условии, что их атрибуты позволяют это).


Функция 8: Object.seal / Object.isSealed

Уплотнение объекта - это один шаг от предотвращения расширений. Запечатанный объект не позволит добавлять или удалять свойства или изменять свойства со значения (например, строки) на аксессор (метод) или наоборот. Конечно, вы все равно сможете читать и писать свойства. Вы можете узнать, закрыт ли объект с помощью Object.isSealed.


Функция 9: Object.freeze / Object.isFrozen

Замораживание этого еще один шаг дальше. Замороженный объект никоим образом не может быть изменен; он только для чтения. Вы можете проверить замороженность объекта, как вы уже догадались, с помощью Object.isFrozen.


Функция 10: Array.isArray

Вы могли бы подумать, что было бы не слишком сложно определить, что данная переменная является массивом. В конце концов, все остальное отлично работает с оператором typeof. Однако массивы JavaScript не соответствуют друг другу. Они на самом деле ближе к массивам (хотя мы обычно используем этот термин для обозначения таких вещей, как arguments и NodeList). Эта функция дает вам возможность быть на 100% уверенным, что то, с чем вы работаете, - это массив. Передайте ему переменную, и она возвращает логическое значение.

Для получения дополнительной информации о том, зачем нам нужна эта функция, ознакомьтесь с документами, приведенными ниже.


Функция 11: Date.prototype.toJSON

Она не слишком большая, но если вы хотите хранить даты в JSON, вы можете найти ее весьма полезной. Объекты Date теперь имеют функцию toJSON, которая преобразует дату в строку JSON.


Функция 12: Function.prototype.bind

Вероятно, вы знакомы с использованием call и apply для переназначения значения this в функции.

Эти методы позволяют изменить значение this внутри функции. Если вы хотите часто делать что-то подобное, Function.prototype.bind возвращает новую функцию с привязкой this ко всему, что вы передадите ей, поэтому вы можете сохранить ее в переменной.

Конечно, это может быть не самый практичный пример, но он передает вам смысл!


Но подождите, есть еще ...

Это функции ECMAScript 5th Edition (или JavaScript 1.8.5), которые были добавлены в бета-версии Firefox 4. Есть еще несколько изменений в JavaScript, которые они реализуют, и которые вы можете найти в примечаниях к релизу.

Однако есть несколько функций ECMAScipt 5, которые уже поддерживаются в Firefox 3 и нескольких других браузерах. Вы уже пробовали работать с любым из них?

Примечание: ссылки указывают на их документацию в MDN.

Если вы хотите посмотреть, какие браузеры и версии поддерживают эти функции, вы можете проверить эту таблицу совместимости, сделанную Юрием Зайцевым (Kangax). Самое приятное в большинстве этих функций заключается в том, что, если браузер не поддерживает ее, вы можете обычно добавлять поддержку с чем-то вроде этого:


Какие функции ECMAScript 5 вы используете?

Множество новых функций, которые мы здесь рассмотрели, на самом деле является лишь небольшой частью добра, добавленного к стандарту ECMAScript в пятом издании. Есть ли какие-либо другие функции, которые вы специально ожидаете использовать или, возможно, используете прямо сейчас? Делитесь ими прямо здесь в комментариях!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.