原文:https://medium.freecodecamp.org/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881

-----------------------------------------------------------

Welcome to Part II of Learn ES6 The Dope Way, a series created to help you easily understand ES6 (ECMAScript 6)!

So, what the heck is => ?

You’ve probably seen these strange Egyptian-looking hieroglyphics symbols here and there, especially in someone else’s code, where you’re currently debugging a ‘this’ keyword issue. After an hour of tinkering, you’re now roaming the Google search bar and stalking Stack Overflow. Sound familiar?

Together, let’s cover three topics in Learn ES6 The Dope Way Part II:

  • How the ‘this’ keyword relates to =>.
  • How to migrate functions from ES5 to ES6.
  • Important quirks to be aware of when using =>.

Arrow Functions

Arrow functions were created to simplify function scope and make using the ‘this’ keyword much more straightforward. They utilize the => syntax, which looks like an arrow. Even though I don’t think it needs to go on a diet, people call it “the fat arrow” (and Ruby enthusiasts may know it better as the “hash rocket” ) — something to be aware of.

How the ‘this’ keyword relates to Arrow Functions

Before we dive deeper into ES6 arrow functions, it’s important to first have a clear picture of what ‘this’ binds to in ES5 code.

If the ‘this’ keyword were inside an object’s method (a function that belongs to an object), what would it refer to?

 
// Test it here: https://jsfiddle.net/maasha/x7wz1686/
var bunny = {
name: 'Usagi',
showName: function() {
alert(this.name);
}
}; bunny.showName(); // Usagi

  

Correct! It would refer to the object. We’ll get to why later on.

Now what about if the ‘this’ keyword were inside of method’s function?

 
// Test it here: https://jsfiddle.net/maasha/z65c1znn/
var bunny = {
name: 'Usagi',
tasks: ['transform', 'eat cake', 'blow kisses'],
showTasks: function() {
this.tasks.forEach(function(task) {
alert(this.name + " wants to " + task);
});
}
}; bunny.showTasks();
// [object Window] wants to transform
// [object Window] wants to eat cake
// [object Window] wants to blow kisses // please note, in jsfiddle the [object Window] is named 'result' within inner functions of methods.

  

What did you get? Wait, what happened to our bunny…?

 
 

Ah, did you think ‘this’ refers to the method’s inner function?

Perhaps the object itself?

You are wise to think so, yet it is not so. Allow me to teach you what the coding elders had once taught me:

Coding Elder: “Ah yes, the code is strong with this one. It is indeed practical to think that the ‘this’ keyword binds to the function but the truth is, ‘this’ has now fallen out of scope…It now belongs to…”, he pauses as if experiencing inner turmoil, “the window object.

That’s right. That’s exactly how it happened.

Why does ‘this’ bind to the window object? Because ‘this’, always references the owner of the function it is in, for this case — since it is now out of scope — the window/global object.

When it is inside of an object’s method — the function’s owner is the object. Thus the ‘this’ keyword is bound to the object. Yet when it is inside of a function, either stand alone or within another method, it will always refer to the window/global object.

 
// Test it here: https://jsfiddle.net/maasha/g278gjtn/
var standAloneFunc = function(){
alert(this);
} standAloneFunc(); // [object Window]

  

But why…?

This is known as a JavaScript quirk, meaning something that just happens within JavaScript that isn’t exactly straightforward and it doesn’t work the way you would think. This was also regarded by developers as a poor design choice, which they are now remedying with ES6's arrow functions.

Before we continue, it’s important to be aware of two clever ways programmers solve the ‘this’ problem within ES5 code, especially since you will continue to run into ES5 for awhile (not every browser has fully migrated to ES6 yet):

#1 Create a variable outside of the method’s inner function. Now the ‘forEach’ method gains access to ‘this’ and thus the object’s properties and their values. This is because ‘this’ is being stored in a variable while it is still within the scope of the object’s direct method ‘showTasks’.

 
// Test it here: https://jsfiddle.net/maasha/3mu5r6vg/
var bunny = {
name: 'Usagi',
tasks: ['transform', 'eat cake', 'blow kisses'],
showTasks: function() {
var _this = this;
this.tasks.forEach(function(task) {
alert(_this.name + " wants to " + task);
});
}
}; bunny.showTasks();
// Usagi wants to transform
// Usagi wants to eat cake
// Usagi wants to blow kisses

  

#2 Use bind to attach the ‘this’ keyword that refers to the method to the method’s inner function.

 
// Test it here: https://jsfiddle.net/maasha/u8ybgwd5/
var bunny = {
name: 'Usagi',
tasks: ['transform', 'eat cake', 'blow kisses'],
showTasks: function() {
this.tasks.forEach(function(task) {
alert(this.name + " wants to " + task);
}.bind(this));
}
}; bunny.showTasks();
// Usagi wants to transform
// Usagi wants to eat cake
// Usagi wants to blow kisses

  

