This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 6 years ago.
var obj = {
name: 'hello',
getName: function(){
return () => {return this.name; }
}
}
var name = 'world';
var nameFunc = obj.getName();
console.log(nameFunc())
And the result is "hello",not "world".
I am a little confused.
Arrow functions are "born" bound to the value of this as it was at the time of their creation. When you make your call to getName():
var nameFunc = obj.getName();
then inside getName() the value of this is a reference to obj. Your return statement constructs the arrow function, and that function is therefore bound to obj. It's as if you'd written:
getName: function() {
return function() {
return this.name;
}.bind(this);
}
That's just the way arrow functions work, and yes it's different from regular functions.
Related
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 1 year ago.
function Pet(name) {
this.name = name;
this.getName = () => this.name;
}
const cat = new Pet('Fluffy');
const { getName } = cat;
console.log(getName());
In the code above, why does getName prints "Fluffy"? It is executed in the global context. Why does value of this still references Pet?
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 3 years ago.
this my code:
obj={
obj1:{
funcTest1a:function(){ console.log ("test _1a: ",this)},// this return obj1
funcTest1b:()=>console.log("test _1b: "+ this), // this return windows
obj2:{
funcTest2a:function(){ console.log ("test _2a: ",this)},// this return obj1
funcTest2b:()=>console.log("test _2b: "+ this), // this return windows
},
obj3:{
test3(){
console.log(this);
obj.obj1.obj2.funcTest2b()
},
}
}
}
I understand that if I call in the console :
obj.obj1.obj2.funcTest2b()
return window that is ok
but
If I call
obj.obj1.obj3.test3()
inside this function test3() I call
obj.obj1.obj2.funcTest2b()
in which case I expected "THIS" to be different.
a possible return from an arrow function a this that is not window or global?
> I find a solution o better an answer
this is an example of how to use arrow function where THIS is not a global
a = {
hello: 'hola',
b() {
return () => {
console.log(this.hello) //or this;
}
}
}
a.b()() // print hola
so in my code, I have to change:
funcTest2b:()=>console.log("test _2b: "+ this)
in
funcTest2b: function(){
let testInside=()=>console.log("test _2b: "+ this)
testInside()
}
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:
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
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 6 years ago.
I have two cases
const test = {
foo: function (){
this.bar();
},
bar: function (){
console.log('bar');
}
}
test.foo();
in this case, everything works correctly.
const test = {
foo: () => {
this.bar();
},
bar: () => {
console.log('bar');
}
}
test.foo();
In second case I get error:
Uncaught TypeError: Cannot read property 'bar' of undefined
I know I can wrote test.bar() in foo function, but I'm interested why this not available in arrow functions scope in this case.
Normally, the value of this in a function depends on how that function is called.
Arrow functions import the value of this from the scope in which the function was created.
In the middle of an object literal, the value of this will depend on what is around the object literal, but certainly won't be the object itself.