10

I'm start learning Vue.js and ECMA6 syntax, I saw this in the tutorial:

methods: {
  someMethod: function() { 
    console.log(this) // this works
  }
}

Then I thought the syntax could be:

methods: {
  someMethod: () => {
    console.log(this) // this undefined
  }
}

but this works:

methods: {
  someMethod () {
    console.log(this) // this works
  }
}

Can explain the difference and the ECMA5 syntax?

Jepser Bernardino
  • 1,331
  • 1
  • 12
  • 22
  • The third one is an ES6 shortcut for the first one. When you use the arrow syntax as in the second one, `this` is NOT set to be the host object. That's one of the features of the arrow syntax and thus it should not be used when you expect `this` to be set to the host object. – jfriend00 Jul 10 '16 at 21:52
  • The third one is a named shortcut for the first one: `someMethod: function someMethod() {}` and `someMethod() {}`. – dfsq Jul 10 '16 at 21:54
  • @jfriend00 yes I know but, which si the difference between the second and the third, or how is this in ECMA5 to understand better the difference – Jepser Bernardino Jul 10 '16 at 21:54
  • 1
    The second is very different due to lexical scope. – dfsq Jul 10 '16 at 21:55
  • possible duplicate of [How does this object method definition work without the “function” keyword?](http://stackoverflow.com/a/32404658/1048572) (and [no, you cannot mix that syntax with arrow functions](http://stackoverflow.com/q/35420148/1048572) as you did in the question title) – Bergi Jul 10 '16 at 22:14
  • 1
    Or if your question actually concerns the difference to the second snippet instead, it's a duplicate of [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](http://stackoverflow.com/q/34361379/1048572) – Bergi Jul 10 '16 at 22:16
  • Related: [What is the difference between func() => {} and func = () => {} in class?](https://stackoverflow.com/q/47348005/4642212). – Sebastian Simon Aug 04 '19 at 15:32

2 Answers2

8

Of your three options, only the first one is supported in ES5. The other two are additions in ES6.

The third option is an ES6 shortcut for the first option and thus they work identically in ES6.

When you use the arrow syntax as in the second one, this is NOT set to be the host object as it is in your first and third. That's one of the features of the arrow syntax and thus it should not be used when you expect this to be set to the host object. Instead, this will be set to the lexical context from where the code was defined - often referred to as "the value of this in the enclosing context" or the "lexical value of this" which in your case would be whatever this was when the host object was initially declared which apparently was undefined.

Here's a good reference article on arrow functions: ES6 In Depth: Arrow functions

jfriend00
  • 683,504
  • 96
  • 985
  • 979
1
  1. Object methods that has method someMethod. In this case this is a link to object methods.
  2. Object methods that has property someMethod that stores some anonymous function. In this function this is undefined because function is anonymous.
  3. Object methods has internal function someMethod. In this function this is link to methods, because it's internal named function (not anonymous or external) of this object.

Good luck!

+ Try this way

var methods1 = function() {
  var self = {
    someMethod: function() { 
      console.log(self);
    }
  };
  return self;
}();
    
var methods2 = function() {
  var self = {
    someMethod: () => { 
      console.log(self);
    }
  };
  return self;
}();

var methods3 = function() {
  function someOtherMethod() {
    console.log(self);
  }
  var self = {
    someMethod: function() { 
      someOtherMethod();
    }
  }
  return self;
}();

methods1.someMethod();
methods2.someMethod();
methods3.someMethod();
Leonid Zakharov
  • 940
  • 1
  • 6
  • 11
  • Describing **this** as a link to **methods** in cases 1 and 3 could use clarification `this` is set at run time to the object on which an ordinary (unbound "function") function is called, for example using calling code `methods.someFunc()`. However `this` could have a different or even undefined value if the function is called in another way. – traktor Jul 10 '16 at 23:56
  • I have specially simplified my explanation because I think that at this stage it's very difficult to understand all this things for OP. But I agree with you. – Leonid Zakharov Jul 11 '16 at 00:27