为什么this.firstName返回undefined?

时间:2015-07-16 13:04:19

标签: javascript function this

我有一个代码块,它返回firstname和lastname或firstname和middlename,具体取决于你使用的内部函数。但是,当使用this关键字时,firstname在我访问lastname或middlename内部函数时返回undefined。如果我不使用'这个'然后firstname返回就好了。我不明白为什么会这样。任何人都可以解释原因吗?

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

这是没有'这个'的代码。并且工作正常。

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

3 个答案:

答案 0 :(得分:1)

您希望this的范围是celebrityName函数;但是,它是middleName函数,因此this.firstName不存在。

您可以在this函数中对celebrityName进行别名,但有些人会说它是反模式。

所以,例如:

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

答案 1 :(得分:0)

因为在声明期间“this.firstName”中的“this”是对Global Window对象的引用。 你在console.log中引用的“this.firstName”中的“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"));

答案 2 :(得分:0)

返回另一个对象,新对象没有定义名字。你可以做两件事。

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

或者您可以返回完整的对象:

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