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

Question

我有一段代码 returns 名字和姓氏或名字和中间名，具体取决于您使用的内部函数。但是，当使用 this 关键字时，当我访问 lastname 或 middlename 内部函数时， firstname 返回 undefined 。如果我不使用 'this' 那么名字 returns 就好了。我不明白为什么会这样。谁能解释一下为什么？

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

Answer 2

因为在 "this.firstName" 中的声明 "this" 是对全局 Window 对象的引用。 "this.firstName" 中的 "this" 您在 console.log 中引用的是您返回的 "object"。两者 "this" 不同。

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

    /* Here You defined "this" in the context of Global Object */
    this.firstName = firstName; // "this" here is the Global Window Object

    /* You are returning a different object here */
    /* This is the object which is getting referenced when you are trying to access "this.firstName" inside here */
    return {
        lastName: function(lastName){

            /* "this" here refers to Current Object which you are returning */
            this.lastName = lastName; 

            /* "this" here refers to Current Object which you are returning */
            /* and as there is no this.firstName defined for current object, you get undefined */
            return nameIntro + this.firstName + ' ' + this.lastName + " (last name)";  
        },

        middleName: function(middleName){

            /* "this" here refers to Current Object which you are returning */
            this.middleName = middleName;

            /* "this" here refers to Current Object which you are returning */
            /* and as there is no this.firstName defined for current object, you get undefined */
            return nameIntro + this.firstName + ' ' + this.middleName + " (middle name)";  
        }
    }
}

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

Answer 3

您 return 一个不同的对象，新对象没有定义名字。您可以做两件事。

function celebrityName(firstname){
   this.nameIntro = "This celebrity is ";
   this.firstName = firstname;
   this.lastName = function(lastname){
     return this.nameIntro+this.firstName+' '+lastName+" (lastname)";
   }
   this.middleName = function(midname){
     return this.nameIntro+this.firstName+' '+midName+" (midname)";
   }
}

你可以这样称呼它：var mjName = new celebrityName("Michael");

或者您可以 return 完整的对象：

function celebrityName(firstname) {
   return {
     nameIntro: "This celebrity is ",
     firstName: firstname,
     lastName: function(lastname){
       return this.nameIntro+this.firstName+' '+lastName+" (lastname)";
     },
     middleName: function(middleName){
            return nameIntro + this.firstName + ' ' + middleName + " (middle name)";
     }
   }
}

这将像您之前所做的那样调用：var mjname = celebrityName("Michael");

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

Why is this.firstName returning undefined?

javascript

function

this