This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
When should I use arrow functions in ECMAScript 6?
(9 answers)
Closed 1 year ago.
I have such a situation in my NodeJS project:
//utility.js
module.exports = () => {
console.log(this.property1);
}
//main.js
const utilityFunc = require(./utility);
class MyClass {
constructor(name){
this.property1 = name;
}
foo(){
//...
utilityFunc();
}
}
const myObject = new MyClass('A name');
myObject.foo();
What I expect is to output 'A name', but property1 is not defined in the scope of this. This code seems to work if I write the function in main.js instead of importing it. I'm trying to figure out why this happens.
Related
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed last month.
Here I have a very simple class and I have a constructor inside of it and in constructor I am declaring a value donut_count but when I try to access that value in another function it says undefined why it is undefined:
class DonutMaker {
constructor() {
var donut_count = 1;
this.target = document.getElementById("donut_creater");
this.target.addEventListener("click", this.donutCreate);
}
donutCreate() {
console.log(this.donut_count);
}
}
let obj1 = new DonutMaker();
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
arrow function and this
(2 answers)
How to access the correct `this` inside a callback
(13 answers)
Closed 7 months ago.
I'm trying to create a helper function. This function needs to reach some variables & objects of the context/class in which it is used. But, I could not achieve to do this. Is it possible to write functions to use like this?
Example:
// ExampleClass.js
const { demoArrowFunc, demoNormalFunction } = require('./MyHelpers')
class ExampleClass {
exampleVar = "EXAMPLE VAR";
constructor() {
this.firstVar = 20
}
logClassVars() {
console.log(this.exampleVar, this.firstVar);
}
tryArrows() {
demoArrowFunc();
}
tryNormal() {
demoNormalFunction()
}
}
let example = new ExampleClass()
example.tryArrows() // Returns -> undefined undefined
example.tryNormal() // Returns -> undefined undefined
// Helpers.js
const demoArrowFunc = () => {
console.log(this.exampleVar, this.firstVar);
}
const demoNormalFunction = function() {
console.log(this.exampleVar, this.firstVar)
}
module.exports = {
demoArrowFunc,
demoNormalFunction
}
Feel free to ask questions if I'm not clear. Thanks!
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
ES6 arrow functions not working on the prototype?
(4 answers)
Closed 5 years ago.
I am facing some issue or may it something new comes with fat-arrow function while implementing prototype.
Here is the problem::
function baseClass() {
this.name = "Pankaj";
}
baseClass.prototype.fnGetName = function() {
return this.name;
};
baseClass.prototype.fatArrayGetName = () => {
return this.name;
};
var classObject = new baseClass();
Now when I try to retrieve name property of class using methods as:
classObject.name; // returns Pankaj
classObject.fnGetName() // returns Pankaj
classObject.fatArrayGetName() // returns "" (EMPTY STRING)
Just want to know why fatArrayGetName function return empty string where as it should return name property value.
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
How to access the correct `this` inside a callback
(13 answers)
Closed 5 years ago.
Im currently getting into es6 and want to use the class pattern.
But how come "this.hola" is undefined in "onResize()"?
class Ui {
constructor() {
this.win = $(window);
this.hola = 'hola';
this.init();
}
init() {
this.addListeners();
}
addListeners() {
this.win.on('resize load', this.onResize);
}
onResize() {
console.log(this.hola);
}
}
export default Ui;
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 5 years ago.
Let's say there is a Person:
const Person = function(fname, lname) {
this.fname = fname;
this.lname = lname;
};
And I want to extend its functionality with a "name" getter
Object.defineProperty(Person.prototype, 'name', {
get: () => `${this.fname} ${this.lname}`
});
However, this does not work. The this in the getter is not the instance prototype on which it is called:
const p = new Person('Taylor', 'Swift');
p.name // "undefined undefined"
Rather it is the scope of the property definition:
fname = 'Someone';
lname = 'Else';
p.name // "Someone Else"
In the process of writing this question, the answer was obvious. Still posting in case it helps someone else.
Getter properties are indeed bound to their host object.
The issue is that I was using an arrow function for the getter. The arrow function does not have its own this, instead using the this value of the enclosing execution context.
This means the binding done for getter properties has no effect.
For example:
const foo = () => this.document;
foo() // global document object
foo.call({document: 'na'}) // still global document object
const bar = foo.bind({document: 'na'});
bar(); // still global document object