How does "this" keyword work in the particular way?

Question

I'm trying to learn JavaScript, but got stuck with a problem (more with misunderstanding "this" keyword) that doesn't give me move on.

I've watched a lot of content about it and barely understood it, but still have some troubles.

I have some code:

function Person (name, age) {
  this.name = name;
  this.age = age;
  this.changeName = function (name) {
    this.name = name;
  }
}

What do we use "this" here for? As I understood we use "this" to create variable inside function constructor and give it value of our "name" parameter that we could refer to it. Am I right?

Then I have this code:

var p1 = new Person ("John", 30);
p1.changeName ("Jane");
console.log(p1.name);

As I sorted out here, we call method that overwrites our variable that we created to refer to. But it doesn't change actual parameter. So if it's right why do we use it? Doesn't it matter to have actual "name" parameter changed?

The whole code is from teaching app!

What do you mean by *"But it doesn't change actual parameter."*? It's true, it doesn't, but it seems like an odd thing to highlight...? — T.J. Crowder, Apr 27 '19 at 09:10
Try `this.changeName = function (name) { this.name = name; }.bind(this)` or `this.changeName = (name) = > { this.name = name; }` or `const self = this; this.changeName = function (name) { self.name = name; }`. — connexo, Apr 27 '19 at 09:12
I wonder if does it still store like the first value and just show us the second one which is changed? — Davva Quantie, Apr 27 '19 at 09:13
@connexo Why? `this`/ The `name` is changed to `"Jane"`. `this` inside `changeName` will refer to the the instance of the class. — Maheer Ali, Apr 27 '19 at 09:14
Duplicate of https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work — Wiktor Zychla, Apr 27 '19 at 09:14
@DavvaQuantie Your question is unclear. Please be specific what you don't understand. Do you want to know how the `name` is changed to `"Jane"`? — Maheer Ali, Apr 27 '19 at 09:16
Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Towkir, Apr 27 '19 at 09:17
@DavvaQuantie — Why would it store the original value after you overwrote it? — Quentin, Apr 27 '19 at 09:17
@connexo — Constructor functions are JavaScript classes. (The `class` keyword is just new and alternative syntax for creating them). — Quentin, Apr 27 '19 at 09:18
@Quentin That is simply imprecise. Constructor functions are the JavaScript *equivalent* of the classes concept known from other languages. — connexo, Apr 27 '19 at 09:20
@connexo But that doesnot justify your answer. Whether there are classes or not. — Maheer Ali, Apr 27 '19 at 09:24

score 0 · Answer 1 · answered Apr 27 '19 at 09:17

So if it's right why do we use it? Doesn't it matter to have actual "name" parameter changed?

No, there's no need to do that in this example. changeName changes the property on the object that was created by new Person.

It's true that that example code is a bit odd, because it creates the changeName function in the constructor but doesn't do the kinds of things you'd normally do when you create the function in the constructor. I'd expect that code to either be this, which puts the changeName on the prototype:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.changeName = function(name) {
  this.name = name;
};

(or the class equivalent) or this:

function Person(name, age) {
  this.getName = function() {
    return name;
  };
  this.changeName = function(newName) {
    name = newName;
  };
  this.getAge = function() {
    return age;
  };
}

That code does update the parameter (which has no effect at all on the code calling Person). It doesn't create name and age properties at all; instead, it just makes their values accessible via getName and getAge. There's also a function to change name (changeName); but there's no function to change age. People write code like that so that age cannot be changed from outside code created within the Person constructor.

score -1 · Answer 2 · answered Apr 27 '19 at 09:25

I guess you may misunderstand which parameter you actually change, so I rewrite it like so, holp this helps.

function Person (argument_name, argument_age) {
  this.name = argument_name;
  this.age = argument_age;
  this.changeName = function (argument_change_name) {
    this.name = argument_change_name;
  }
}

let p1 = new Person ("John", 30);
p1.changeName ("Jane");
console.log(p1);

score -2 · Answer 3 · answered Apr 27 '19 at 09:33

The this keyword is used to create and assign values to variables in the class. It is again used to create functions, either getters or setters. So in your code this.changeName is a function that when passed a value will change the name of the person. eg.

var a = 5; // a is an integer
var b = "Han"; //b is a string
var c = function(name){
  //code here
} // then c is also a function;

How does "this" keyword work in the particular way?

3 Answers3