Javascript bind working with its instance

Question

Lets take an object

var o = {a : 10 ,b:20,f:function(){ return this.a + this.b; }};
console.log(o.f())//30 works as expected

Now,

var o = {a:10,b:20,f:function(){ return this.a + this.b; }};
var p = o;
p.a = 1;
p.b = 4;
console.log(p.f()); // 5 works fine
console.log(o.f()); //5,it should 30 right but why it is showing 5

why is it working like this. If i do o.f() it should get the value from object o.

It looks like i have not understood the bind properly

console.log(o.f.bind(o)())//gives 5
console.log(o.f.bind(this)())//gives 30

please give the difference between these two lines codes.

values in o changed already .

passion
– passion

2016-09-19 05:12:56 +00:00
Commented Sep 19, 2016 at 5:12 — passion
– passion, Commented Sep 19, 2016 at 5:12
console.log(o.f.bind(this)) , what is this ?

passion
– passion

2016-09-19 05:13:33 +00:00
Commented Sep 19, 2016 at 5:13 — passion
– passion, Commented Sep 19, 2016 at 5:13
I get NaN on o.f.bind(this)()

Andrew Li
– Andrew Li

2016-09-19 05:17:27 +00:00
Commented Sep 19, 2016 at 5:17 — Andrew Li
– Andrew Li, Commented Sep 19, 2016 at 5:17
it look like in console i had a window.a and window.b

santhosh
– santhosh

2016-09-19 05:22:24 +00:00
Commented Sep 19, 2016 at 5:22 — santhosh
– santhosh, Commented Sep 19, 2016 at 5:22

Rajaprabhu Aravindasamy · Accepted Answer · 2016-09-19 05:21:40Z

3

You are assigning an object reference to another one variable, not a copy.

var o = {a:10,b:20,f:function(){ return this.a + this.b; }};
var p = o; //Assigning the reference of o to p.

Hence it is behaving like that and this is how the language works.

When comes to your second question,

console.log(o.f.bind(o)()); // 5

This doesn't have any effect at all. You are not at all changing the this value of that function.

But the second line of code,

console.log(o.f.bind(this)()); // NaN

Changes the this value of that function to the this value of the context where the bind is being executed. For example, If you are executing it from window's context, this would be window, window.a will be undefined and window.b will also be undefined. So undefined + undefined will return NaN. Not 30 as you are saying.

edited Sep 19, 2016 at 5:21

answered Sep 19, 2016 at 5:10

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rayon Over a year ago

console.log() both the variables after assignment

santhosh Over a year ago

OMG i forgot completely, what about the second question about bind

Curtis Fenner · Accepted Answer · 2016-09-19 05:19:55Z

In the second block of code, o and p are the same object.

That is, p.a and o.a refer to the same value:

var o = {x: 5, f: function() {return this.x;}};
var p = o;
o.x = 10;
console.log(p.x) // 10

The results of your second block of code aren't related to this or bind.

.bind(newObject) makes a new function with the value of this "changed" to the specified newObject. (Aside: It usually doesn't make sense to use this outside of a method, because it will be defined as window [which also holds all global variables].)

For example, consider these objects:

var u = {x: 5, f: function() {return this.x;}};
var v = {x: 20};

If you want to "copy" the method from u to v, you could do this:

v.f = u.f.bind(v);

console.log(u.f()) // 5 // .bind() doesn't change the old function
console.log(v.f()) // 20

The Witness · Accepted Answer · 2016-09-19 05:13:34Z

1

p = o copies a reference, not creates a new object. Using a constructor function (with f() in prototype) or closure could be what you are looking for.

answered Sep 19, 2016 at 5:13

The Witness

9207 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript bind working with its instance

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related