本文介绍箭头(arrow)函数的优点,更简洁的语法
我们先来按常规语法定义函数:

function funcName(params) {

   return params + 2;

 }

funcName(2);

// 4

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

var funcName = (params) => params + 2

funcName(2);

// 4

是不是很酷!虽然是一个极端简洁的例子,但是很好的表述了箭头函数在写代码时的优势。我们来深入了解箭头函数的语法:

(parameters) => { statements }

如果没有参数,那么可以进一步简化: 

() => { statements }

如果只有一个参数,可以省略括号: 

parameters => { statements }

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

parameters => expression

// 等价于:

function (parameters){

  return expression;

}

现在你已经学会了箭头函数的语法,我们来实战一下。打开Chrome浏览器开发者控制台,输入: 

var double = num => num * 2

我们将变量double绑定到一个箭头函数,该函数有一个参数num, 返回 num * 2。 调用该函数:

double(2);

// 4

double(3);

// 6

没有局部this的绑定 

和一般的函数不同,箭头函数不会绑定this。 或者说箭头函数不会改变this本来的绑定。
我们用一个例子来说明:

function Counter() {

  this.num = 0;

}

var a = new Counter();

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

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函数的连续执行:

clearInterval(b.timer);

我们来尝试理解为什么出错:首先函数setInterval没有被某个声明的对象调用,也没有使用new关键字,再之没有使用bind, call和apply。setInterval只是一个普通的函数。实际上setInterval里面的this绑定到全局对象的。我们可以通过将this打印出来验证这一点:

function Counter() {

  this.num = 0;

this.timer = setInterval(function add() {

    console.log(this);

  }, 1000);

}

var b = new Counter();

你会发现,整个window对象被打印出来。 使用如下命令停止打印: 

clearInterval(b.timer);

回到之前的函数,之所以打印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();

// 1

// 2

// 3

// ...

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

为了验证刚刚的说法,我们可以将 Counter函数中的this绑定到that, 然后在setInterval中判断this和that是否相同。

function Counter() {

  var that = this;

  this.timer = setInterval(() => {

    console.log(this === that);

  }, 1000);

}

var b = new Counter();

// true

// true

// ...

总结正如我们期望的,打印值每次都是true。最后,结束刷屏的打印:

箭头函数写代码拥有更加简洁的语法;
不会绑定this。

