Javascript: Self and This
Clash Royale CLAN TAG#URR8PPP
Javascript: Self and This
Can anyone explain why do I get different values of self and this? Where self is a reference to this.
function Parent()
var self = this;
this.func = function()
// self.a is undefined
// this.a is 'Test'
console.log(self.a, this.a);
function Child(x)
this.a = x;
Child.prototype.__proto__ = new Parent;
var ch = new Child('Test');
ch.func();
I've been using self on project and it's my first time to have this issue.
ô the joy of javascript call context !
– benzonico
Feb 25 '13 at 9:32
In
func, it seems like self points to the Parent, but this points to the Child.– Blender
Feb 25 '13 at 9:33
func
self
Parent
this
Child
Thanks for the answers. This is why I like javascript, very different. Now I need to be more careful on nested callbacks.
– Kevin
Feb 25 '13 at 10:41
3 Answers
3
This is because self refers to an instance of Parent, but only instances of Child have an a property.
self
Parent
Child
a
function Parent()
var self = this; // this is an instance of Parent
this.func = function()
console.log(self.a, this.a);
function Child(x)
this.a = x; // Instances of Child have an `a` property
Child.prototype.__proto__ = new Parent;
var ch = new Child('Test');
ch.func(); // Method called in context of instance of Child
So when you call func on an instance of Child, this refers to that instance. That's why this.a gives you the correct value inside func.
func
Child
this
this.a
func
Within func, this refers to an instance of Child.
func
this
Child
Child.prototype.__proto__ = new Parent;
The prototype of Child is set to an instance of Parent. So when ch.func() is invoked, func() is on the prototype chain of Child, but is invoked in the context of ch which is an instance of Child
Child
Parent
ch.func()
func()
Child
ch
Child
self is still referring to the instance of Parent which does not have an attribute a
self
Parent
a
To further illustrate:
var p = new Parent();
// this.a is undefined because this is an instance of Parent
p.func(); // undefined undefined
var myObject =
foo: "bar",
func: function()
var self = this;
console.log("outer func1: this.foo = " + this.foo); //bar
console.log("outer func2: self.foo = " + self.foo); //bar
(function()
console.log("inner func3: this.foo = " + this.foo); //undefind
console.log("inner func4: self.foo = " + self.foo);//bar
());
;
myObject.func();
In the inner function, though, this no longer refers to myObject. As a result, this.foo is undefined in the inner function, whereas the reference to the local variable self remains in scope and is accessible there.
– Avinash Maurya
23 secs ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
self and this are no longer referring to the same object. The following link may be helpful : stackoverflow.com/questions/962033/…
– Chetter Hummin
Feb 25 '13 at 9:31