JavaScript: Методы
Кроме свойств, у данных существуют методы — функции, находящиеся внутри свойств. С практической точки зрения это значит, что метод работает и вызывается как функция, но делает это как свойство, через точку.
const name = 'Robb'; const upperName = name.toUpperCase(); console.log(upperName); // => ROBB Встроенные методы всегда оперируют теми данными, с которыми они связаны. Метод .toUpperCase() возвращает ту же строку, но преобразуя все символы в верхний регистр. Методов у данных обычно значительно больше, чем свойств, например, для строк их несколько десятков. В документации, на первый взгляд, они описаны немного странно: String.prototype.toLowerCase(). Это описание раскрывает некоторые внутренние детали реализации, которые сейчас не важны, да и мы не изучили всей необходимой базы для разговора о прототипах.
Методы есть и у чисел:
const temperature = 22.93; // Округление до одного знака после запятой const roundedTemperature = temperature.toFixed(1); // Метод возвращает строку, которая содержит преобразованное число console.log(roundedTemperature); // => 22.9 // Напрямую можно вызывать так // Скобки нужны обязательно, иначе не заработает (22.93).toFixed(1); // 22.9 Хозяйке на заметку. Технически всё несколько сложнее. Методы есть не у самих чисел, а у данных (объектов) типа Number. Числа, записанные в переменные или константы, автоматически преобразуются к данному типу во время обращения к ним, в это время происходит так называемый boxing.
Возникает закономерный вопрос: зачем нужны методы, почему не просто функции? С числами ситуация ещё сложнее. Часть операций реализована в виде методов самих чисел, например, .toFixed() , а ещё большая часть — в виде методов, доступных через Math .
Есть две причины почему так сделано:
- Исторически так сложилось. JavaScript разрабатывался слишком быстро и поэтому не все было продумано хорошо
- Далеко не все функции имеют отношение к конкретному значению. Возьмем для примера Math.min() . Эта функция находит минимальное число среди всех, которые ему были переданы. Эту функцию нелогично делать методом конкретного числа, например, так — (1).min() . Она не имеет никакой связи с конкретным числом
С другой стороны, функции, работающие с конкретным числом, для единообразия должны быть реализованы как методы. К таким функциям относится получение модуля числа. То есть вместо такого вызова Math.abs(-10) , логично иметь такой: (-10).abs() .
Что касается методов в целом, то не все так однозначно. Есть языки, в которых методов нет и там всё прекрасно, есть языки, где методы — это основной способ работы с функциями, но даже в этих языках всегда, наряду с методами, используются обычные функции. JavaScript — язык, в котором прижились оба подхода, в нём активно используются как обычные функции, так и методы. О плюсах и минусах подобных подходов подробно рассказывается в курсах посвященных ООП.
Задание
Приведите строку text к нижнему регистру и напечатайте её на экран.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
40 методов JavaScript, которые вы должны знать
JavaScript — язык программирования, используемый для создания веб-страниц и мобильных приложений. Если вы уже некоторое время изучаете JS, и он все равно вас пугает, возможно, вы просто еще не изучили все нужные методы.
Эта статья пригодится разработчику с любым уровнем знаний и навыков. Если вы ищете справку по конкретному методу — просто перейдите к нужному разделу и пропустите остальные.
- Массивы и их методы
- Строки и их методы
- Объекты и их методы
- Числа и их методы
- Методы, представленные в ES6
Массивы
Вероятно, вы знаете, что переменная в каждый отдельный момент времени может хранить только одно значение.
Например, var student = «jack» . С этой переменной все в порядке, мы можем использовать ее при создании проекта, причем многократно.
Но порой нам нужно сохранить много значений в одной переменной. Например, список имен студентов. Вот здесь нам приходит на помощь концепция массивов.
Массив — это одна переменная, хранящая список значений, где каждый элемент определяется отдельным индексом.
Методы массивов в JavaScript:
pop()
Метод pop() удаляет последний элемент массива.
var students = [ 'Jack', 'James', 'Robert', 'John']; console.log(students); students.pop(); console.log(students)
Output: [ 'Jack', 'James', 'Robert', 'John' ] [ 'Jack', 'James', 'Robert' ]
shift()
Метод shift() удаляет первый элемент массива.
var students = [ 'Jack', 'James', 'Robert', 'John']; console.log(students); students.shift(); console.log(students)
Output: [ 'Jack', 'James', 'Robert', 'John' ] [ 'James', 'Robert', 'John' ]
push()
Если вы хотите добавить в конец массива один или несколько элементов, используйте метод push().
var students = [ 'Jack', 'James', 'Robert', 'John']; console.log(students); students.push('Zahab', 'Kakar'); console.log(students)
Output: [ 'Jack', 'James', 'Robert', 'John' ] [ 'Jack', 'James', 'Robert', 'John', 'Zahab', 'Kakar' ]
unshift()
А если один или несколько элементов нужно добавить не в конец, а в начало массива, используйте метод unshift().
var students = [ 'Jack', 'James', 'Robert', 'John']; console.log(students); students.unshift('Zahab', 'Kakar'); console.log(students);
Output: [ 'Jack', 'James', 'Robert', 'John' ] [ 'Zahab', 'Kakar', 'Jack', 'James', 'Robert', 'John' ]
length
Метод length возвращает число элементов в массиве.
var students = [ 'Jack', 'James', 'Robert', 'John']; console.log(students); var length = students.length; console.log(length)
[ 'Jack', 'James', 'Robert', 'John' ] 4
splice()
Для добавления новых элементов в массив также используется метод splice().
var students = [ 'Jack', 'James', 'Robert', 'John']; console.log(students); students.splice(2, 1, "Zahab", "Kakar"); console.log(students);
Output: [ 'Jack', 'James', 'Robert', 'John' ] [ 'Jack', 'James', 'Zahab', 'Kakar', 'John' ]
При использовании этого метода нужно указывать, куда именно следует добавить новые элементы. В приведенном примере 2 — индекс, показывающий, где нужно вставить новые имена. Цифра 1 указывает, сколько элементов нужно удалить. Поскольку мы написали, что удалить нужно 1 элемент, во втором списке нет имени «Robert».
concat()
С помощью метода concat() можно создать новый массив путем конкатенации (слияния) двух существующих массивов.
var students = [ 'Jack', 'James', 'Rober', 'John']; console.log(students); var myFriends = ['Jennifer','Mary','Patricia'] console.log(myFriends); var allNames = students.concat(myFriends); console.log(allNames)
Output: [ 'Jack', 'James', 'Rober', 'John' ] [ 'Jennifer', 'Mary', 'Patricia' ] [ 'Jack', 'James', 'Rober', 'John', 'Jennifer', 'Mary', 'Patricia' ]
slice()
- Этот метод вырезает часть массива, начиная с указанного индекса.
- Метод slice() может принимать два аргумента, указывающих, с какого и до какого элемента нужно сделать срез.
- Этот метод принимает также отрицательные числа.
var students = [ 'Jack', 'James', 'Rober', 'John']; console.log(students); var newStudent = students.slice(3); console.log(newStudent);
Output: [ 'Jack', 'James', 'Rober', 'John' ] [ 'John' ]
var students = [ 'Jack', 'James', 'Rober', 'John']; console.log(students); var newStudent = students.slice(1,3); console.log(newStudent);
Output: [ 'Jack', 'James', 'Rober', 'John' ] [ 'James', 'Rober' ]
var students = [ 'Jack', 'James', 'Rober', 'John']; console.log(students); var newStudent = students.slice(-1); console.log(newStudent);
[ 'Jack', 'James', 'Rober', 'John' ] [ 'John' ]
Строки
Строки в JavaScript хранят серии символов, т. е. строка — это набор символов. Строкой может быть любой текст, взятый в двойные или одинарные кавычки.
toUpperCase()
Метод toUpperCase используется для перевода всей строки в верхний регистр.
var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry." var newStr = str.toUpperCase() console.log(newStr)
Output: LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY.
toLowerCase()
А toLowercase, наоборот, переводит строку в нижний регистр.
var str = "LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. " var newStr = str.toLowerCase() console.log(newStr)
Output: lorem ipsum is simply dummy text of the printing and typesetting industry.
slice()
Этот метод возвращает вырезанную часть строки. Метод принимает один или два аргумента, которыми обозначаются начало и конец среза. Аргументы могут быть и отрицательными числами.
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry" var newStr = str.slice(-8, -1) console.log(newStr);
Output: industr
substring()
Этот метод тоже возвращает вырезанную часть строки, но он не принимает отрицательных чисел в качестве аргументов.
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry" var newStr = str.substring(1, 6) console.log(newStr);
Output: orem
substr()
Метод substr() напоминает slice(), но здесь второй аргумент указывает длину той части, которую нужно вырезать.
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry" var newStr = str.substr(8, 13) console.log(newStr);
Output: sum is simply
replace()
Метод replace() используется для замены части строки другой строкой. Этот метод чувствителен к регистру.
var str = "lorem ipsum is simply dummy text of the printing and typesetting industry" var newStr = str.replace("is", "are") console.log(newStr);
Output: lorem ipsum are simply dummy text of the printing and typesetting industry
concat()
Если вам нужно объединить путем конкатенации две или несколько строк, используйте метод concat().
var str1 = "Java"; var str2 = "Script"; var str = str1.concat(str2); console.log(str)
Output: JavaScript
trim()
При помощи метода trim() можно удалить пробелы в начале и конце строки.
var str1 = " JavaScript "; str2 = str1.trim(); console.log(str2);
Output: JavaScript
split()
Метод split() позволяет преобразовать строку в массив.
var str = "JavaScript, is, nice" var newStr = str.split(",") console.log(newStr[0]);
Output: JavaScript
charCodeAt
Метод charCodeAt возвращает значение Юникод символа строки под указанным индексом.
var str = "JavaScript is nice" var newStr = str.charCodeAt(str[1]) console.log(newStr);
Output: 74
charAt()
А этот метод возвращает сам символ с указанным индексом.
var str = "JavaScript is nice" var newStr = str.charAt(1) console.log(newStr);
Output: a
padStart
Этот метод используется для добавления символов в начале строки, чтобы результирующая строка достигла указанной длины. По умолчанию в начале строки добавляются пробелы, но может добавляться и другая строка, указанная во втором аргументе.
var str = "15" var newStr = str.padStart(4, "3") console.log(newStr);
Output: 3315
padEnd
padEnd аналогичен padStart, только добавляет символы в конце строки.
var str = "15" var newStr = str.padEnd(4, "3") console.log(newStr);
Output: 1533
length
Этот метод используется для получения длины строки.
var str = "JavaScript is nice." var newStr = str.length console.log(newStr);
Output: 19
Объекты
В JavaScript объект — это тип данных. Он используется для хранения различных коллекций с ключами и их значениями.
keys()
Этот метод возвращает ключи объекта.
const object1 = < name: 'John', age: 20, >; console.log(Object.keys(object1));
Output: [ 'name', 'age' ]
values()
Метод values() возвращает значения объекта.
const object1 = < name: 'John', age: 20, >; console.log(Object.values(object1));
Output: [ 'John', 20 ]
create()
С помощью этого метода можно создать новый объект из существующего.
const person = < name: "John", introduction: function() < console.log(`My name is $`); > >; const me = Object.create(person); me.name = 'Robert'; me.introduction();
Output: My name is Robert
freeze()
Метод Object.freeze() замораживает объект. То есть он предотвращает добавление новых свойств к объекту, удаление старых свойств из объекта и изменение существующих свойств или значения их атрибутов перечисляемости, настраиваемости и записываемости.
const person = < name: "John", >; Object.freeze(person); person.name = "Robert"; console.log(person.name);
Output: John
assign()
Этот метод используется для копирования свойств объекта в другой объект.
const person = < name: "John", age : 20 >; const obj = < ishuman : true >Object.assign(person, obj); console.log(person);
Output:
Числа
Числовой тип данных в JavaScript используется для хранения целых чисел и чисел с плавающей точкой.
toFixed()
Метод toFixed() форматирует число, используя запись с фиксированной запятой.
var x = 9.656; var newX = x.toFixed(0); console.log(newX) var newX = x.toFixed(2); console.log(newX) var newX = x.toFixed(4); console.log(newX) var newX = x.toFixed(6); console.log(newX) console.log(typeof(newX))
Output: 10 9.66 9.6560 9.656000 string
toPrecision()
Этот метод используется для конвертации числа в число с указанной точностью. Метод возвращает полученное значение в виде строки.
var x = 9.656; var newX = x.toPrecision(2); console.log(newX) var newX = x.toPrecision(4); console.log(newX) var newX = x.toPrecision(6); console.log(newX) console.log(typeof(newX))
Output: 9.7 9.656 9.65600 string
parseFloat()
Этот метод принимает строку в качестве аргумента и возвращает число с плавающей точкой.
function addition(r) < return parseFloat(r) * 2.0; >console.log(addition(2)) console.log(addition("2")) console.log(addition("3.3"))
Output: 4 4 6.6Number()
Метод Number() используется для преобразования других типов данных в числа.
var x = true; console.log(Number(x)) var x = false; console.log(Number(x)) var x = "999"; console.log(Number(x))
1 0 999
parseInt()
Этот метод принимает строку в качестве аргумента и возвращает целое число в соответствии с указанным основанием системы счисления.
function addition(r) < return parseInt(r) * 2.0; >console.log(addition(2)) console.log(addition("2")) console.log(addition("3.3"))
Output: 4 4 6
ES6
В ES6 было представлено много новых полезных методов.
map()
Этот метод принимает массив и применяет указанную функцию к каждому из элементов массива. Возвращается новый массив.
var arr=[2.1,3.5,4.7]; var result= arr.map((num) => 2*num ); console.log(result)
Output: [ 4.2, 7, 9.4 ]
every()
Этот метод используется для проверки того, удовлетворяют ли элементы указанного массива определенному условию. Если все элементы удовлетворяют условию, метод возвращает true, в противном случае — false.
const ages = [32, 33, 16, 40]; function checkAge(age) < return age >18; > console.log(ages.every(checkAge))
Output: false
includes()
При помощи метода includes() можно проверить, есть ли определенный элемент в массиве. Если указанный элемент в массиве присутствует, возвращается true.
const ages = [32, 33, 16, 40]; console.log(ages.includes(33))
Output: true
for…of iterator
Этот оператор выполняет цикл обхода итерируемых объектов.
const ages = [33, 32, 16]; for (const element of ages)
Output: 33b 32b 16b
Spread
Spread-оператор принимает массив и расширяет его на отдельные элементы. На применение этого оператора указывает троеточие.
const ages = [33, 32, 16]; console.log(. ages)
Output: 33 32 16
filter()
Этот метод создает новый массив из всех элементов, соответствующих заданному условию.
const ages = [33, 32, 16]; console.log(ages.filter((age)=> age>20))
Output: [ 33, 32 ]
reduce()
Метод reduce() сводит массив к одному значению.
const ages = [33, 32, 16]; const reducer = (first, second) => first + second; console.log(ages.reduce(reducer))
Output: 81
Мы рассмотрели много интересных и полезных методов JavaScript. Постепенно вы их выучите, а если что-то забудете, всегда сможете вернуться к нашей статье.
Свои объекты: конструкторы и методы
При объявлении в объект можно записать функцию. Она становится его методом, например:
var user = < name: 'Василий', // метод sayHi: function() < alert('Привет!'); > >; // Вызов метода user.sayHi(); Доступ к объекту через this
Для полноценной работы метод должен иметь доступ к данным объекта. В частности, вызов user.sayHi() может захотеть вывести имя пользователя.
Для доступа к объекту из метода используется ключевое слово this. Значением this является объект, в контексте которого вызван метод, например:
var user = < name: 'Василий', sayHi: function() < alert(this.name); > >; user.sayHi(); Здесь при выполнении функции user.sayHi() в this будет храниться ссылка на текущий объект user. Использование this гарантирует, что функция работает именно с тем объектом, в контексте которого вызвана.
Через this можно обратиться к любому свойству объекта, а при желании и передать его куда-то:
var user = < name: 'Василий', sayHi: function() < showName(this); // передать текущий объект в showName > >; function showName(obj) < alert( obj.name ); >user.sayHi(); // Василий Функция — конструктор, «new»
Обычный синтаксис <. >позволяет создать один объект. Но зачастую нужно создать много однотипных объектов.
Для этого используют функции, запуская их при помощи специального оператора new.
Конструктором становится любая функция, вызванная через new.
function Animal(name) < this.name = name; this.canWalk = true; > var animal = new Animal("ёжик"); Любую функцию можно вызвать при помощи new. При этом она работает несколько иным образом, чем обычно:
- Автоматически создается новый, пустой объект.
- Специальное ключевое слово this получает ссылку на этот объект.
- Функция выполняется. Как правило, она модифицирует this, добавляет методы, свойства.
- Возвращается this.
Так что результат выполнения примера выше — это объект:
animal = < name: "ёжик", canWalk: true > О создаваемом объекте говорят, что это «объект класса (или типа) Animal».
Если функция явно возвращает объект, то будет возвращён он, а не this.
Названия функций, которые предназначены создавать объекты, как правило, начинают с большой буквы.
Создание методов в конструкторе
Использование функций для создания объекта дает большую гибкость. Можно передавать функции свойства создаваемого объекта и параметры, определяющие как его создавать.
Например, функция User(name) создает объект с заданным значением свойства name и методом sayHi :
function User(name) < this.name = name; this.sayHi = function() < alert("Моё имя: " + this.name); >; > Приватные свойства
Локальные переменные функции-конструктора, с одной стороны, доступны вложенным функциям, с другой — недоступны снаружи.
В объектно-ориентированном программировании это называется «приватный (private) доступ».
Например, в коде ниже к name имеет доступ только метод say. Со стороны объекта, после его создания, больше никто не может получить name.
function User(name) < this.say = function(phrase) < alert(name + ' сказал: ' + phrase); >; > var user = new User('Вася'); Если бы name было свойством this.name — можно было бы получить его как user.name, а тут — локальная переменная. Приватный доступ.
Замыкания никак не связаны с this.
Доступ через замыкание осуществляется к локальной переменной, находящейся «выше» по области видимости.
А this содержит ссылку на «текущий» объект — контекст вызова, и позволяет обращаться к его свойствам. С локальными переменными это никак не связано.
Приватные свойства можно менять, например ниже метод this.upperCaseName() меняет приватное свойство name :
function User(name) < this.upperCaseName = function() < name = name.toUpperCase(); // >; this.say = function(phrase) < alert(name + ' сказал: ' + phrase); // >; > var user = new User('Вася'); user.upperCaseName(); user.say("Да здравствует ООП!") // ВАСЯ сказал: Да здравствует ООП! Вы помните, в главе Замыкания, функции изнутри мы говорили о скрытых ссылках [[Scope]] на внешний объект переменных? В этом примере user.upperCaseName.[[Scope]] и user.say.[[Scope]] как раз ссылаются на один и тот же объект LexicalEnvironment, в контексте которого они были созданы. За счёт этого обе функции имеют доступ к name и другим локальным переменным.
Все переменные конструктора User становятся приватными, так как доступны только через замыкание, из внутренних функций.
Итого
У объекта могут быть методы:
- Свойство, значение которого — функция, называется методом объекта и может быть вызвано как obj.method() . При этом объект доступен как this .
Объекты могут быть созданы при помощи функций-конструкторов:
- Любая функция может быть вызвана с new , при этом она получает новый пустой объект в качестве this, в который она добавляет свойства. Если функция не решит возвратить свой объект, то её результатом будет this .
- Функции, которые предназначены для создания объектов, называются конструкторами. Их названия пишут с большой буквы, чтобы отличать от обычных.
Что такое метод в javascript
Для опосредования доступа к свойствам класса в последних стандартах JavaScript была добавлена поддержка методов доступа — get и set . Сначала рассмотрим проблему, с которой мы можем столкнуться:
class Person < constructor(name, age)< this.name = name; this.age = age; >> const tom = new Person("Tom", 37); console.log(tom.age); // 37 tom.age = -15; console.log(tom.age); // -15
Класс Person определяет два свойства — name (имя) и age (возраст человека), значения которых мы можем получить или установить. Но что если мы передадим некорректные значения? Так, в примере выше свойству age передается отрицательное число, но возраст не может быть отрицательным.
Чтобы выйти из этой ситуации, мы можем определить приватное поле age , к которому можно было бы обратиться только из текущего класса. А для получения или установки его значения создать специальные методы:
class Person < #ageValue = 1; constructor(name, age)< this.name = name; this.setAge(age); >getAge() < return this.#ageValue; >setAge(value)< if(value>0 && value < 110) this.#ageValue = value; >> const tom = new Person("Tom", 37); console.log(tom.getAge()); // 37 tom.setAge(-15); console.log(tom.getAge()); // 37
Теперь возраст хранится в приватном поле ageValue . При его установке в методе setAge() проверяется переданное значение. И установка происходит, если только передано корректное значение. А метод getAge() возвращает значение этой переменной.
Но есть и другое решение — применение методов доступа get и set .
// определение приватного поля #field; set field(value) < this.#field= value; >get field()
Оба метода — get и set имеют одинаковые названия. Как правило, они опосредуют доступ к некоторому приватному полю. Метод set предназначен для установки. Он принимает в качестве параметра новое значение. Далее в методе set мы можем выполнить ряд действий при установке.
Метод get предназначен для получения значения. Здесь мы можем определить какую-нибудь логику при возвращении значения.
Так, перепишем предыдущий пример с использованием get и set :
class Person < #ageValue = 1; constructor(name, age)< this.name = name; this.age = age; >set age(value)< console.log(`Передано $`); if(value>0 && value < 110) this.#ageValue = value; >get age() < return this.#ageValue; >> const tom = new Person("Tom", 37); console.log(tom.age); tom.age = -15; console.log(tom.age);
Стоит отметить, что работа с методами доступа производится также, как с обычными свойствами. Так, для получения значения и вывода на консоль применяется вызов:
console.log(tom.age);
console.log(tom.age());
То есть при обращении tom.age фактически будет срабатывать метод get , который возвратит значение поля ageValue .
tom.age = -15;
будет срабатывать метод set , который получит передаваемое ему значение (здесь число -15) через единственный параметр. И далее в самом методе set мы можем решить, надо ли устанавливать это значение.
Свойства, доступные только для чтения
Выше применялись оба метода get и set , соответственно значение поля можно было и получить, и установить. Однако в реальност мы можем использовать только один из них. Например, мы можем оставить только метод get и тем самым сделать свойство доступным только для чтения .
Например, в изменим пример выше и сделаем свойство name доступным только для чтения:
class Person < #age = 1; #name; constructor(name, age)< this.#name = name; this.age = age; >//set name(value) < this.#name = value; >get name() < return this.#name; >set age(value)< if(value>0 && value < 110) this.#age = value; >get age() < return this.#age; >> const tom = new Person("Tom", 37); console.log(tom.name); // Tom tom.name = "Bob"; // Это ничего не даст console.log(tom.name); // Tom - значение не изменилось
В данном случае вместо общедоступного свойства name определена приватное поле #name . Его можно установить только из внутри класса, что мы и делаем в конструкторе класса. Однако из вне его можно только прочитать с помощью метода get . Поэтому попытка установки свойства
tom.name = "Bob";
ни к чему не приведет
Свойства только для установки
Также мы можем сделать свойство доступным только для записи, оставив только метод set . Например, добавим новое свойство id, которое будет доступно только для записи:
class Person < #id; constructor(name, age, id)< this.name = name; this.age = age; this.id = id; >set id(value) < this.#id = value;>print() < console.log(`id: $name: $ age: $`); > > const tom = new Person("Tom", 37, 1); tom.print(); // id: 1 name: Tom age: 37 tom.id = 55; // устанавливаем значение свойства id tom.print(); // id: 55 name: Tom age: 37 console.log(tom.id); // undefined - значение свойства id нельзя получить
Здесь определено свойство id , которое устанавливает значение приватного поля #id . Но поскольку метода get для этого свойства не определено, то при попытке получить значение свойства id, мы получим undefined :
console.log(tom.id); // undefined - значение свойства id нельзя получить
Свойства без обращения к полям
Стоит отметить, что методы get и set необязательно должны обращаться к приватным или неприватным полям. Это могут быть и вычисляемые свойства. Например:
class Person < constructor(firstName, lastName)< this.firstName = firstName; this.lastName = lastName; >get fullName() < return `$$` > > const tom = new Person("Tom", "Smith"); console.log(tom.fullName); // Tom Smith
В данном случае свойство для чтения fullName возращает фактически объединение двух свойств — firstName и lastName .
Подобным образом можно определить и свойство для записи:
class Person < constructor(firstName, lastName)< this.firstName = firstName; this.lastName = lastName; >get fullName() < return `$$` > set fullName(value) < [this.firstName, this.lastName] = value.split(" "); >> const tom = new Person("Tom", "Smith"); console.log(tom.fullName); // Tom Smith tom.fullName = "Tomas Jefferson"; console.log(tom.lastName); // Jefferson
В данном случае метод set свойства fullName в качестве параметра получает некоторую строку и с помощью ее метода split разбивает по пробелу и получает массив подстрок, которые были разделены пробелом. То есть, теоретически мы рассчитываем, что будет передано что-то наподобие «Tom Smith», а после разделения по пробелу свойство firstName получит значение «Tom», а свойтсво lastName — значение «Smith». Стоит отметить, что для простоты и целй демонстрации здесь мы не рассматриваем исключительные ситуации, когда передается пустая строка или строка, которая не делится по пробелу на две части и т.д.
В итоге при получении нового значения
tom.fullName = "Tomas Jefferson";
Метод set разобьет его по пробелу, и первый элемент массива будет передан свойству firstName , а второй — свойству lastName .