011-arrow-function-and-this-scope.html

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
	<script type="text/babel">
		//_this
		var person = {
			first: "Doug",
			actions: ['bike', 'hike', 'ski', 'surf'],
			printActions: function() {
				var _this= this;
				this.actions.forEach(function(action) {
					var str = _this.first + " likes to " + action;
					console.log(str);
				});
			}
		};
		person.printActions();


		//bind method
		/*
		var person = {
			first: "Doug",
			actions: ['bike', 'hike', 'ski', 'surf'],
			printActions: function() {
				this.actions.forEach(function(action) {
					var str = this.first + " likes to " + action;
					console.log(str);
				}.bind(this));
			}
		};
		person.printActions();
		*/

		//arrow function
		/*
		var person = {
			first: "Doug",
			actions: ['bike', 'hike', 'ski', 'surf'],
			printActions() {
				this.actions.forEach(action => {
					var str = this.first + " likes to " + action;
					console.log(str);
				});
			}
		};
		person.printActions();
		*/

	</script>
	<title>Arrow Functions and 'this'</title>
</head>
<body>
</body>	
</html>