This question already has answers here:
Arrow Functions and This [duplicate]
(5 answers)
Self-references in object literals / initializers
(30 answers)
Closed 1 year ago.
I know arrow functions don't have its own 'this' and references its parents and thus I assumed it to be pointing to its parent's 'this' i.e. obj. Would really appreciate if someone could answer this.
var obj = {
fullname: 'Jack',
prop: {
fullname: 'John',
getFullname: () => {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname()); // undefined, as this is window not obj or prop
var test = obj.prop.getFullname;
console.log(test()); // undefined
Related
This question already has answers here:
How does the "this" keyword in Javascript act within an object literal? [duplicate]
(4 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 3 months ago.
My way of binding not working. please correct me.
const ob = {
name:'arif',
getName:() => {
console.log(this)
return this.name;
}
}
const x = ob.getName.bind(ob);
console.log(x()); //return the global name!!
Note:- Here even without binding your function will be taking this as ob only if you call it directly on object.
Arrow function do not have this, normal function do have
const ob = {
name:'arif',
getName: function(){
console.log(this)
return this.name;
}
}
const x = ob.getName.bind(ob);
console.log(x());
The Arrow function doesn't have an argument property of its own, the bind will fail with Arrow function.
instead, you can use normal function here:
const ob = {
name:'arif',
getName: function() {
console.log(this)
return this.name;
}
}
const x = ob.getName.bind(ob);
console.log(x()); //returns the object name !!
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 1 year ago.
let greetings = {
fullName : "elham zeinodini",
getFullName : () => {
return this.fullName;
},
Greet : message => console.log(`${message} ${this.getFullName()} !!`)
}
console.log(greetings.fullName);
greetings.Greet("Hello");
let greetings = {
fullName : "elham zeinodini",
getFullName() {
return this.fullName;
},
Greet(message) {
console.log(`${message} ${this.getFullName()} !!`)
}
}
console.log(greetings.fullName);
greetings.Greet("Hello");
It means, quite literally, that the property getFullName on the context this is not a function. You're trying to invoke something that isn't a function.
Why is that? Because you can't use this like you are to refer to the surrounding object using an arrow function. Depending on your environment, it might refer to the window object (in the browser). And the window object doesn't have a function called getFullName. So that property evaluates to undefined. Which isn't a function, hence the error.
Use a "regular" function declaration instead. getFullName: function() {...}
The issue is with your arrow functions, which don't allow you to capture the this context.
Rewrite as follows:
let greetings = {
fullName : "elham zeinodini",
getFullName() {
return this.fullName;
},
Greet(message){
console.log(`${message} ${this.getFullName()} !!`)
}
}
console.log(greetings.fullName);
greetings.Greet("Hello");
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Javascript: Do I need to put this.var for every variable in an object?
(6 answers)
Closed 1 year ago.
function createPerson() {
var name = "test1";
var test = {
"name": "test2",
"getName": function() {
return name;
}
};
return test;
}
Here when I tried, createPerson().getName() it returns test1 value of outer function instead of object variable value i.e., test2.
Why does this happen?
This question already has answers here:
Self-references in object literals / initializers
(30 answers)
Closed 2 years ago.
I have defined a function which returns object which has property and a method. using the returned object I am calling the method inside the object to get the value of the property in the object. but I didn't received what I expected.
function test(){
return {
a:'test property',
fn:()=>{
console.log('property', this.a);
}
}
}
const obj = test();
obj.fn() // what I expect is test property but I received undefined.
You have declared the function incorrectly. Remember that arrow functions do not have their own this like a regular function does.
You should declare it like this:
function test() {
return {
a: 'test property',
fn() {
console.log('property', this.a);
},
};
}
const obj = test();
obj.fn();
When you use a regular function this is scoped to how it is called. example
obj.fn()
obj is taken as your this
when you define using arrow function this is assigned on creation which points to the parent's context in your case its window
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
What does 'var that = this;' mean in JavaScript?
(6 answers)
Closed 4 years ago.
I'm following a tutorial on Javascript and ES6 and in the example below I get an error:
"TypeError: Cannot read property 'teamName' of undefined."
The tutor explains it as: "Whenever we pass an anonymous function somewhere in our code base, the value of this inside of that function is lost!" What does he mean by that? Shouldn't this hold the object making the call and wouldn't that mean team.teamName which would return Avengers here? I'm confused.
Also, how is the issue fixed when we use .bind(this)?
const team = {
members: ['Tony', 'Peter'],
teamName: 'Avengers',
teamSummary: function() {
return this.members.map(function(member) {
return `${member} is a member of ${this.teamName}`;
});
}
};
team.teamSummary();
Use arrow function (=>) like as shown below. They help in retaining the this that called the function.
const team = {
members: ['Tony', 'Peter'],
teamName: 'Avengers',
teamSummary: function() {
return this.members.map((member) => {
return `${member} is a member of ${this.teamName}`;
});
}
};
team.teamSummary();
Please read this blog for more fixes for the same solution