javascript - "this"在构造函数中分配的函数中如何工作？

Question

我找到了这个示例代码:

function personFullName() {
    return this.first + ' ' + this.last;
}

function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = personFullName;
}

var dude = new Person("Michael", "Jackson");
alert(dude.fullName());

这会提醒“Michael Jackson”。我将其更改为从构造函数调用 personFullName 而不是分配函数对象:

function personFullName() {
    return this.first + ' ' + this.last;
}

function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = personFullName();
}

var dude = new Person("Michael", "Jackson");
alert(dude.fullName);

我希望“fullName”属性现在是一个字符串而不是一个函数。但现在它警告“undefined undefined”。谁能解释为什么我的版本不起作用？

Answer 1

在 JavaScript 中，this通常是 . 之前的任何内容在函数调用中。所以你说的事实 dude.fullName()是什么原因造成的this在 fullName()设置为 dude ¹。

在您问题的第二个版本中，您没有以相同的方式调用它。您正在调用 personFullName()它前面没有任何东西(这是正确的，因为它不再附加到 Person 对象)。这意味着 this最终默认为与 window 相同的值.自 window没有first或 last对其设置的属性，this.first和 this.last是 undefined .

要解决这个问题，您可以让您的人成为 personFullName() 函数的参数:

function personFullName(person) {
    return person.first + ' ' + person.last;
}

然后像这样调用它

…
this.fullName = personFullName(this);

---

^1: 请注意，该方法必须是 this 对象的属性。结合工作。你不能只打电话 object.someMethod()并获得this设置为 object在 someMethod .在您的代码中，以下内容不起作用:

function Person(first, last) {
    this.first = first;
    this.last = last;
    this.fullName = this.personFullName();
}

Uncaught TypeError: this.personFullName is not a function

这也不会:

function personFullName() {
    return this.first + ' ' + this.last;
}

function Person(first, last) {
    this.first = first;
    this.last = last;
}

var dude = new Person("Michael", "Jackson");
alert(dude.personFullName());

Uncaught TypeError: dude.personFullName is not a function

您可以在任何情况下使用 apply 绕过此限制辅助方法:this.fullName = personFullName.apply(this)做你期望你的代码的第二个版本做的，你也可以调用 personFullName.apply(dude)在任何时候得到"Michael Jackson"回来。