Геттеры и сеттеры существуют в большинстве объектно-ориентированных языков программирования, включая JavaScript. Это конструкции кода, которые помогают разработчикам получать безопасный доступ к свойствам объектов. С помощью геттеров вы можете обращаться («get») к значениям свойств из внешнего кода, а сеттеры позволяют вам изменять («set») их значения. В этом руководстве мы покажем вам, как создавать геттеры и сеттеры в JavaScript. Также если необходим сервис Apple https://a-service.ua/
Как создавать геттеры и сеттеры в JavaScript
Объект JavaScript может иметь несколько свойств и методов, в которых хранятся статические данные и динамические функции. Свойства — это статические пары ключ-значение, а методы — это функции, специфичные для объекта.
Например, Car.color может быть свойством, а Car.drive () может быть методом объекта Car. С помощью геттера вы можете получить доступ к свойству цвета объекта Car, а с помощью сеттера вы можете изменить его значение (например, с синего на черный).
С помощью методов получения и установки вы можете получать и устанавливать только значения свойств, но не методов, поскольку методы не являются статическими.
Вы можете создавать геттеры и сеттеры тремя разными способами:
- с синтаксисом метода по умолчанию (методы получения и установки),
- с ключевыми словами get и set,
- с методом Object.defineProperty().
Методы получения Getter Methods
Самый простой способ получить свойства объекта — определить метод получения с использованием синтаксиса метода по умолчанию для каждого свойства. Давайте посмотрим на примере того, как создавать геттеры с помощью этой техники. У объекта myCar есть два свойства: цвет и марка. Вот как вы можете создать его с помощью object literal:
var myCar = {
color: "blue",
make: "Toyota"
};
При желании вы можете получить доступ к цвету и создать свойства напрямую с помощью следующего кода:
myCar.color;
// blue
myCar.make;
// Toyota
Хотя этот метод работает, использование геттеров вместо прямого вызова свойств имеет ряд преимуществ. Например, вы можете выполнять операции или проверки (например, оператор if-else) над свойством перед получением его значения.
Вы можете определить методы получения цвета и создать свойства следующим образом:
var myCar = {
color: "blue",
make: "Toyota",
getColor: function() {
return this.color;
},
getMake: function() {
return this.make;
}
};
Вышеупомянутые геттеры используют ключевое слово this, которое относится к объекту, которому принадлежит свойство (myCar в примере). Операторы return внутри геттеров по существу означают, что «возвращают значение свойства color / make этого объекта».
Чтобы получить свойства объекта myCar, вам нужно вызвать методы получения:
myCar.getColor();
// blue
myCar.getMake();
// Toyota
Если хотите, вы также можете добавить дополнительную логику в свои методы получения. Например, вы можете получить значения обоих свойств одновременно, создав метод getCar ():
var myCar = {
color: "blue",
make: "Toyota",
getCar: function() {
return "This is a " + this.color + " " + this.make + ".";
}
};
myCar.getCar();
// This is a blue Toyota.
Методы установки Setter Methods
Помимо геттеров, вы также можете создавать сеттеры, используя синтаксис методов JavaScript по умолчанию. Ниже вы можете увидеть, как методы setColor () и setMake () сравниваются с ранее объявленными геттерами.
var myCar = {
/* Properties */
color: "blue",
make: "Toyota",
/* Getter methods */
getColor: function() {
return this.color;
},
getMake: function() {
return this.make;
},
/* Setter methods */
setColor: function(newColor) {
this.color = newColor;
},
setMake: function(newMake) {
this.make = newMake;
}
};
Поскольку сеттеры существуют для изменения значений свойств, они принимают новые значения свойств (newColor и newMake) в качестве параметров.
Вызвать методы установки можно следующим образом:
myCar.setColor("red");
myCar.setMake("Audi");
myCar.getColor();
// red
myCar.getMake();
// Audi
После установки новых значений вы можете проверить с помощью геттеров, правильно ли они были изменены.
Ключевое слово get (The get Keyword)
Get keyword — это еще один способ создания геттеров. Вы можете определить методы получения для свойств myCar.color и myCar.make с помощью get keyword следующим образом:
var myCar = {
/* Data properties */
defColor: "blue",
defMake: "Toyota",
/* Accessor properties (getters) */
get color() {
return this.defColor;
},
get make() {
return this.defMake;
}
};
/* Calling the getter accessor properties */
myCar.color;
// blue
myCar.make;
// Toyota
Самое важное, что нужно помнить о get keyword, это то, что оно определяет свойство средства доступа, а не метод. Таким образом, он не может иметь то же имя, что и свойство данных, в котором хранится значение, к которому он обращается. В приведенном выше коде defColor и defMake — это свойства данных, а color и make — свойства доступа.
Вот почему вам нужно вызывать геттер с синтаксисом свойства, который не использует круглые скобки после имени получателя (например, myCar.color).
Поскольку ключевое слово get не поддерживается более ранними версиями Internet Explorer (IE8-), если вам нужно поддерживать устаревшие браузеры, используйте методы getter.
Ключевое слово набора (The set Keyword)
Set Keyword определяет свойство средства доступа, которое позволяет вам изменять значение свойства данных. Вот как вы можете добавить сеттеры в приведенный выше код:
var myCar = {
/* Data properties */
defColor: "blue",
defMake: "Toyota",
/* Accessor properties (getters) */
get color() {
return this.defColor;
},
get make() {
return this.defMake;
},
/* Accessor properties (setters) */
set color(newColor) {
this.defColor = newColor;
},
set make(newMake) {
this.defMake = newMake;
}
};
/* Calling the setter accessor properties */
myCar.color = "red";
myCar.make = "Audi";
/* Checking the new values with the getter accessor properties */
myCar.color;
// red
myCar.make;
// Audi
Вы можете использовать те же имена (цвет и make) для сеттеров, что и для геттеров, но с параметрами (newColor и newMake). Параметры позволят вам передать новые значения свойствам. Вы можете вызвать сеттеры, используя оператор присваивания (знак равенства equals sign) и присвоив им новое значение.
Самым большим преимуществом использования ключевых слов get и set является то, что вы можете сохранить конфиденциальность свойств данных. Поскольку геттеры и сеттеры имеют разные имена (цвет и марка), вы не сможете случайно переопределить значение свойств данных (defColor и defMake) внешним кодом.
Метод Object.defineProperty()
Вы можете использовать метод defineProperty() глобального объекта для добавления методов getters и setters к уже существующему объекту. Скажем, у вас уже есть объект myCar, содержащий свойства данных defColor и defMake. Позже вы можете добавить к нему геттеры и сеттеры с помощью метода Object.defineProperty() следующим образом:
/* Original object you already have */
var myCar = {
defColor: "blue",
defMake: "Toyota"
};
/* Adding a getter and setter to defColor */
Object.defineProperty(myCar, "color", {
get: function() {
return this.defColor;
},
set: function(newColor) {
this.defColor = newColor;
},
});
/* Adding a getter and setter to defMake */
Object.defineProperty(myCar, "make", {
get: function() {
return this.defMake;
},
set: function(newMake) {
this.defMake = newMake;
}
});
/* Checking the value of the properties with the getters */
myCar.color;
// blue
myCar.make;
// Toyota
/* Modifying the values with the setters */
myCar.color = "red";
myCar.make = "Audi";
/* Checking the modified properties with the getters */
myCar.color;
// red
myCar.make;
// Audi
Фактически, вы не можете использовать Object.defineProperty () только для изменения существующего объекта, но вы также можете добавить геттеры и сеттеры к вновь определенному объекту. Это решение может быть полезно, если вы хотите использовать встроенные свойства Object.defineProperty (), такие как возможность записи или настройки (см. Полный список в документации MDN).
Вывод
Вам не обязательно использовать геттеры и сеттеры при создании объекта JavaScript, но они могут быть полезны во многих случаях. Наиболее частыми вариантами использования являются (1) обеспечение доступа к свойствам данных и (2) добавление дополнительной логики к свойствам перед получением или установкой их значений.