This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
What does "this" refer to in arrow functions in ES6?
(10 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 1 year ago.
var cat = {
lives: 9,
jumps: () => {
console.log(this.lives)
}
}
I have heard that 'this' keyword in arrow function will point to the parent scope, so I have tried putting a variable with lives=9 in global object in node and this doesn't seems to work, am I missing something?
var lives=9
var cat = {
lives: 9,
jumps: () => {
console.log(this.lives)
}
}
Arrow functions have a lexical this which means that the value of this inside the function is the same as the value of this outside the function.
It does not mean that this points to an object containing all the variables from outside the function.
const anObject = {
aValue: "example value",
aMethod: function() {
console.log("aMethod", this.aValue);
const arrow = () => {
console.log("arrow", this.aValue);
}
arrow();
}
}
anObject.aMethod();
const copyOfAMethod = anObject.aMethod;
copyOfAMethod();
Because aMethod is called as a method on anObject, the value of this inside aMethod is anObject.
Because arrow is declared inside aMethod, the value of this is the same as it is for aMethod.
If the function is copied elsewhere so it has a different this value, then the arrow function created when the copy is called it will have the same different value.
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:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Closed 6 years ago.
Why isn't this inside of the setTimeout equal to the object that invoked the render function when using arrow functions?
class X {
constructor(config) {
this.data = config.data;
this.render_ = config.render;
}
render() {
this.render_(this.data);
}
}
var x = new X({
data: [1, 2, 3],
render: (data) => {
setTimeout(() => {
console.log(this);
}, 200);
}
});
x.render();
Read the part of the arrow function documentation that says "Arrow functions used as methods"
in summary: arrow functions just simply do not bind this or their own version of this, but rather references the global Window object.
Because arrow functions are lexically bound. That means they take on the value of "this" at the time of declaration. They are not affected by other means of modifying the this value, including being called as a method or functions like bind, apply and call.
function F() {
this.type = 'F';
this.logTypeExpression = function() {
console.log(this.type);
};
this.logTypeArrow = () => {
console.log(this.type);
};
}
function G() {
this.type = 'G';
}
var f = new F();
var g = new G();
f.logTypeExpression(); // F
f.logTypeArrow(); // F
// Now lets give these functions to G
g.logTypeExpression = f.logTypeExpression;
g.logTypeArrow = f.logTypeArrow;
g.logTypeExpression(); // G
g.logTypeArrow(); // F(!) (That's because `this` was assigned by the arrow function)
At the time that the arrow function is created, this isn't bound to any object, so it still refers to window. Maybe you want to try console.log(x); if you want to refer to that specific instance?
The code below only holds a reference to the function you created using an object literal syntax.
this.render_ = config.render;
Using bind(this) will tell the function to use the parameter object as the this reference when calling the function in the instance of your X object.
class X {
constructor(config) {
this.data = config.data;
this.render_ = config.render.bind(this);
}
render() {
this.render_(this.data);
}
}
Also, it does not matter if it's an arrow function or a regular function expression in your code snippet.
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 6 years ago.
I very confusing about the value of this at the moment of an invocation function using arrow functions. Let's take my example:
var obj = {
property: 5,
func1: function () {
console.log(this.property);
},
func2: () => {
console.log(this.property);
}
}
When i put this code on the browser console, an interesting thing happens, func1() will output 5 as expected *, but when i run func2 i got undefined. What is going on here? Why the value of this inside func2 makes reference to the global object(Window in this case).
I think i expect that output, because it is how it works, thats the reason why Alan and slevetman explains here and here respectively. But according to the Jason's explanation
Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope.
So, why the value of this inside func2 is not inheriting the value of his enclosing scope obj?
So, why the value of this inside func2 is not inheriting the value of his enclosing scope obj?
The obj here is not the "enclosing" scope. The scope that you are defining the obj in is the "enclosing" scope.
Consider this example:
var obj = {
property: 5,
func1: function () {
let func2 = () => {
console.log(this.property);
}
func2();
},
}
obj.func1(); // logs 5
obj.func1.call({
property: 6
}) // logs 6
When the inner func2 is called, the this keyword refers to the obj as this in the wrapper func1 function refers to the obj and the func2 inherits the this value. The inner arrow function does not bind it's own this value.
The this in func2 is inheriting the value of the scope of the function itself, no more. To make it work, you'll have to make something like that :
var obj = {
property: 5,
func1: function () {
console.log(this.property); // shows 5
},
func2: () => {
console.log(this.property); // shows undefined
this.property = 6;
console.log(this.property); // shows 6
}
}
This question already has answers here:
What does arrow function '() => {}' mean in Javascript? [duplicate]
(2 answers)
Closed 7 years ago.
The following code:
angular.module('socially').controller('PartiesListCtrl', function ($scope)
{
$scope.helpers({
parties: () => {
return Parties.find({});
}
});
});
demo at Angular Meteor Tutorial
Can't understand the syntax used for parties: object. Why is => used ? Is there more explanation for this kind of anonymous function.
This is an arrow function, new syntax from ES2015 standard which was accepted this year. Not only arrow functions are shorter in declaration and sometimes looks nicer, they also share binding context with their surrounding code
!function() {
this.name = 'global';
var nonArrowFunc = function() {
console.log(this.name); // undefined, because this is bind to nonArrowFunc
}
var arrowFunc = () => {
console.log(this.name); // this taken from outer scope
}
}();
You can read more about arrow functions here and here and here
This question already has answers here:
What does "this" refer to in arrow functions in ES6?
(10 answers)
Closed 7 years ago.
This code below should work as expected, and log "meow", here an example.
function Cat () {
this.animalNoise = 'meow'
}
Cat.prototype.sound = () => {
console.log(this.animalNoise)
}
let cat = new Cat()
cat.sound()
It doesn't work, this error appears TypeError: Cannot read property 'animalNoise' of undefined and when you convert the arrow function to an actual function declaration it works. It seems like with the arrow function, I no longer have access to this. What's going on here?
To be clear, the above code does not work where the following does, and I'm very curious why.
function Cat () {
this.animalNoise = 'meow'
}
Cat.prototype.sound = function() {
console.log(this.animalNoise)
}
let cat = new Cat()
cat.sound()
Arrow functions perform lexical binding and uses the surrounding scope as the scope of this. For example, imagine (for some weird reason) you define Cat inside of a Dog constructor.
function Dog() {
// do dog like things
function Cat() { ... }
Cat.prototype.sound = () => {
// this == instance of Dog!
};
}
So whatever the surrounding scope is becomes the scope of an arrow function.