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
This is because of one simple reason, best understood if we go step-by-step how compiler "reads" the code.
- hoist the
function i_am()
declaration to top (undefined
) - hoist the
var a
declaration to top (undefined
) - assign
'monkey'
to variablea
(now string"monkey"
) - execute/invoke the
i_am()
a function we have pre-declared - create a local variable
a
and assign string"very smart person"
console.log(this.a)
returns'monkey'
, becausethis
refers tovar
/property a
(same thing in this case) of theglobal
object - call-site is fromglobal
object :i_am();
- 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 function
s 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 return
s undefined
. It's the invokation of i_am();
that returns undefined
!
Hopefully it's clear to everybody now :)
精彩评论