javascript初学者
上周,我以针对初学者的关键字this发表了这篇文章 。 该文章未涉及的主题之一是箭头功能。 该主题太大而无法在该博文中讨论,因此本文旨在弥补这一不足。 继续阅读以了解箭头功能的基础知识!
好处1:语法短
让我们看一下常规函数:
function funcName(params) { return params + 2; }
function funcName(params) { return params + 2; }
funcName(2); // 4
funcName(2); // 4
上面的代码指示创建箭头功能的两个原因之一: 语法较短。 完全相同的功能可以用只有一行代码的箭头功能表示:
var funcName = (params) => params + 2
funcName(2); // 4
funcName(2); // 4
很酷 这个例子显然是一个极端的简化,但希望能说明我的观点。 让我们更深入地看一下箭头函数的语法:
( parameters ) => { statements }
如果没有参数,则表示一个箭头函数,如下所示:
() => { statements }
当您只有一个参数时,左括号是可选的:
parameters => { statements }
最后,如果要返回表达式,请删除方括号:
parameters => expression
// is equivalent to:
function (parameters){ return expression; }
function (parameters){ return expression; }
好吧,您知道语法,示例如何? 打开您的Chrome开发者控制台(Windows:Ctrl + Shift + J)(Mac:Cmd + Option + J),然后键入以下内容:
var double = num => num * 2
如您所见,我们正在将变量double分配给箭头函数。 箭头函数具有一个参数num。 由于只有一个参数,因此省略了该参数的括号。 由于我们要返回num * 2的值,因此我们也省略了要返回的表达式的方括号。 让我们调用该函数并查看其作用:
double(2); // 4
double(2); // 4
double(3); // 6
double(3); // 6
好处2:无约束力
在继续之前,您应该对关键字 this及其工作原理 有很好的了解 。 如果您想学习或需要复习,请先阅读 我 关于该主题的 文章 ,然后再继续。
与常规函数不同,箭头函数不会对此进行绑定。 相反,这是按词法绑定的(即,其含义与其原始上下文保持一致)。
一个例子应该使这一点更清楚。 在您的控制台中,创建一个构造函数,然后创建一个实例:
function Counter() { this.num = 0; }
function Counter() { this.num = 0; }
var a = new Counter();
您应该从我的上一篇文章中知道,通过构造函数,此值绑定到要创建的新对象,在本例中为a对象。 这就是为什么我们可以console.log a.num并得到0
console.log(a.num); // 0
如果我们想每秒增加a.num的值怎么办? 我们可以使用setTimeout()函数。 setTimeout()是在设置的毫秒数后调用另一个函数的函数。 让我们将其添加到我们的Counter函数中:
function Counter() { this.num = 0;
this.timer = setInterval(function add() { this.num++; console.log(this.num); }, 1000); }
代码看起来与以前相同,除了我们添加了变量this.timer并将其设置为等于setInterval函数。 代码将每1000毫秒(一秒钟)运行一次。 this.num将增加1,然后将其记录到控制台。 让我们尝试一下。 在控制台中,再次创建一个Counter实例:
var b = new Counter(); // NaN // NaN // NaN // ...
如您所见,该功能将每秒登录一次屏幕。 但是结果不是我们期望的。 NaN(非数字)正在被记录。 那么,出了什么问题? 首先是第一件事,通过运行以下命令停止令人讨厌的时间间隔:
clearInterval(b.timer);
让我们备份。 我们没有在已声明的对象上调用setInterval函数。 也不会使用new关键字来调用它(仅使用Counter()函数)。 最后,我们不使用调用,绑定或应用。 setInterval只是一个正常功能。 实际上,setIntervalis中this的值绑定到了全局对象! 让我们通过记录其值来检验该理论:
function Counter() { this.num = 0;
this.timer = setInterval(function add() { console.log(this); }, 1000); }
this.timer = setInterval(function add() { console.log(this); }, 1000); }
var b = new Counter();
如您所见,窗口对象每秒注销一次。 通过运行清除间隔:
clearInterval(b.timer);
回到我们原来的功能。 它正在记录NaN,因为this.num引用窗口对象(不存在的window.num)上的num属性,而不是我们刚刚创建的b对象(b.num)。
那么我们该如何解决呢? 具有箭头功能! 我们需要一个不绑定此函数的函数。 使用箭头功能,此绑定从上下文保留其原始绑定。 让我们采用原始的Counter函数,并用箭头函数替换setInterval。
function Counter() { this.num = 0;
this.timer = setInterval(() => { this.num++; console.log(this.num); }, 1000); }
this.timer = setInterval(() => { this.num++; console.log(this.num); }, 1000); }
var b = new Counter(); // 1 // 2 // 3 // ...
var b = new Counter(); // 1 // 2 // 3 // ...
如您所见,控制台开始记录越来越多的数字-它起作用了! 保留由Counter构造函数创建的原始此绑定。 在setInterval函数内部,这仍然绑定到我们新创建的b对象!
您可以使用以下方法清除间隔:
clearInterval(b.timer);
为了证明概念,我们可以再次尝试从箭头函数中记录此内容。 我们将在Counter函数中创建一个名为that的变量。 如果setInterval函数中this的值等于父Counter函数中this的值(通过that),我们将注销true:
function Counter() { var that = this;
this.timer = setInterval(() => { console.log(this === that); }, 1000); }
this.timer = setInterval(() => { console.log(this === that); }, 1000); }
var b = new Counter(); // true // true // ...
var b = new Counter(); // true // true // ...
不出所料,我们每次都记录为真! 再次使用以下方法清除间隔:
clearInterval(b.timer);
结论
希望本文能帮助您看到箭头功能的两个主要优点:
- 较短的语法
- 没有约束力
作为免责声明,箭头功能比本文介绍的功能更多。 但这应该为您提供丰富的知识基础,以供进一步学习! 与往常一样,如果您有关于此主题的大量资源供他人探索,请发表评论。
❤如果这个帖子有帮助,请打动一下! 并且不要忘记查看我最近的其他文章:
- JavaScript:初学者的关键字
- JavaScript:初学者正则表达式
- 100多种免费资源来学习完整的Web开发
- 当您准备好真正深入进行Web开发时-5个学习Full Stack Web开发的最佳Udemy课程
翻译自: https://hackernoon.com/javascript-arrow-functions-for-beginners-926947fc0cdc
javascript初学者