Как создать пунктирную функцию без нового объявления в javascript?

#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>