В этой статье будут представлены сеттеры и геттеры в JavaScript и обсуждены основы настройки функций сеттера и геттера объекта.
«Синтаксис set связывает свойство объекта с функцией, которая будет вызываться при попытке установить это свойство. Его также можно использовать в классах» (Setter — JavaScript | MDN, 2023).
Что такое сеттеры и геттеры?
Сеттеры и геттеры — это функции JavaScript. Функция установки используется для установки значения свойства объекта. Функция получения используется для получения значения свойства объекта.
Основной синтаксис функции получения
Функции получения должны быть определены с ключевым словом get.
Примечание. НЕ используйте функцию-получатель в качестве вызова функции. Получите доступ к функции получения как к свойству данных.
const course579 = {
// data property
_id: 27635,
// use getter function to get the property value
get getId() {
return this._id;
}
}
// get the value of _id property
console.log(course579.getId) // 27635
// Do NOT use it as a function call
// Uncaught TypeError: course579.getId is not a function
console.log(course579.getId()) // error
Основной синтаксис функции установки
Функции установки должны быть определены с помощью ключевого слова set.
Примечание. НЕ используйте функцию установки в качестве вызова функции. Получите доступ к функции установки как к свойству данных.
const course579 = {
// data property
_location: "TBD",
// use setter function to set the property value
set setLocation(address) {
this._location = address;
}
}
console.log(course579._location); // "TBD"
course579.setLocation = "AHD"; // set the value of _location property to "AHD"
console.log(course579._location); // "AHD"
// Do NOT use it as a function call
// Uncaught TypeError: course579.setLocation is not a function
course579.setLocation();
Геттер и сеттер вместе
Теперь, используя как функцию установки, так и функцию получения в одном объекте.
const course579 = {
// data property
_professor: "TBD",
// use setter function to set the property value
set setProfessor(name) {
this._professor = name;
},
// use getter function to get the property value
get getProfessor() {
return this._professor;
}
}
// get the value of getProfessor property
console.log(course579.getProfessor); // "TBD"
// set the value of getProfessor property to "Ben Mullins"
course579.setProfessor = "Ben Mullins";
// get the value of getProfessor property
console.log(course579.getProfessor); // "Ben Mullins"
Советы. Функции установки и получения могут использовать одно и то же имя.
const course579 = {
// data property
_professor: "TBD",
// use setter function to set the property value
set professor(name) {
this._professor = name;
},
// use getter function to get the property value
get professor() {
return this._professor;
}
}
console.log(course579.professor); // "TBD"
course579.professor = "Ben Mullins";
console.log(course579.professor); // "Ben Mullins"
В JavaScript функции установки и получения можно различать в зависимости от того, как они вызываются. При использовании такого синтаксиса, как присвоение значения, например course579.professor = "Ben Mullins", запускается функция установки. При использовании синтаксиса, например при доступе к значению, например console.log(course579.professor), запускается функция получения.
Почему сеттеры и геттеры?
Защитите свойства данных
Функции установки и получения могут инкапсулировать свойства данных, обеспечивая доступ к свойствам только через определенные методы установки и получения. Этот подход обеспечивает безопасный и последовательный способ взаимодействия с внутренними свойствами объектов или классов.
Функции установки и получения полезны для проверки ошибок. Внутри функции установки мы можем проверить значение, убедившись, что оно не содержит ошибок и удовлетворяет определенным критериям, прежде чем назначать его соответствующему свойству.
Например:
const course579 = {
_seats: 0,
set seats(num) {
// Error Validation
// Ensure the property value is a number type
isNaN(num)
? console.log("Please enter a number")
: this._seats = num
},
get seats() {
return this._seats;
}
}
console.log(course579.seats); // 0
// set a string value
course579.seats = "sixty";
console.log(course579.seats); // "Please enter a number"
// set a number value
course579.seats = 60;
console.log(course579.seats); // 60
Прежде чем присвоить новое значение свойству, мы проверяем, относится ли оно к числовому типу. Подтверждение того, что значения свойств имеют требуемый тип, помогает предотвратить возможные ошибки. (Что? Кто-нибудь сказал TypeScript?)
Разрешить сложную настройку
Функции установки и получения могут обрабатывать значение и обновлять результат в соответствии с заранее определенными правилами. Настраивая функцию установки и получения, мы можем модифицировать данные, чтобы приспособиться к различным ситуациям, таким как вычисление значений данных, управление сложными структурами данных и т. д.
Например:
const course579 = {
// the data property is an array
_gsi: [],
set gsi(name) {
// customize the set function.
// instead of changing the value,
// push the new value to the array
this._gsi.push(name)
},
get gsi() {
// customize the get function
// instead of returning the property value directly,
// customize the message, providing more information
return this._gsi.length
? `Course 579 has ${this._gsi.length} GSI: ${this._gsi.join(', ')}.`
: "No GSI assigned yet."
},
}
console.log(course579.gsi); // "No GSI assigned yet."
course579.gsi = "Josh Horowitz";
console.log(course579.gsi); // "Course 579 has 1 GSI: Josh Horowitz"
course579.gsi = "April Wang";
console.log(course579.gsi); // "Course 579 has 2 GSI: Josh Horowitz, April Wang."
Свойство данных представляет собой массив. Мы можем не захотеть создавать новый массив каждый раз, когда добавляется новый GSI. В этом случае мы можем настроить функцию установки так, чтобы она добавляла новый GSI в конец существующего массива. Кроме того, нам может понадобиться сообщение с текущим количеством GSI и их именами. Таким образом, мы настраиваем функцию-получатель так, чтобы она генерировала более информативное сообщение, содержащее нужную нам информацию, а не просто возвращала массив.
Заключение
Сеттеры и геттеры — это функции JavaScript, которые используются для взаимодействия со значениями внутренних свойств. Пользовательские функции установки и получения являются мощными инструментами, помогающими поддерживать чистый и безошибочный код.
В этой статье не рассматривается использование сеттеров и геттеров в объекте Class. Class Объекты в JavaScript также имеют сеттеры и геттеры, которые функционируют так же, как и в предыдущих примерах. Однако сеттеры и геттеры Inheritance объекта Class — более сложная тема. Если вы хотите больше узнать о сеттерах и геттерах в объекте Class, вы можете начать с понимания Class и Inheritance в JavaScript.
Я надеюсь, что эта статья поможет вам получить общее представление о сеттерах и геттерах в JavaScript! :)
Ссылка:
setter — JavaScript | МДН. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
