javascript - 为什么 this.firstName 返回未定义？

Question

我有一段代码，根据您使用的内部函数返回名字和姓氏或名字和中间名。但是，当使用 this 关键字时，当我访问姓氏或中间名内部函数时，名字返回未定义。如果我不使用“this”，那么名字就可以正常返回。我不明白为什么会发生这种情况。谁能解释一下为什么吗？

    function celebrityName (firstName) {
        var nameIntro = "This celebrity is ";
        this.firstName = firstName;

        return {
            lastName: function(lastName){
                this.lastName = lastName;
                return nameIntro + this.firstName + ' ' + this.lastName + " (last name)";
            },

            middleName: function(middleName){
                this.middleName = middleName;
                return nameIntro + this.firstName + ' ' + this.middleName + " (middle name)";
            }
        }
    }

    var mjName = celebrityName ("Michael");
    console.log(mjName.middleName("Jackson"));

这是没有“this”的代码并且工作正常。

    function celebrityName (firstName) {
        var nameIntro = "This celebrity is ";

        return {
            lastName: function(lastName){
                return nameIntro + firstName + ' ' + lastName + " (last name)";
            },

            middleName: function(middleName){
                return nameIntro + firstName + ' ' + middleName + " (middle name)";
            }
        }
    }

    var mjName = celebrityName ("Michael");
    console.log(mjName.middleName("Jackson"));

Answer 1

您期望 this 的范围是 celebrityName 函数；但是，它是 middleName 函数，因此 this.firstName 不存在。

您可以在 celebrityName 函数中为 this 起别名，但有些人会说这是反模式。

例如:

function celebrityName (firstName) {
    var nameIntro = "This celebrity is ";
    var celebrity = this;
    celebrity.firstName = firstName;

    return {
        lastName: function(lastName){
            celebrity.lastName = lastName;
            return nameIntro + celebrity.firstName + ' ' + celebrity.lastName + " (last name)";
        },

        middleName: function(middleName){
            celebrity.middleName = middleName;
            return nameIntro + celebrity.firstName + ' ' + celebrity.middleName + " (middle name)";
        }
    }
}