"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());

哪个警告"迈克尔杰克逊".我将其更改为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"返回.