用户界面 - 需要解释此 Javascript 代码

Question

<p id="demo"></p>
<script>
function employee(name, jobtitle, born) {
    this.name=name;
    this.jobtitle=jobtitle;
    this.born=born;
}

var fred = new employee("Fred Flintstone", "Caveman", 1970);
document.getElementById("demo").innerHTML = employee.name;
</script>

当我执行此代码时，我得到的输出为：员工但是，如果我执行 employee.jobtitle 代替 employee.name 例如：
document.getElementById（"demo"）.innerHTML = employee.jobtitle

我得到的输出是：未定义。为什么？

Answer 1

当你要求employee.name时，你实际上要求的是函数的名称。现在这似乎是 ES6 中出现的新功能，所以虽然这可能适用于已经开始实施 ES6 标准的当前浏览器，但我敢打赌，它不适用于像 IE8 这样的旧浏览器，仅仅是因为它们不支持 ES6。

employee.jobtitle返回undefined的原因是，与name不同，没有称为jobtitle的本机属性作为Function.prototype的一部分。

请记住，employee是一个构造函数，在这种情况下，对象实例fred。 fred.name和fred.jobtitle将像您期望的那样为您提供该对象的属性值。

Answer 2

employee是一个

函数，它没有name属性。

另一方面，fred是由该函数构建的对象。 它确实具有name属性。

尝试：

document.getElementById("demo").innerHTML = fred.name;

在面向对象的编程中，您可以引用类型的特定实例以与它们进行交互。 不是类型本身。