This question already has answers here:
Can you bind 'this' in an arrow function?
(14 answers)
Closed 2 years ago.
using the bind documentation, if i replace the object (defined as module in their example), with an es6 class instance, it does not bind.
here are the docs...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
and here is my code...
class Foo {}
let foo = new Foo()
let fooVar = 'foo var'
let fooFunc = () => {
return this.var
}
foo['var'] = fooVar
fooFunc.bind(foo)
foo['func'] = fooFunc
// i expected this to return 'foo var', but instead get 'undefined'
foo.func()
how can i essentially add an instance method to an existing instance, and have it bind properly?
If you read the documentation about arrow function you will see that:
Does not have its own bindings to this or super, and should not be used as methods.
Therefore you cant bind a new this if it doesnt have one
Related
This question already has answers here:
Losing "this" context in JavaScript when passing around members [duplicate]
(3 answers)
What is a good way to automatically bind JS class methods?
(5 answers)
Closed 4 months ago.
Note: I do not want to re-bind the this keyword. I would like for this to reference the calling object. I would, however, also like to be able to reference the instance of the class in which my method is defined. How can I access the instance?
In JavaScript, the this keyword refers to the calling object. So, when I define a class:
class A {
x = 5;
printx() {
console.log(this.x);
}
}
Then when I call the printx method directly from an instance of A, I get 5:
a = new A();
a.printx();
But when I call printx from a different context, this.x isn't a.x, it might be window.x or something else:
b = a.printx;
b(); // TypeError: this is undefined
I want to define printx in such a way that calling b will console.log(5). I.e., I want to get the self behavior from Python. How do I refer to self in JavaScript?
Use function.prototype.bind to bind the function to the context when you assign b
class A {
x = 5;
printx() {
console.log(this.x);
}
}
let a = new A()
let b = a.printx.bind(a)
b()
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
How do JavaScript closures work?
(86 answers)
Closed 8 months ago.
Consider the following constructor function having a method logging the context
function Foo() {
this.logContext1 = () => console.log('logContext1', this);
}
let foo = new Foo();
foo.logContext2 = () => console.log('logContext2', this);
foo.logContext1();
foo.logContext2();
logContext1 has context (this) set to the Foo object created by new,
whereas logContext2 has context (this) set to the window object
Considering both are arrow functions, why do we see this difference?
this is defined where the arrow functions are declared:
() => console.log('logContext1', this) is declared in the constructor, this is the object being created in that context
() => console.log('logContext2', this) is declared on top-level, this is window in that context (or undefined in strict mode)
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 3 years ago.
I created an Object called Survey and added a prototype function to it, and when I console log this inside the prototype function the log shows window object instead of parent Survey Object.
function Survey(questions = []) {
this.__questions__ = questions;
};
Survey.prototype.testFunction = () => {
console.log(this);
return this.__questions__;
}
// Create your object here
const SUR = new Survey(['1','2']);
SUR.testFunction(); // this prints [[Window]] Object instead of Survey
Expected result would be Survey object
It is because you used an Arrow function.
In arrow function, this will be reference to outside. Just use a normal function instead.
Survey.prototype.testFunction = function() {
console.log(this);
return this.__questions__;
}
The problem is over here:
Survey.prototype.testFunction = () => {}
Arrow functions don't have a this-context and it will use the this-context from outside of the method. Since no other this-context is defined, it will be the window object.
The fix is very easy: use a regular function:
Survey.prototype.testFunction = function () {}
This question already has answers here:
Why JavaScript function declaration (and expression)?
(5 answers)
Closed 8 years ago.
I'm assigning a named function expression to a property of an object:
var foo = {};
foo.bar = function bar(){
console.log('bar');
};
foo.bar() => bar
bar() => ReferenceError: bar is not defined
Why can't I call bar() directly, why isn't it defined?
I know that I can simply chain the assignment like var bar = foo.bar = function(){}, so I'm not looking for a work-around or other solution, I'm only interested in why it doesn't work.
I've tested in Chrome console and Node.JS.
Named function expressions are simply not supposed to work that way. The function name is only visible inside the function, not outside.
A function instantiation expression that happens to have a name is not the same thing as a function declaration statement. Those are two distinct syntactic (and semantic) entities in the language.
This question already has answers here:
What does 'var that = this;' mean in JavaScript?
(6 answers)
Closed 10 years ago.
I have few javascript that has used the keyword "that" extensively.
I see a lot of posts talking about the javascript keyword "this".
I wanted to understand the meaning of this key word in javascript context and it's visibility/scope.
Something like
that.someFunctionaName(someParameter)
What does it mean?
I understand the keyword "this" always points to the owner of the current object.
that is not a keyword in JavaScript. I suspect the code that you have is using something in the class to define an instance of itself. For example:
function myClass()
{
var that = this;
}
By doing this, you can ensure you're referencing the object, and not another element. For example, consider the following sample:
function myClass()
{
var that = this;
$('.myele').click(function() {
// 'this' refers to the element that was clicked.
// 'that' still refers to the myClass() object.
});
}