Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arrow function nested this #36

Merged
merged 2 commits into from
Aug 9, 2016
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 7 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,15 +74,15 @@ A few things to keep in mind:

### 2. Arrow Functions

Arrow Functions are a short-hand notation for writing functions in ES6. The arrow function definition consists of a parameter list `( ... )`, followed by the `=>` marker and a function body.
Arrow functions are a short-hand notation for writing functions in ES6. The arrow function definition consists of a parameter list `( ... )`, followed by the `=>` marker and a function body.

```javascript
// Classical Function Expression
let addition = function(a, b) {
return a + b;
};

// Implementation with Arrow Function
// Implementation with arrow function
let addition = (a, b) => a + b;
```
Note that in the above example, the `addition` arrow function is implemented with "concise body" which does not need an explicit return statement.
Expand All @@ -103,7 +103,7 @@ console.log(breakfast); // ['apples', 'bananas', 'oranges']

Arrow functions don't just make the code shorter. They are closely related to `this` binding behavior.

Arrow functions behavior with `this` keyword varies from that of normal functions. Each function in JavaScript defines its own `this` context but Arrow functions capture the `this` value of the enclosing context. Check out the following code:
Arrow functions behavior with `this` keyword varies from that of normal functions. Each function in JavaScript defines its own `this` context but arrow functions capture the `this` value of the nearest enclosing context. Check out the following code:

```javascript
function Person() {
Expand Down Expand Up @@ -135,14 +135,16 @@ function Person() {
}
```

As mentioned above, Arrow functions capture the this value of the enclosing context, so the following code works as expected.
As mentioned above, arrow functions capture the this value of the nearest enclosing context, so the following code works as expected, even with nested arrow functions.

```javascript
function Person() {
this.age = 0;

setInterval(() => {
this.age++; // `this` properly refers to the person object
setTimeout(() => {
this.age++; // `this` properly refers to the person object
}, 1000);
}, 1000);
}

Expand Down