在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意!

如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/学习。


ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

更简洁的语法

我们先来按常规语法定义函数:

function (x) {
return x * x;
}

该函数使用箭头函数可以使用仅仅一行代码搞定!

x => x * x

箭头函数相当于匿名函数,并且简化了函数定义。

箭头函数有两种格式:

  • 一种像上面的,只包含一个表达式,连{ ... }return都省略掉了。
  • 还有一种可以包含多条语句,这时候就不能省略{ ... }return。
x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}

我们可以看一下箭头函数的语法规则:

(parameters) => { statements }

本文上面的例子中,函数有一个参数。如果函数有多个参数或者没有参数,可按照下面写法:

如果返回值仅仅只有一个表达式(expression), 还可以省略大括号。

// 无参数:
() => 3.14 //一个参数
//如果只有一个参数,可以省略括号:
x=>x*x // 两个参数:
(x, y) => x * x + y * y // 可变参数:
(x, y, ...rest) => {
var i, sum = x + y;
for (i=0; i<rest.length; i++) {
sum += rest[i];
}
return sum;
}

注意:如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:

// SyntaxError:
x => { foo: x }

因为和函数体的 { ... } 有语法冲突,所以要改为:

// ok:
x => ({ foo: x })

没有局部this的绑定

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。箭头函数不会绑定this。 或则说箭头函数不会改变this本来的绑定。

举个例子说明:

function Counter() {
this.num = 0;
}
var a = new Counter();
 console.log(a.num);// 0

因为使用了关键字 new 构造,Count()函数中的 this 绑定到一个新的对象,并且赋值给a。通过 console.log 打印 a.num,会输出0。

如果我们想每过一秒将 a.num 的值加1,该如何实现呢?可以使用 setInterval() 函数。

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;
console.log(this.num);
}, 1000);
} var b = new Counter();
// NaN
// NaN
// NaN
// ...

每隔一秒都会有一个NaN打印出来,而不是累加的数字。

原因:首先函数 setInterval 没有被某个声明的对象调用,也没有使用 new 关键字,再之没有使用 bind ,  call 和 apply 。 setInterval 只是一个普通的函数。实际上 setInterval 里面的 this 绑定到全局对象的。

之所以打印 NaN ,是因为 this.num 绑定到 window 对象的 num ,而 window.num 未定义。

解决办法:使用箭头函数!使用箭头函数就不会导致 this 被绑定到全局对象。

function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
//
//
//
// ...

通过 Counter 构造函数绑定的 this 将会被保留。在 setInterval 函数中, this 依然指向我们新创建的b对象。

再举个例子:

由于JavaScript函数对 this 绑定的错误处理,下面的例子无法得到预期结果:

var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; //
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};

现在,箭头函数完全修复了 this 的指向, this 总是指向词法作用域,也就是外层调用者 obj :

var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; //
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); //

如果使用箭头函数,以前的那种hack写法:

var that = this;

就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了,所以,用 call() 或者 apply() 调用箭头函数时,无法对 this 进行绑定,即传入的第一个参数被忽略:

var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; //
var fn = (y) => y - this.birth; // this.birth仍是1990
return fn.call({birth:2000}, year);
}
};
obj.getAge(2015); //

JavaScript学习笔记(十二)——箭头函数(Arrow Function)的更多相关文章

  1. JavaScript学习笔记(十二) 回调模式(Callback Pattern)

    函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)intr ...

  2. JavaScript学习笔记(二)——函数和数组

    第二章 函数简介 1 第一个函数示例 <script language="JavaScript" type="text/JavaScript"> f ...

  3. python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL

    python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...

  4. Go语言学习笔记十二: 范围(Range)

    Go语言学习笔记十二: 范围(Range) rang这个关键字主要用来遍历数组,切片,通道或Map.在数组和切片中返回索引值,在Map中返回key. 这个特别像python的方式.不过写法上比较怪异使 ...

  5. JavaScript权威设计--命名空间,函数,闭包(简要学习笔记十二)

    1.作为命名空间的函数 有时候我们需要声明很多变量.这样的变量会污染全局变量并且可能与别人声明的变量产生冲突. 这时.解决办法是将代码放入一个函数中,然后调用这个函数.这样全局变量就变成了 局部变量. ...

  6. es6 箭头函数(arrow function) 学习笔记

    箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式 ...

  7. java jvm学习笔记十二(访问控制器的栈校验机制)

    欢迎装载请说明出处:http://blog.csdn.net/yfqnihao 本节源码:http://download.csdn.net/detail/yfqnihao/4863854 这一节,我们 ...

  8. JavaScript学习笔记(七)——函数的定义与调用

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  9. JavaScript学习笔记(二)——字符串

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  10. JavaScript学习总结(十二)——JavaScript编写类

    在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...

随机推荐

  1. 深入浅出:JavaScript作用域链

    1. 什么是作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量的作用范围. 2. 变量的分类和变量作用域的分类 在JavaScript中,变量分为全局变量和局部变量,与此相对应的,变量 ...

  2. 填个小坑,Vue不支持IE8及以下,跨域ajax不支持IE9

    这特么就尴尬了,说好的Vue支持IE8及以下的呢,引入jquery,测试IE个浏览器,IE9仍然显示不正常, 然而命令行测试Vue仍然存在, 数据回不来!数据回不来!数据回不来! 好吧  肉包子打狗$ ...

  3. jfinal拦截器配置

    实现aop @Before(Tx.class) public void index(){ // renderText("hello world!"); render("/ ...

  4. ALSA和Pulseaudio

    小记一下,Deadbeef如果使用ALSA作为音频输出的话,会导致其他说有使用pulseaudio的程序[如Chrome]没声音.....[但是SMplayer使用ALSA的话不会...]

  5. Android Studio中的Java控制台中出现乱码问题?

    今天在用Android studio 中敲代码时发现控制台出不了汉字,一打汉字全是乱码的.在此特供解决方案. 在Java的工程目录build.gradle下添加如下代码: 1.新版gradle tas ...

  6. OOAD-设计模式(四)结构型模式之适配器、装饰器、代理模式

    前言 前面我们学习了创建型设计模式,其中有5中,个人感觉比较重要的是工厂方法模式.单例模式.原型模式.接下来我将分享的是结构型模式! 一.适配器模式 1.1.适配器模式概述 适配器模式(Adapter ...

  7. Angular服务的5种创建方式

    config配置块 Angular应用的运行主要分为两部分:app.config()和app.run(),config是你设置任何的provider的阶段,从而使应用可以使用正确的服务,需要注意的是在 ...

  8. DOM遍历-祖先

    遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery parent() ...

  9. 手机网站的tips[转载]

    原文:http://www.haorooms.com/post/phone_web 1. 安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经 ...

  10. 事件 event

    添加移除函数(removeEventListener)时三个参数保持一致,否则会失败,而且不会有错误提示 var btn = document.getElementById(“myBtn”); btn ...