Почему я становлюсь неопределенным в браузере при использовании 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
Вы пытаетесь использовать 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!!");
▲
};
}
Вам нужно обновить функцию 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>");
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();
greeting
в writeGreeting
или что-то в этом роде, просто чтобы вы (и любые другие разработчики) знали, что он пишет в документ, а не возвращает строку.