Q. What did I do wrong? A. You used new with an arrow function, and that’s not allowed. Q. Can I turn an arrow function into a constructor? A. Only by wrapping it in a normal function, which would be silly. You can’t turn an arrow function itself into a constructor. Q. Can you explain … Read more
It’s important to know that this syntax: class A { method = () => {} } is just syntactic sugar for creating an instance method in the class constructor: class A { constructor() { this.method = () => {} } } Note: This syntax is not an official part of the JavaScript language yet (currently … Read more
The problem is that the chrome debugger believes that the this in the source code refers to the run-time this, but this inside a arrow function in typescript source code is actually transformed to _this, so it’s showing you the wrong object. This is why it’s only a problem in the debugger and the code … Read more
First of all, let’s start with examples of each technique! But the difference is more related to JavaScript language itself. Binding: import React from ‘react’; class MyComponent extends React.Component { constructor(props) { super(props) this.clickHandler = this.clickHandler.bind(this); } clickHandler() { console.log( this ) } render() { return <button onClick={this.clickHandler}>Click Me</button> } } Arrow-function: import React from … Read more
If this is undefined within an arrow function, it’s undefined outside of the arrow as well. Arrow function simply capture the this of the surrounding scope. In this case, you’re declaring myOutsideFunction as a method on an object literal and never binding it or doing anything else that would call it with the object as … Read more
No difference in your specific example, but there is a very important difference between those two notations, specially when it comes to Vue.js: the this won’t reflect the vue instance in arrow functions. So if you ever have something like: export default { props: [‘stuffProp’], data: () => ({ myData: ‘someData’, myStuff: this.stuffProp }) } … Read more
I guess it was added inbetween then and now, because you can do it now using an interface or type (doesnt matter, same syntax except the keyword). Also works as export of course. The function has to be named though (i think all overloaded functions have to), so you’ll have to declare it first if … Read more
The parenthesis around input arguments (x in this case) are only required when there are two or more input arguments. With just one (as you’ve shown here), the two statements are identical. (x) => { return x * 2; } is the same as x => { return x * 2; } But, (x, y) … Read more
From the Arrow functions examples, (() => “foobar”)() // returns “foobar” So, the function invocation operator should be outside. (() => { //… })(); Sample: http://www.es6fiddle.net/hsb8s1sj/
Can I use ES6’s arrow function syntax with generators? You can’t. Sorry. According to MDN The function* statement (function keyword followed by an asterisk) defines a generator function. From a spec document (my emphasis): The function syntax is extended to add an optional * token: FunctionDeclaration: “function” “*”? Identifier “(” FormalParameterList? “)” “{” FunctionBody “}”