javascript 箭头函数的使用介绍的更多相关文章

  1. 细数JS中实用且强大的操作符&运算符

    1,前言博主收录了一些在实际开发过程中,很实用且方便的JS操作符,熟练掌握的话,不仅代码看上去高大上(实为装逼),而且简洁大方。2,代码+应用2.1,短路运算符 ||从左往右1,只要有一个条件为true时,结果就为true。2,当两个条件都为false时,结果才为false。3,当一个条件为true......

  2. javascript 箭头函数的使用介绍

    本文介绍箭头(arrow)函数的优点,更简洁的语法我们先来按常规语法定义函数:function funcName(params) { return params + 2; }funcName(2);// 4该函数使用箭头函数可以使用仅仅一行代码搞定!var funcN......

  3. jquery文本框内容改变事件

    /** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发。*/$("#inputid").change(function(){ console.log($(this).val());});/** * 只要文本类容发生改变,就会触发该事件 */$("#inp......

  4. js实现简单商品筛选功能

    本文实例为大家分享了js实现商品筛选功能的具体代码,供大家参考,具体内容如下应用场景:商品筛选Document* {margin: 0;padding: 0;list-style: none;text-decoration: none;}.choose {width: 500px;height: a......

  5. JavaScript——深入了解this

    前言我曾以为func()其实就是window.func()function func(){console.log('this : ' + this);}func();//this : [object Window]window.func();//this : [object Window] 直到'u......

  6. JavaScript canvas实现文字时钟

    本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下 先看看效果图 代码 <!DOCTYPE html> <htmllang="en"> <head> <metacharset......

  7. javascript中的内存管理

    目录简介内存生命周期JS中的垃圾回收器引用计数垃圾回收算法Mark-and-sweep回收算法调试内存问题闭包Closures中的内存泄露javascript中的内存管理简介在c语言中,我们需要手动分配和释放对象的内存,但是在java中,所有的内存管理都交给了java虚拟机,程序员不需要在手动进程内......

  8. JavaScript 防盗链的原理以及破解方法

    背景前段日子 在自学做项目的时候发现 明明在项目中引用了线上存在的图片 但是在自己的项目中却怎么也显示出来查阅资料后发现是这些第三方网站设置了防盗链破解防盗链先说说防盗链的原理,http 协议中,如果从一个网页跳到另一个网页,http 头字段里面会带个 Referer。这里的Referer是由于历史......

  9. JavaScript Html实现移动端红包雨功能页面

    本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下实现效果如下:具体代码如下html部分:红包雨demo.css为初始化css,可以不加index.css部分body{width: 100%;height: 100%;background-image: url(/javascript/......

    ____
  10. ________
  11. Jquery 格式化时间____

    我们常常会通过datetime得到时间,但是网页前台往往会显示不同的时间如:2013-12-152013年12月23日2013 12 15等多种显示效果,这就需要我们把时间格式化一下。下面是通过Jquery格式化时间:$(function () { var time =......

随机推荐

  1. ASP.NET Core错误处理中间件[3]: 异常处理器

    DeveloperExceptionPageMiddleware中间件错误页面可以呈现抛出的异常和当前请求上下文的详细信息,以辅助开发人员更好地进行纠错诊断工作。ExceptionHandlerMiddleware中间件则主要面向最终用户,我们可以利用它来显示一个友好的定制化错误页面。Develop......

  2. 基于源码分析Vue的nextTick

    摘要:本文通过结合官方文档、源码和其他文章整理后,对Vue的nextTick做深入解析。理解本文最好有浏览器事件循环的基础,建议先阅读上文《事件循环Event loop到底是什么》。一、官方定义实际上在弄清楚浏览器的事件循环后,Vue的nextTick就非常好理解了,它就是利用了事件循环的机制。我们......

  3. Android实现简单画图画板

    本文实例为大家分享了Android实现简单画图画板的具体代码,供大家参考,具体内容如下效果如图:布局文件:MainActivity.javapackage com.example.yulongji.android10;import android.app.Activity;import androi......

  4. Java 概述

    1. 什么是Java什么是 JavaJava是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的......

  5. Java中获取时间戳

    Java中获取时间戳 三种方式对比**最近项目开发过程中发现了项目中获取时间戳的业务。而获取时间戳有以下三种方式,首先先声明推荐使用System类来获取时间戳,下面一起看一看三种方式。1.System.currentTimeMillis() System类中的currentTimeMillis()方......

  6. ASP下通过Adodb.Stream实现多线程下载大文件

    有个朋友 做 某种小众音乐交换站的(他们那个行业的昵图网),需要用到付费下载。尝试过 防盗链,不太理想,最终使用了 Adodb.Stream 读取,直接输出。解决了 盗版的问题,但是新的问题又来了。Adodb.Stream 这种方式 电脑还好说,大部分电脑浏览器都支持。移动端 很多 浏览器为了 加速......

  7. postgresql 中的序列nextval详解

    一、postgresql中的序列1.1 场景需求需要向下图一样,需要对产品编码编码设置一个序列。编码规则 SKU + 序列号:1.2 序列序列是基于bigint算法的,因此范围是不能超过一个八字节 整数的范围(-9223372036854775808 到 9223372036854775807)。由......

  8. ASP中常用的22个FSO文件操作函数整理

    在ASP中,FSO的意思是File System Object,即文件系统对象。我们将要操纵的计算机文件系统,在这里是指位于web服务器之上。所以,确认你对此拥有合适的权限。理想情况下,你可以在自己的机器上建立一个web服务器,这样就能方便地进行测试。如果运行于Windows平台,请试一试微软公司的......

  9. JVM系列(三):JVM创建过程解析

    上两篇中梳理了整个java启动过程中,jvm大致是如何运行的。即厘清了我们认为的jvm的启动过程。但那里面仅为一些大致的东西,比如参数解析,验证,dll加载等等。把最核心的loadJavaVM()交给了一个dll或者so库。也就是真正的jvm我们并没有接触到,我们仅看了一个包装者或者是上层应用的实现......

  10. Java多线程总结(一)

    多线程作为Java中很重要的一个知识点,在此还是有必要总结一下的。一.线程的生命周期及五种基本状态关于Java中线程的生命周期,首先看一下下面这张较为经典的图:上图中基本上囊括了Java中多线程各重要知识点。掌握了上图中的各知识点,Java中的多线程也就基本上掌握了。主要包括:Java线程具有五中基......