In this W3Schools example, I am not getting how changeName works:
function person(firstname, lastname, age, eyecolor) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.eyecolor = eyecolor;
this.changeName = changeName;
function changeName(name) {
this.lastname = name;
}
}
myMother = new person("Sally", "Rally", 48, "green");
myMother.changeName("Doe");
document.write(myMother.lastname);
Why do we have this.changeName=changeName, and then a function definition for changeName?
-
2And please do not use w3schools...Naftali– Naftali2013年08月28日 13:45:48 +00:00Commented Aug 28, 2013 at 13:45
-
1Read this: w3fools.comJoe_G– Joe_G2013年08月28日 13:49:34 +00:00Commented Aug 28, 2013 at 13:49
-
2One possible reason for the downvotes is that questions should avoid depending on external resources. I added the code inline for you. The question isn't very clear (probably because you are confused), and the lack of code in its body didn't help.bfavaretto– bfavaretto2013年08月28日 13:51:25 +00:00Commented Aug 28, 2013 at 13:51
-
4@Neal It doesn't make sense to downvote for asking about code found in w3schools; it's not the OP's fault that it's a bad resource. Also, what would be a valid answer to "what have you tried" in a "why" question?bfavaretto– bfavaretto2013年08月28日 13:55:21 +00:00Commented Aug 28, 2013 at 13:55
-
1@Tingya Yes, you really should. Check the JavaScript tag wiki for a list of better resources.bfavaretto– bfavaretto2013年08月28日 14:05:27 +00:00Commented Aug 28, 2013 at 14:05
5 Answers 5
It is defining a method changeName for the person objects - but in a sort of round-about way, the equivalent (and better) way to do it is:
this.changeName = function(name) {
this.lastname = name;
}
(Hence 'please do not use w3school')
3 Comments
Here's you code (From the reference you made):
<!DOCTYPE html>
<html>
<body>
<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>
</body>
</html>
When you type this code:
function changeName(name)
{
this.lastname=name;
}
you're basically making a function.
And when you do this:
this.changeName=changeName;
you're basically saying that "the function changeName (on the RHS) belongs to this function, i.e. person. (However, person is being used as an object)"
Hence when you see , the code given by your link, the global code defines an object myMother and it accesses changeName via myMother.changeName() just because you said, this.changeName = changeName
Comments
In JavaScript this code:
function foo() {
function changeName() {
}
this.changeName = changeName;
}
is the same as
function foo() {
this.changeName = changeName;
function changeName() {
}
}
It's becasue of hoisting in javascript all declartions are putted at the begining by the interpreter.
Comments
This.changeName is a property.
this.changeName=changeName is just the declaration of the function.
//Here you create your Person Object
myMother=new person("Sally","Rally",48,"green");
//Here you affect the LastName "Doe" By calling the ChangeName function of the object Person
myMother.changeName("Doe");
Here are additional answers to some likely questions:
JavaScript only has two scopes:
Global Scope
Function Scope
There is no block scope in JavaScript!
All variables declared inside a scope are available as if they were all declared at the begin of that scope, due to variable hoisting.
This is why it is recommended to declare all variable at the begin of their scope, to better reflect reality, possibly in a single var declaration.
e.g.
function person(firstname, lastname, age, eyecolor) {
var changeName = function (name) {
this.lastname = name;
}
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.eyecolor = eyecolor;
this.changeName = changeName;
}
Actually, in this case, the variable or named function is not needed at all.
Just assign an anonymous function to the object property directly:
function person(firstname, lastname, age, eyecolor) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.eyecolor = eyecolor;
this.changeName = function (name) {
this.lastname = name;
}
}
Tools like JSLint or JSHint will help you improve your JavaScript code.
See this sample @ codepen.io (press CTRL+SHIFT+7 in the JS Editor) and JSHint use at codepen.io.
Finally, the Mozilla Developer Network is a much better resource than W3Schools.
It will even teach you in the document.write Notes that is not good practice.
1 Comment
Javascript has no block scope