export default {
one: () => {
//some codes
},
two: () => {
//some codes
one(); // error
this.one(); // error
}
}
I have module like that, and I want to call function one() inside function two().
But I got error like this : TypeError: Cannot read property 'one' of undefined.
How can I fix it? I want to know the cause.
What about extracting them out into separate functions and then include them in the export?
const one = () => {
//some codes
};
const two = () => {
//some codes
one();
};
export default {
one,
two
}
You shouldn´t use arrows function if you want to give a new context to the this keyword.
Look this example, it uses an arrow function in the two method. It would return error since the this keyword is not related to the object, but mantains the context from the last function.
let obj = {
one: function() {
console.log("one");
},
two: () => { // Arrow function
this.one();
}
}
obj.two();
If you use a normal function, the this keyword would be related to the object:
let obj = {
one: function() {
console.log("one");
},
two: function() { // Normal function
this.one();
}
}
obj.two();
This is the main difference between arrow functions and normal functions
Related
I want to call all functions that are located within object.
const data = {
fruits: funcA(),
vegetables: funcB(),
bread: funcC(),
}
Result I want to get is:
firstFunc();
dispatch(funcA());
dispatch(funcB());
dispatch(funcC());
someMoreFunctions();
My code is:
firstFunc();
// I need to somehow execute here all functions from object just like in example above
someMoreFunctions();
I realised it's worth mentioning that I want to pass those functions to child component that will execute them once clicked on:
<Component onClick={()=>{
firstFunc();
// I need to somehow execute here all functions from object just like in example above
someMoreFunctions();
}}
You can iterate through each value of the object, and, if it is a function, call it:
const data = {
fruits: () => console.log('some fruits'),
vegetables: function B() { console.log('more vegetables') },
bread: (function () { return () => console.log('less bread') })(),
pasta: 'No'
}
Object.values(data).forEach(v => typeof(v) == 'function' ? v() : null)
Defining the function:
const object = {
function: () => console.log("You can use functions like this!"),
anotherFunction: log()
}
function log (){
console.log("Yet another way of doing this 😎");
}
Calling the Function:
object.function;
object.anotherFunction;
Remember that when calling the function you shouldn't use the parenthesis
I want to access a function which is outside my base object, but if we console.log(this) inside loadAll function then it will give the context inside object. If I console.log(this) any normal function i.e without action or getter/setters it will give context of whole class which I want to achieve
base = observable({
isDeleting: false,
registry: observable.map(),
get all() {
return this.registry.values();
},
loadAll:action.bound(function () {
console.log(this);
this.request()
}),
});
request = () => {
console.log('hello');
}
In The above example this will throw an error because it can't access the request function but I wan to find a way to access it.
base = observable({
isDeleting: false,
registry: observable.map(),
get all() {
return this.registry.values();
},
loadAll:action.bound(function () {
console.log(this);
this.request()
}),
request: () => {
console.log(this) //This will give context of all the function outside object that is what I want in above example.
console.log('hello');
},
});
I have some code like this in a file helperFunctions.js:
exports helperFunctions = () => {
const functionA = async(args) => {
console.log(args);
};
const functionB = async(args) => {
functionA(myArg);
};
}
How can I call functionA and functionB from a separate file altogether, say, main.js?
I've tried:
import { helperFunctions } from './helperFunctions';
//...some code
helperFunctions.functionA('hello');
// OR
functionA('hello');
The specific error is:
TypeError: _helperFunctions.helperFunctions.functionA is not a function
and when trying the second solution, it's:
ReferenceError: functionA is not defined
I'm trying to avoid importing literally every single function I'm using (by way of exporting every single function I'm using). I'd like to do something like helperFunctions.function for the functions I need.
It really need to be a function? You could export an Object:
// helperFunctions.js
let helperFunctions = {
functionA: async (args) => {
console.log(args);
},
functionB: async (args) => {
functionA(myArg);
}
}
exports helperFunctions;
I've got a little problem occurring with super and functions overriding the parent ones.
A simplified example of my problem is the following, having 2 files:
FileA.js
constructor () {
...
}
myFunction = () => {
...
}
FileB.js
class FileB extends FileA {
constructor () {
...
}
myFunction = () => {
if () {
// do something
} else {
super.myFunction()
}
}
render () {
return <button onClick={() => this.myFunction()}
}
}
First of all, if the else condition is invoked from FileB.js, an error is launched:
TypeError: (intermediate value).myFunction is not a function
But if I make the myFunction of FileB.js a non-arrow function, this one is never fired, and instead is fired the one from FileA.js.
Why is this happening and how to solve it?
I am trying to run a method called query() when a component property called q in Vue.js is modified.
This fails because this.query() is undefined. This is referring to my component's instance but somehow does not contain the methods.
Here's the relevant code part where I'm trying to watch the component property q and run the query() function:
methods: {
async query() {
const url = `https://example.com`;
const results = await axios({
url,
method: 'GET',
});
this.results = results.items;
},
debouncedQuery: _.debounce(() => { this.query(); }, 300),
},
watch: {
q() {
this.debouncedQuery();
},
},
Error:
TypeError: _this2.query is not a function
If I write the debounce() call as below, the TypeError: expected a function error appears even earlier, at the page load.
debouncedQuery: _.debounce(this.query, 300),
The issue comes from the lexical scope of the arrow function you define within _.debounce. this is bound to the object you are defining it in, not the instantiated Vue instance.
If you switch out your arrow function for a regular function the scope is bound correctly:
methods: {
// ...
debouncedQuery: _.debounce(function () { this.query(); }, 300)
}
We can do it by plain JS (ES6) with few lines of code:
function update() {
if(typeof window.LIT !== 'undefined') {
clearTimeout(window.LIT);
}
window.LIT = setTimeout(() => {
// do something...
}, 1000);
}
As answered in another post This is undefined in Vue, using debounce method the best way to add debouncing IMO is to create the method normally in methods as eg:
setHover() {
if (this.hoverStatus === 'entered') {
this.hoverStatus = 'active'
}
},
But then replace it in your created block eg:
created() {
this.setHover = debounce(this.setHover, 250)
},