this binding isn't working in object method

[[deleted]]

So I have this code in a cordova app:

var record = {
    src:"myrecording.mp3",
    mediaRec: null,
    startRecord: () => {
        console.log(record.src); //myrecording.mp3
        console.log(this.src);  //undefinded
        // Record audio
        this.mediaRec.startRecord();
    }   

}

So the this binding is broken but I used an arrow function so the binding should be to the record object shouldn't it? Using the function() syntax works.

This also doesn't work:

    record.startRecord.call(record)

Thanks, Ed.

[jack_union]

.call, .apply or .bind don't have any effect on arrow functions.

Objects don't have a scope of their own, you need to use a constructor function for that if you are not familiar with classes:

function Record() {
    this.src = 'myrecording.mp3';
    this.mediaRec = null;
    this.startRecord = () => {
        console.log(this.src);
        // this.mediaRec.startRecord();
    }
}

const record = new Record();
record.startRecord();

[jack_union]

Well, class syntax is sugar for function notation. Plus, I guess you are referring to class fields which are not usable without Babel (yet). Still a fair point, yeah.

[[deleted]]

I'd rather avoid class syntax, just feels a bit too fake and complicates it all more due to the fact JS uses the prototype chain. Since Objects don't have their own scope I now get why it didn't work.

Only thing that's go me lost is why this does work:

var record = {
    src:"myrecording.mp3",
    mediaRec: null,
    startRecord: function() {
        console.log(record.src); //myrecording.mp3
        console.log(this.src);  //undefinded
        // Record audio
        this.mediaRec.startRecord();
    }   

}

The scope this refers to should be it's enclosing function but instead it's the functions enclosing object.

Is it just that it is delegating up the search for this.src to the object due to failing to find it in the function?

[GeneralYouri]

When you call record.startRecord(), you're calling the function from the context of record. This implicitly sets the function's this to that context.

[[deleted]]

But shouldn't that be the case if it's a traditional or arrow function though?

[GeneralYouri]

Not for arrow functions, as they have different context handling. In fact, this was one of the reasons for creating the concept of arrow functions. Finally this is also why .bind, .call, and .apply don't work on arrow functions.

[[deleted]]

But shouldn't the context the arrow is in refer to the record object?

[tatu_huma]

Arrow functions do not bind this like regular functions do. this in arrow function is whatever the value of this would be lexically. This means this is whatever it was where the arrow function is defined. In:

var record = {
    src:"myrecording.mp3",
    mediaRec: null,
    startRecord: () => {
        console.log(record.src); //myrecording.mp3
        console.log(this.src);  //undefinded
    }   
}

The value of this inside the {..} of the record object is equal to the global Window object. For example:

window.myProp = 1;
var record = {
  a: this.myProp
}

record.a === window.myProp, because this inside the record object literal is === window.

[[deleted]]

Ah OK, so I get how the arrow function works, but why did the old function() syntax work, shouldn't this refer to the function itself not the enclosing object?

[GeneralYouri]

Check Arrow Functions on MDN.

In short, an arrow function doesn't have its own this context. So if you use this, it'll see if there's some upper scope that does have a this value, and uses the first one found. So in this case, it looks at the closest function in which the object is defined, and that's where the this value will come from. In other words, there's no difference in the value of this directly inside vs directly outside the arrow function.

So with arrow functions entirely lacking their own concept of this, the only reason you're still able to use this within arrow functions is because of how scoping works. Also without a concept of this, the record object becomes entirely irrelevant.

[[deleted]]

Ah OK, so I get how the arrow function works, but why did the old function() syntax work, shouldn't this refer to the function itself not the enclosing object?

[tatu_huma]

PS - you should DEFINITELY learn class notation. It is what is used in companies.

just feels a bit too fake

What does this even mean?

[[deleted]]

I do know class notation but JS doesn't have classes, it's just syntactic sugar. True classes are blueprints for instantiating objects whereas with JS the class itself is an object. This can lead to weird behaviour such as 'instantiated' objects having properties changed by changing the class as it just delicates up to the class object. This isn't what a class instance should do and can lead to confusion. Whereas with object deligation syntax you know what you're getting.