#javascript
Вопрос:
Просто в учебных целях я хотел бы создать функцию в формате точек (я не знаю, как называется этот тип функций). Я хотел бы понять, как я могу воссоздать эту ситуацию:
String('any string').toLowerCase()
// output ANY STRING
У меня есть такой пример:
class MyCustomString {
constructor(value) {
this.value = value
}
toUpperCase() {
this.value = String(this.value).toUpperCase();
return this;
}
replace(valueToReplaced, newValue) {
this.value = String(this.value).replace(valueToReplaced, newValue);
return this
}
}
Тогда я хотел бы убежать:
MyCustomString('name').toUpperCase().replace('A', 'x');
и ожидаемый результат должен быть:
// output NXME
Может ли кто-нибудь помочь мне с тем, как создать подобную функцию?
Важно отметить, что моя цель состоит не в том , чтобы создать новый метод
String
или включить егоprototypes
в свою структуру (в этом примере я использовал методString
, но мог бы бытьNumber
,Array
или какой-либо другой метод), а в том, чтобы понять, как построена эта цепочка методов, и применить ее к своим проектам. Мое намерение не состоит в том, чтобы переопределять какой-либо собственный метод или создавать новый прототип.
Комментарии:
1. Приведенный вами пример, по сути, делает то, что вы описываете, если вы переименовываете
construction
вconstructor
и используетеnew
при создании объекта.2. вы объявляете класс, поэтому вам нужно использовать new : (новая строка mycustom(‘имя’)). Верхний регистр().заменить(‘a’, ‘x’);
3. Извините, я исправил
constructor
объявление и не используюnew
его при вызове своего пользовательского класса. В качестве ожидаемого результата я хочу получить форматированную строку, а не объектMyCustomString
.4. вы можете обернуть функцию следующим образом: функция CustomString(ы){ возвращает новую строку(ы) MyCustomString }
5. кстати, «пунктирная функция» называется «цепочкой».
Ответ №1:
Вам нужно создать экземпляр класса, используя new
ключевое слово, чтобы заставить его работать. Подобный этому
const customString = new MyCustomString('name').toUpperCase().replace('A', 'x'); // this in upper case as after toUpperCase() it will be in capital
console.info("customString", customString); // will give you desired output
Комментарии:
1. В этом случае результат будет чем-то вроде
{value: 'NxME'}
и, но то, что я хочу, естьNxME
.2. затем вам нужно вернуть это.значение из ваших методов. Добавьте это, и вам будет хорошо
3. Я попытался вернуться
this.value
, но вторая функция выдает ошибку неопределенной функции.4. @FelipePaz Если ваши функции возвращают строки, то вы не можете связать их по цепочке, как вы пытаетесь сделать. Если вы хотите, чтобы они были цепными, то они должны возвращать экземпляр вашего класса, а не строку. У тебя не может быть и того, и другого. Однако у вас есть возможность сделать
new MyCustomString('name').toUpperCase().replace('A', 'x').value
это.5. И как можно было бы получить тот же результат без использования
new
?. Вот в чем вопрос, я пробовал то, что вы сказали, но использовалnew
.
Ответ №2:
Вы должны обернуть создание экземпляра внутри функции и вернуть новый экземпляр класса из этой оболочки. «Формат точки» называется цепочкой, которая предоставляет методы класса для возврата экземпляра ( this
) вместо значения. Когда вам нужно фактическое значение, вы можете затемнить собственные toString
и valueOf
методы с помощью методов класса, затем вы можете получить назначенное значение, просто обратившись к объекту, возвращенному из методов.
const MCS = (function() {
class MCS {
constructor(value) {
this.value = value;
}
toUpperCase() {
this.value = String(this.value).toUpperCase();
return this;
}
replace(valueToReplaced, newValue) {
this.value = String(this.value).replace(valueToReplaced, newValue);
return this;
}
toString() {
return this.value;
}
valueOf() {
return this.value; // Converts to number, omit , if a string is strictly needed
}
}
return function mcs(str) {
return new MCS(str);
}
}());
// Console doesn't use toString method, explicit conversion
console.log(MCS('abc').toUpperCase().replace('A', 'X').toString());
// Alternatively read value property of the returned object
console.log(MCS('alternative').toUpperCase().replace('A', 'x').value);
// DOM content is implicitly converted to string using toString method
document.querySelector('#div').textContent = MCS('name').toUpperCase().replace('A', 'x');
<div id="div"></div>