And now introducing…Arrow functions! Dealing with ‘this’ issue has never been easier and more straightforward! The simple ES6 solution:

 
// Test it here: https://jsfiddle.net/maasha/che8m4c1/

var bunny = {
name: 'Usagi',
tasks: ['transform', 'eat cake', 'blow kisses'],
showTasks() {
this.tasks.forEach((task) => {
alert(this.name + " wants to " + task);
});
}
}; bunny.showTasks();
// Usagi wants to transform
// Usagi wants to eat cake
// Usagi wants to blow kisses

  

While in ES5 ‘this’ referred to the parent of the function, in ES6, arrow functions use lexical scoping — ‘this’ refers to it’s current surrounding scope and no further. Thus the inner function knew to bind to the inner function only, and not to the object’s method or the object itself.

Arrow functions and the ‘this’ keyword的更多相关文章

  1. 《理解 ES6》阅读整理:函数(Functions)(四)Arrow Functions

    箭头函数(Arrow Functions) 就像名字所说那样,箭头函数使用箭头(=>)来定义函数.与传统函数相比,箭头函数在多个地方表现不一样. 箭头函数语法(Arrow Function Sy ...

  2. JavaScript ES6 Arrow Functions(箭头函数)

    1. 介绍 第一眼看到ES6新增加的 arrow function 时,感觉非常像 lambda 表达式. 那么arrow function是干什么的呢?可以看作为匿名函数的简写方式. 如: var ...

  3. ES6 In Depth: Arrow functions

    Arrows <script language="javascript"> <!-- document.bgColor = "brown"; ...

  4. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  5. ES6 箭头函数(Arrow Functions)

    ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...

  6. arrow functions 箭头函数

    ES6里新增加的,与普通方法不同的地方 1.this 的对象在定义函数的时候确定了,而不是在使用的时候才决定 2.不可以使用 new  ,也就不能当构造函数 3.this 的值一旦确定无法修改     ...

  7. 箭头函数 Arrow Functions/////////////////////zzz

    箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: < ...

  8. ES6箭头函数(Arrow Functions)

    ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 1. 具有一个参数的简单函数 var single = a => a single('he ...

  9. 深入浅出ES6(七):箭头函数 Arrow Functions

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教 ...

随机推荐

  1. URAL 1962 In Chinese Restaurant 数学

    In Chinese Restaurant 题目连接: http://acm.hust.edu.cn/vjudge/contest/123332#problem/B Description When ...

  2. java ftp上载下传 遇到的问题

    1.下载文件中文乱码,和下载文件大小为0kb /** * Description: 从FTP服务器下载文件 * * @param url * FTP服务器hostname * @param port ...

  3. Boost StateChart实现状态机----秒表例程

    Boost 提供了状态机的实现接口,采用了CRTP技术实现,下面以秒表为例子实现一个状态机,这是一个官方的例子,也可以参考资料:Boost Statechart 庫,状态机的状态转换图如下所示: 实现 ...

  4. ROS知识(21)----ROS C++代码格式化

    这里提供两种方法. 第一种方法:clang_format 1.安装clang format sudo apt-get install -y clang-format-3.6 2.从github的ros ...

  5. 无线端安全登录与鉴权一之Kerberos

    无线端登录与鉴权是安全登录以及保证用户数据安全的第一步,也是最重要的一步.之前做过一个安全登录与鉴权的方案,借这个机会,系统的思考一下,与大家交流交流 先介绍一下TX系统使用的Kerberos方案,参 ...

  6. 手机浏览器跳转APP

    背景 对于APP来说,回流分享页是最好的最便宜的也是最病毒式的拉新方式.让新用户去下载APP是重要的.对老用户来说,可以直接调起APP也是提升用户体验和让用户有侵入式体验的重要手段.所以我们一起来看看 ...

  7. Jenkins官方教程地址入口

    https://jenkins.io/doc/book/ 其实Jenkins的核心在于插件,官方教程只能是基本简单的,所以要找教程最好对应插件来找.

  8. leetcode——169 Majority Element(数组中出现次数过半的元素)

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  9. Revit Family API 添加材质参数设置可见性

    start //添加类型 void AddType(FamilyManager familyMgr, string name, double w, double d) {     FamilyType ...

  10. [Winform]Media Player播放控制面板控制,单击事件截获

    摘要 在项目中有这样的一个需求,需要在一台宣传机器上循环播放一段视频,并在体验的用户单击鼠标左键的时候推出全屏,可以让用户体验电脑的其它功能. 解决方案 考虑到都是windows系统的,所以采用了wi ...