Строка Не удается прочитать свойство 'replace' из неопределенного

Question

Я не могу понять, что мне здесь не хватает.

Я установил прототип в строку в моем utils.js

String.prototype.toTitleCase = () => {
    return this.replace(/\w\S*/g, (txt) => {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

И когда я проверяю это из app.js

import * as utils from 'utils'

"This is a test".toTitleCase();

Я получаю ошибку: TypeError: Cannot read property 'replace' of undefined

Я думаю, что прототипирование более чисто, чем создание функции для этого. Вот почему я хочу понять. Спасибо!

Answer 1

Проблема в том, что вы использовали "функцию стрелки".

Выражение функции стрелки [...] лексически связывает значение this

Таким образом, значение this был связан с undefined когда вы создали функцию. Он не был привязан к строковому объекту, для которого вы вызывали функцию.

Чтобы исправить это, используйте обычную функцию:

String.prototype.toTitleCase = (function() {
    return this.replace(/\w\S*/g, (txt) => {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
});

Answer 2

this является объектом Window, если используется функция со стрелкой, переключитесь на обычную функцию, и она работает

String.prototype.toTitleCase = function() {
    return this.replace(/\w\S*/g, (txt) => {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

Answer 3

Отладьте свой код, проверьте в консоли Firebug с точкой останова на вашей обратной линии значение this, вы увидите, что this не строка - это объект, представляющий ваш прототип String.