Почему я получаю неопределенный при использовании document.write ()?

1

Почему я становлюсь неопределенным в браузере при использовании document.write()?

<script type="text/javascript">
    function Person (name) {
        this.name = name;
        this.greeting = function() {
            document.write("Hello " + name +  " Go rock the industry!!");
        };
    }

    var person1 = new Person("Sara");
    var person2 = new Person("Bob");

    document.write(person1.name + "<br>");
    document.write(person1.greeting() + "<br>");
    document.write(person2.name + "<br>");
    document.write(person2.greeting() + "<br>");

</script>

В браузере я получаю этот вывод:

Sara
Hello Sara Go rock the industry!!undefined
Bob
Hello Bob Go rock the industry!!undefined
Теги:
oop

2 ответа

1
Лучший ответ

Вы пытаетесь использовать document.write для функции, которая не возвращает значение, скорее выполняет document.write. Person.greeting() должен возвращать значение, чтобы вы могли использовать его при вызове document.write(person2.greeting()).

Это должно быть примерно так:

function Person (name) {
    this.name = name;
    this.greeting = function() {
        return ("Hello " + name +  " Go rock the industry!!");
          ▲
    };
}
  • 0
    извините, но меньше репутации после пересечения 15+ я сделаю это определенно.
1

Вам нужно обновить функцию greeting чтобы вернуть строку вместо вызова самого document.write().

В настоящее время функция greeting вызывает document.write() а затем неявно возвращает значение undefined.

Когда вы оцениваете выражение

personX.greeting() + "<br/>"

он оценивает

undefined + "<br/>"

и, согласно правилам конкатенации строки JavaScript, undefined сначала переносится в строку "undefined" а затем конкатенируется со следующим значением.


Редактировать:

Если вы заинтересованы в изучении функций getter, вы также можете реорганизовать

function Person (name) {
    this.name = name;
    Object.defineProperty(this, 'greeting', {
        get: function() {
            return "Hello " + this.name +  " Go rock the industry!!";
        }
    });
}

var person1 = new Person("Sara");
var person2 = new Person("Bob");

document.write(person1.name + "<br>");
document.write(person1.greeting + "<br>");
document.write(person2.name + "<br>");
document.write(person2.greeting + "<br>");

Обратите внимание, как мы можем получить доступ к вычисляемому значению personX.greeting как если бы это было просто свойство строки.

В зависимости от вашей среды и т.д., Если вы можете использовать синтаксис ES2015+, вы можете добиться того же результата с помощью

class Person {

  constructor(name) {
    this.name = name;
  }

  get greeting() {
    return 'Hello ${this.name} Go rock the industry!!'
  }
}

let person1 = new Person('Sara');
let person2 = new Person('Bob');

document.write(person1.name + "<br>");
document.write(person1.greeting + "<br>");
document.write(person2.name + "<br>");
document.write(person2.greeting + "<br>");
  • 0
    Могу ли я сделать так: function Person (name) { this.name = name; this.greeting = function() { document.write("Hello " + this.name + " Go rock the industry!!"); }; } var person1 = new Person("Sara"); document.write(person1.name + "<br>"); person1.greeting();
  • 0
    Это также сработало бы, да. Однако это создает странное несоответствие в том, как работает ваш объект; если вы сделали это таким образом, возможно, переименуйте метод greeting в writeGreeting или что-то в этом роде, просто чтобы вы (и любые другие разработчики) знали, что он пишет в документ, а не возвращает строку.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню