This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Can you bind 'this' in an arrow function?
(14 answers)
Closed 2 years ago.
I have defined a JS class:
class Animation{
constructor(name, el, func){
this.name = name;
this.target = el;
this.animate = func.bind(this, this.target);
this.running = true;
}
// more methods here controlling animations
}
When creating an Animation object, I would like to have this behaviour:
... new Animation("animation", objToOperateOn, (target) => {
doStuff();
this.anAnimationMethod() // causes error because this is undefined
});
How can i get the anonymous function given as an argument to the constructor to have a refrence to the Animation object in the this keyword? The bind method that I'm using in the constructor doesn't seem to work, as logging this on the arrow function returns undefined.
PS. The target argument would be useless given we have a refrence to this, i just got it there for testing purposes.
Thanks for your time.
Related
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 9 months ago.
I want to modify the HTMLElement prototype to have a custom function in an instance of HTMLELement. I need for that function to be able to access the HTMLElement Instance's properties like the tagName. The problem is that inside the custom prototype function this points to the Window object instead of the HTMLElement instance. How can I achieve this?
HTMLElement.prototype.doSomething = () => {
console.log(this)
// Here I need to do something like console.log(this.tagName)
}
let elem = document.createElement('div')
elem.doSomething()
// -> Window Object, instead of HTMLElement Instance object.
Thank you
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
I have a simple class named B which have a basic property. I have a prototype method named print which will print that Class property. Now everything works fine if i use normal function syntax. I want to use arrow function syntax for my prototype am already aware of that this inside arrow function will refer to global(window) object. I want this to bind my Class. Is there any way how can i achieve it?
class B {
constructor() {
this.name ="kannan";
}
}
B.prototype.print = function(){
console.log(this);
console.log(this.name);
}
let name = new B();
name.print() //Prints my name and works correctly
However, if I try with arrow syntax
B.prototype.print = () => {
console.log(this);
console.log(this.name);
}
name.print() //prints this as a global window object
How can I achieve to print my name with arrow syntax?
Im not 100% sure but normal function syntax takes its context from where it is run. Arrow syntax takes its context from where it is initialized.
try setting the proto inside the constructor and it should print 'this' as your instance of your class.
alternative:
write print as a function of the class and you should not have the problem at all.
I dont think using prototype on a class is pretty when working with an instance of this class.
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 4 years ago.
i have this object literal
let p = {
name : 'Amir',
say: () => {
console.log(this.name)
console.log(this)
}
}
and I want the say function works using this
p.say();
but the arrow function obviously gets the window object as 'this'. I know I could use a regular function for 'say' instead of arrow and it will work fine.
BUT
I would like to ONLY change the call to say function to make it work, but the binding won't work.
I mean something like p.say.bind(p)() or p.say.call(p) aint gonna work as desired.
Is it possible to change the call to function ONLY and not the say function?
This question already has answers here:
How to use arrow functions (public class fields) as class methods?
(4 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 1 year ago.
It just occured to me that:
class Jamie {
method function(){
.... //Is a method
}
notAMethod = () => {
....//Is not a method?
}
}
I am clearly confused in the matter, but why can't I use arrow functions and maintain the context of this = Jamie? Instead of using bind to keep context?
You can use the constructor function and this keyword to assign those methods and have the right this working without any binds.
class Jamie {
constructor () {
this.getContext = () => {
console.log(this) // returns Jamie
}
}
}
new Jamie().getContext()
In the example above, getContext will return Jamie class as it's this.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 6 years ago.
I have a simple prototypal inheritance constructor, which I'm using arrow functions for.
app.Node = function (name, type) {
this.name = name;
this.type = type;
this.children = [];
}
app.Node.prototype = {
addChild: (child)=>{
child._parent = this;
this.children.push(child);
},
removeChild: (child)=>{
this.children.forEach((item, i) => {
if (item === child) {
this.removeChildAtIndex(i);
}
});
},
}
However, due to the nature of this and arrow functions, the value of this is undefined within the prototype methods above. So am I able to use arrow functions in this way? I can't figure out what I'd need to change, other than to use normal function functions.
So am I able to use arrow functions in this way?
No. Arrow functions capture the value of this from when they are declared.
I can't figure out what I'd need to change, other than to use normal function functions.
Do that. Use the right tool for the job.