开发者

why does this return undefined - javascript

i'm pretty new to js. i'm sorry if this sounds dumb. but why does the following code return "开发者_开发百科undefined"

function NewPerson(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;

    this.getName = function(){
        //alert(this.name);
        alert("The age is "+this.age);
    };

}

var obj1 = new NewPerson("Mark",25,"Male");
alert("The age is as follows "+obj1.getName());

// output:

The age is 25 The age is as follows undefined


Because you don't return anything.


You have to explixitly return in you function

Following should work

function NewPerson(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;

    this.getName = function(){
        //alert(this.name);
        alert("The age is "+this.age);
    return this.age
    };

}

    var obj1 = new NewPerson("Mark",25,"Male");
    alert("The age is as follows "+obj1.getName());


No one else mentioned it so I will - it is more efficient to put functions that will be the same for all instances on the constructor's prototype. Then you only have one instance of the function that is used by all instances, e.g.

function NewPerson(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
} 

NewPerson.prototype.getName = function() {
    alert("The age is "+this.age);
    return this.name;
}


If you want to get some value from called function you must use

return value;

So try

function NewPerson(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;

this.getName = function(){
    alert("The age is "+this.age);
    return this.name;
};
}  
var obj1 = new NewPerson("Mark",25,"Male");
alert("The name is as follows "+obj1.getName());

will work as you expected.


As stated before, you didn't return anything in getName.

It looks like you don't really want to alert age in getName. Also, adding getName to each instance of the object in the constructor is inefficient. Use the prototype method instead. I am submitting the cleaned-up code for what you are probably going for:

    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    };
    Person.prototype.getName = function() {
        return this.name;
    };
    var obj1 = new Person("Mark",25,"Male");
    alert("The name is: "+obj1.getName());

By placing getName on the prototype, all instances of Person will have access to the same function, thus saving memory :) By using the statement this.getName = ... in the constructor function Person, you are making a new function for each instance of Person.


@Davenewton 's answer is correct and while I like it for its straightforwardness, it takes that
famous a-ha! moment for you to fully realize why. Here's what's really going on:

So to elaborate If we had something like this:

function i_am(){
  var a = 'very smart person';
  console.log(this.a);
}

var a = 'monkey';
i_am();

Depending on what linter or browser you might be using, this might either return

> "monkey" // (try the snippet)

or also

> "monkey"  
> undefined    // check the sreenshot

why does this return undefined - javascript

This is because of one simple reason, best understood if we go step-by-step how compiler "reads" the code.

  1. hoist the function i_am() declaration to top (undefined)
  2. hoist the var a declaration to top (undefined)
  3. assign 'monkey' to variable a (now string "monkey")
  4. execute/invoke the i_am() a function we have pre-declared
  5. create a local variable a and assign string "very smart person"
  6. console.log(this.a) returns 'monkey', because this refers to var/property a (same thing in this case) of the global object - call-site is from global object : i_am();
  7. Finish execution - but uh oh! We executed function and returned no value!

Now, depending on your environment, either it hides the undefined result from you, or it prints it out! Why? Because functions are looking to return a value. Just like with variable declaration, if you do

var a;
console.log(a);

it has not been assigned a value, hence it results after RHS in undefined.

Similar principle applies to function, where it's looking to return a value, but it doesn't return anything, hence resulting in undefined


In other words, it's not this that returns undefined. It's the invokation of i_am(); that returns undefined!

Hopefully it's clear to everybody now :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