7

I create a function somewhere and I bind it to this so that I can use the parent block's meaning of this as the value of this within the function. For example:

var foo = function() {
    // some stuff involving other stuff
}.bind(this);

Is the this I pass as an argument to bind passed by reference, or by value? So if I change the parameters of the this object a bit later in the outer block of code, and afterwards call foo, will foo use the value of this at the time I called bind, or at the time I called foo?

ibrahim mahrir
  • 31,174
  • 5
  • 48
  • 73
hitecherik
  • 442
  • 2
  • 13
  • 6
    Technically speaking, there is [**no** pass-by-reference in javascript](https://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value). Though, the `this` is a reference to your object, so you're passing a reference of your object to the function, so if you change the `this` inside the function, then the original object get mutated as well. – ibrahim mahrir Apr 14 '18 at 18:59
  • 4
    Everything in JavaScript is passed by value, full stop. Passing a reference by value is not the same as passing by reference. – wchargin Apr 14 '18 at 22:59
  • 2
    Hi there @ibrahimmahrir. Most high-level programming languages implement pass-by-reference as passing a pointer by value. It's quite clear this is not what I'm asking, and therefore it isn't very helpful. I'm sorry, but I really don't understand what you're trying to contribute here. – hitecherik Apr 14 '18 at 23:10
  • 1
    @wchargin See above ^ – hitecherik Apr 14 '18 at 23:10
  • 2
    That's not true. It doesn't implement pass-by-reference at all. In this case, whether `this` is passed by reference, or value, the properties the object it points to will be the same because there's only one object. If you're really not asking what you asked, then you should change the question to what you are asking. – fgb Apr 14 '18 at 23:23
  • 1
    @fgb I'm not asking what the theoretical, technical, or symantic difference between pass-by-value and pass-by-reference is. Regardless of whether pass-by-value is the only technical way of passing arguments in JavaScript, passing objects is *effectively* pass-by-reference when one looks at the end result. – hitecherik Apr 14 '18 at 23:37
  • 1
    No, this has nothing to do with passing. What do you think `var a = this;` does? – fgb Apr 14 '18 at 23:42
  • 2
    @fgb You're missing the point – the question has nothing to do with how JavaScript's "pass-by-reference" is actually implemented behind the scenes. – Zak Apr 14 '18 at 23:48
  • 1
    @Zak What? That's what I just said. – fgb Apr 14 '18 at 23:49

3 Answers3

6

So if I change the parameters of the this object a bit later in the outer block of code, and afterwards call foo, will foo use the value of this at the time I called bind, or at the time I called foo?

at the time you called foo.

this is a reference to Object. That means Object may get mutated at some point and you will get "fresh - up to date" values of it.

Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
  • I'd say that the value of `this` would be identical both at the time of binding and when calling `foo`. It remains the same object; however, its properties might change. – rhino Apr 14 '18 at 23:05
2

If you will change the value of this object, then foo will get the fresh value of this at the time foo is called.

var module = {
  x: 42,
  getX: function () {
    return this.x;
  }
}

var retrieveX = module.getX;
console.log(retrieveX()); // The function gets invoked at the global scope
// expected output: undefined

var boundGetX = retrieveX.bind(module);
module.x = 52;
console.log(boundGetX());
ashfaq.p
  • 5,379
  • 21
  • 35
0

Sorry, I don't have enough reputation to comment. If it's by reference then why are the outputs of both the blocks same here:

var module = {
  x: 5,
  b:{
    a:5,
    getX: function () {
        console.log(this.a)
    return "hello world";
  }
  }
  
}
const boundGetX = module.b.getX.bind(module.b);
console.log(boundGetX());
module.b={
    a:45678,
     getX: function () {
    return "hello world2";
  }
}
console.log(boundGetX());