这行Js代码到底在做什么？

Question

I am learning about objects in javascript and I'm using a function to construct an object and adding a method to it. So clearly there's a method to change the firstName of the object, but what does the line this.changeName=changeName;
exactly do? If I delete it or alter the changeName function name to something else an error occurs and nothing is displayed. And deleting this line of code also leads to an error, so it seems it's essential for the code to run but I really can't figure out what it does.

<script>

function person(firstName, lastName, age){
    this.firstName=firstName;
    this.lastName=lastName;
    this.age=age;
    this.changeName=changeName;

    function changeName(name){
        this.firstName=name;
    }
}
me = new person("Hazem", "Khadash", 18);
me.changeName("Bashar");
document.write(me.firstName);

As I understand the code, me is created, changeMe() function is called as a method then person.lastName is rendered on the screen.

Thanks.

Answer 1

You are making changeName accessible as part of person . Consider it as exposing changeName .

Without it, you cannot do me.changeName as me.changeName no longer exists outside of the scope of person .

Answer 2

function person(firstName, lastName, age) {
    ...

    function changeName(name){
        this.firstName=name;
    }
}

creates a function that is only available inside the function person . As you've found, having only that makes me.changeName(…) not work, because the function isn't accessible outside person .

this.changeName = changeName

makes that function accessible outside the person function so you can call me.changeName later.

Notice it's this.changeName = changeName , not this.changeName = changeName() . With the parentheses, it would call the function and assign its output to this.changeName ; without parentheses, it assigns a reference to the function changeName to this.changeName .

You could change it to this, and it would be equivalent:

function person(firstName, lastName, age) {
    ...
    this.changeName = function(name){
        this.firstName=name;
    }
}

The best way to write your person "class" is probably like this:

function person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}

person.prototype.changeName = function changeName(name){
    this.firstName = name;
};

Answer 3

As you might have already heard in Javascript everything is an object. As you are within the function person you are "in the object" person as well. So this refers to the oject. Declaring a nested function within this function makes it only visible in the context of the function and not anywhere else. To make it available to the outer world you have to assign it to an object field, otherwise you can't call it from outside. You can think of it like a method of a class (there are no real classes in JS) - if you are familiar with object oriented programming.

The same thing would be:

function person(firstName, lastName, age){
  this.firstName=firstName;
  this.lastName=lastName;
  this.age=age;
  this.changeName = function(name){
    this.firstName=name;
  }
}

When you call this method within the scope of an instance of person. "this" always refers to that particular instance.

One could summarize:

this.changeName=changeName; -> assigns the still undefined local object changeName to the object-field changeName

function changeName(name) -> declares the local object changeName as a function.

Remember - in JavaScript everything is an object functions, variables, arrays,...

Answer 4

In javascript functions can be assigned to variables as a number or a string. In this particular case a person property named changeName is assigned with function changeName . This assignment allows you to call changeName function trough this proberty ( me.changeName("Bashar"); )

Answer 5

Without that line of code, you can call the changeName(name) function from within the scope of the person object. But with that line of code, you can call that function from outside of the scope, such as the line towards the bottom: me.changeName("Bashar").