The "this" keyword has long been a source of confusion, and new features added to JavaScript in recent years have muddled the picture even more. This talk will walk you through the details of how "this" works in the context of modern JavaScript. We'll cover the differences between function declarations, function expressions, arrow functions, object-shorthand function notation, and class fields, as well as best practices when integrating with other ES2015+ goodies.

1. Understanding Functions and “this” in
the World of ES2017+
Bryan Hughes, Ph.D.
Microsoft
@nebrius
https://aka.ms/nebrius-svcc18-this

2. The Basics

3. aka.ms/nebrius-svcc18-this
Function Declarations
function myFunction() {
console.log(this === global); // Prints "true"
}
myFunction();

4. aka.ms/nebrius-svcc18-this
Functions and Objects
var myObject = {
myFunction: function() {
console.log(this === myObject); // Prints "true"
}
};
myObject.myFunction();

5. aka.ms/nebrius-svcc18-this
Aliasing Functions
var myObject = {
myFunction: function() {
console.log(this === myObject); // Prints "false"
}
};
var myFunction = myObject.myFunction;
myFunction();

6. aka.ms/nebrius-svcc18-this
If called in the form obj.func() “this”
=== “obj’
else
“this” === “global/undefined”

7. aka.ms/nebrius-svcc18-this
Nested Functions
var myObject = {
myFunction: function() {
console.log(this === myObject); // Prints "true"
setTimeout(function() {
console.log(this === myObject); // Prints "false"
console.log(this === global); // Prints "true"
}, 0);
}
};
myObject.myFunction();

8. aka.ms/nebrius-svcc18-this
Function Expressions vs. Declarations
function myFunctionDeclaration() {}
var myFunctionExpression = function() {};

9. aka.ms/nebrius-svcc18-this
Function Declarations and Hoisting
myFunction(); // Prints "hi"
function myFunction() {
console.log('hi');
}

10. aka.ms/nebrius-svcc18-this
Function Expressions and Hoisting
myFunction(); // TypeError: "undefined" is not a function
var myFunction = function() {
console.log('hi');
};

11. aka.ms/nebrius-svcc18-this
Named Function Expressions
var myFunction = function myOtherFunction(recurse) {
if (recurse) {
myFunction(false); // OK
myOtherFunction(false); // OK
}
};
myFunction(true); // OK
myOtherFunction(true); // ReferenceError

12. aka.ms/nebrius-svcc18-this
call, apply, and bind:
manually setting “this”

13. aka.ms/nebrius-svcc18-this
Using .call()
var myObject = {
myFunction: function(a, b) {
console.log(a + ' ' + b); // Prints "hello world"
console.log(this === myObject); // Prints "false"
console.log(this === myOtherObject); // Prints "true"
}
};
var myOtherObject = {};
myObject.myFunction.call(myOtherObject, 'hello', 'world');

14. aka.ms/nebrius-svcc18-this
Using .apply()
var myObject = {
myFunction: function(a, b) {
console.log(a + ' ' + b); // Prints "hello world"
console.log(this === myObject); // Prints "false"
console.log(this === myOtherObject); // Prints "true"
}
};
var myOtherObject = {};
myObject.myFunction.apply(myOtherObject, [ 'hello', 'world' ]);

15. aka.ms/nebrius-svcc18-this
Using .bind()
var myObject = {
myFunction: function(a, b) {
console.log(a + ' ' + b); // Prints "hello world"
console.log(this === myObject); // Prints "false"
console.log(this === myOtherObject); // Prints "true"
}
};
var myOtherObject = {};
var myFunction = myObject.myFunction.bind(myOtherObject);
myFunction('hello', 'world');

16. The New Additions

17. aka.ms/nebrius-svcc18-this
Object Shorthand Notation
const myObject = {
myFunction() {
console.log(this === myObject);
}
};
myObject.myFunction(); // Prints "true"
const myFunction = myObject.myFunction;
myFunction(); // Prints "false"

18. aka.ms/nebrius-svcc18-this
Arrow Functions
const myFunction = () => {
console.log(this === global); // Prints "true"
};
myFunction();

19. aka.ms/nebrius-svcc18-this
const myObject = {
myFunction() {
console.log(this === myObject); // Prints "true"
setTimeout(() => {
console.log(this === myObject); // Prints "true"
console.log(this === global); // Prints "false"
}, 0);
}
};
myObject.myFunction();

20. aka.ms/nebrius-svcc18-this
Arrow Functions and .call()
const myObject = {};
const myFunction = () => {
console.log(this === myObject);
};
myFunction(); // Prints "false"
myFunction.call(myObject); // Prints "false"

21. Let’s Talk React

22. aka.ms/nebrius-svcc18-this
The Broken Way
class MyComponent extends React.Component {
onClick() {
console.log(this instanceof MyComponent); // Prints "false"
}
render() {
return (
<button onClick={this.onClick}>Click Me!</button>
);
}
}

23. aka.ms/nebrius-svcc18-this
The Not Broken Way
class MyComponent extends React.Component {
onClick() {
console.log(this instanceof MyComponent); // Prints "true"
}
render() {
return (
<button onClick={() => this.onClick()}>Click Me!</button>
);
}
}

24. aka.ms/nebrius-svcc18-this
The Proper Way
class MyComponent extends React.Component {
constructor() {
super();
this.onClick = this.onClick.bind(this);
}
onClick() {
console.log(this instanceof MyComponent); // Prints "true"
}
render() {
return (
<button onClick={this.onClick}>Click Me!</button>
);
}
}

25. The Future

26. aka.ms/nebrius-svcc18-this
Instance Properties in ES2017
class MyClass {
constructor() {
this.myProperty = 10;
}
}
const myInstance = new MyClass();
console.log(myInstance.myProperty); // Prints "10"

27. aka.ms/nebrius-svcc18-this
Class Field Declarations (Stage 3)
class MyClass {
myProperty = 10;
}
const myInstance = new MyClass();
console.log(myInstance.myProperty); // Prints "10"
https://github.com/tc39/proposal-class-fields

28. aka.ms/nebrius-svcc18-this
Arrow Function Class Field
class MyClass {
myFunction = () => {
console.log(this instanceof MyClass); // Prints "true"
};
}
const myInstance = new MyClass();
const myFunction = myInstance.myFunction;
myFunction();

29. aka.ms/nebrius-svcc18-this
Class Field Arrow Functions and React
class MyComponent extends React.Component {
onClick = () => {
console.log(this instanceof MyComponent); // Prints "true"
}
render() {
return (
<button onClick={this.onClick}>Click Me!</button>
);
}
}

30. An Evolving Language

31. Thank You