es6--箭头函数

基本用法

ES6允许使用“箭头”(=>)定义函数。

var f = v => v;

上面的箭头函数等同于:

var f = function(v) {return v;
};

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

复制代码
var f = () => 5;
// 等同于
var f = function () { return 5 };var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {return num1 + num2;
};
复制代码

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。

var getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

复制代码
const full = ({ first, last }) => first + ' ' + last;// 等同于
function full(person) {return person.first + ' ' + person.last;
}
复制代码

使用注意点

箭头函数有几个使用注意点。

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:argumentssupernew.target

复制代码
function foo() {setTimeout(() => {console.log('args:', arguments);}, 100);
}foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]
复制代码

上面代码中,箭头函数内部的变量arguments,其实是函数fooarguments变量。

另外,由于箭头函数没有自己的this,所以当然也就不能用call()apply()bind()这些方法去改变this的指向。

复制代码
(function() {return [(() => this.x).bind({ x: 'inner' })()];
}).call({ x: 'outer' });
// ['outer']
复制代码

上面代码中,箭头函数没有自己的this,所以bind方法无效,内部的this指向外部的this

长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。箭头函数”绑定”this,很大程度上解决了这个困扰。

函数绑定

箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(callapplybind)。但是,箭头函数并不适用于所有场合,所以ES7提出了“函数绑定”(function bind)运算符,用来取代callapplybind调用。虽然该语法还是ES7的一个提案,但是Babel转码器已经支持。

函数绑定运算符是并排的两个双冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。

复制代码
foo::bar;
// 等同于
bar.bind(foo);foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {return obj::hasOwnProperty(key);
}
复制代码

如果双冒号左边为空,右边是一个对象的方法,则等于将该方法绑定在该对象上面。

复制代码
var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;let log = ::console.log;
// 等同于
var log = console.log.bind(console);
复制代码

由于双冒号运算符返回的还是原对象,因此可以采用链式写法。

尾调用优化

什么是尾调用?

尾调用(Tail Call)是函数式编程的一个重要概念,本身非常简单,一句话就能说清楚,就是指某个函数的最后一步是调用另一个函数。

function f(x){return g(x);
}

上面代码中,函数f的最后一步是调用函数g,这就叫尾调用。

“尾调用优化”(Tail call optimization),即只保留内层函数的调用帧。如果所有函数都是尾调用,那么完全可以做到每次执行时,调用帧只有一项,这将大大节省内存。这就是“尾调用优化”的意义。

严格模式

ES6的尾调用优化只在严格模式下开启,正常模式是无效的。

这是因为在正常模式下,函数内部有两个变量,可以跟踪函数的调用栈。

  • func.arguments:返回调用时函数的参数。
  • func.caller:返回调用当前函数的那个函数。

尾调用优化发生时,函数的调用栈会改写,因此上面两个变量就会失真。严格模式禁用这两个变量,所以尾调用模式仅在严格模式下生效。

复制代码
function restricted() {"use strict";restricted.caller;    // 报错restricted.arguments; // 报错
}
restricted();
复制代码
 

箭头函数与常规函数对比

一个箭头函数与一个普通的函数在两个方面不一样:

  • 下列变量的构造是词法的: arguments , super , this , new.target
  • 不能被用作构造函数:没有内部方法 [[Construct]] (该方法允许普通的函数通过 new 调用),也没有 prototype 属性。因此, new (() => {}) 会抛出错误。

除了那些意外,箭头函数和普通的函数没有明显的区别。例如, typeof 和 instanceof 产生同样的结果:

复制代码
> typeof () => {}
//'function'
> () => {} instanceof Function
//true> typeof function () {}
//'function'
> function () {} instanceof Function
//true
复制代码

函数表达式和对象字面量是例外,这种情形下必须放在括号里面,因为它们看起来像是函数声明和代码块。

转载于:https://www.cnblogs.com/weirdoQi/p/6876887.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/254558.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NYOJ题目839合并

--------------------------- AC代码: 1 import java.util.Scanner;2 3 public class Main {4 5 public static void main(String[] args) {6 7 8 Scanner scnew Scanner(System.in);9 10 int timessc.nextInt(); 11 …

python多进程

2019独角兽企业重金招聘Python工程师标准>>> python多进程 进程简介 进程是程序在计算机上的一次执行活动。当你运行一个程序,你就启动了一个进程。显然,程序是死的(静态的),进程是活的(动态的)。进程可以分为系统进程和用户进程。…

夺命雷公狗---node.js---20之项目的构建在node+express+mongo的博客项目5mongodb在项目中实现添加数据...

我们上一步就引入了mongodb了,那么下一步就要开始写添加数据了,不过有个前提是先将表单的数据处理好: 最基本的这部现在已经成功了,因为最基本的这步就是先将表单处的提交方式和提交地址给处理好,这里和PHP的基本上是一…

音频中采样位数,采样率,比特率的名词解释(转)

采样位数(采样大小): 采样位数可以理解为采集卡处理声音的解析度。这个数值越大,解析度就越高,录制和回放的声音就越真实。我们首先要知道:电脑中的声音文件是用数字0和1来表示的。所以在电脑上录音的本质就…

WebSocket实时异步通信

WebSocket实时异步通信 【一】WebSocket简介 WebSocket是HTML5推出一个协议规范,用来B/S模式中服务器端和客户端之间进行实时异步通信。 众所周知,传统的HTTP协议中,服务器端和客户端通信只能是在客户端发送一个请求之后,服务器端…

多线程和多进程的区别(小结)

分类: linux 2009-06-19 09:33 11501人阅读 评论(15) 收藏 举报 很想写点关于多进程和多线程的东西,我确实很爱他们。但是每每想动手写点关于他们的东西,却总是求全心理作祟,始终动不了手。 今天终于下了决心,写点东西…

Android:日常学习笔记(8)———探究UI开发(5)

Android:日常学习笔记(8)———探究UI开发(5) ListView控件的使用 ListView概述 A view that shows items in a vertically scrolling list. The items come from the ListAdapter associated with this view. 1.关于ArrayAdapter&#xff1a; ArrayAdapter<T> 是 ListAd…

分布式锁与实现(一)——基于Redis实现

概述 目前几乎很多大型网站及应用都是分布式部署的&#xff0c;分布式场景中的数据一致性问题一直是一个比较重要的话题。分布式的CAP理论告诉我们“任何一个分布式系统都无法同时满足一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和…

深入理解Activity启动流程(二)–Activity启动相关类的类图

本文原创作者:Cloud Chou. 欢迎转载&#xff0c;请注明出处和本文链接 本系列博客将详细阐述Activity的启动流程&#xff0c;这些博客基于Cm 10.1源码研究。 在介绍Activity的详细启动流程之前&#xff0c;先为大家介绍Activity启动时涉及到的类&#xff0c;这样大家可以有大概…

5月23日

11.1 LAMP架构介绍一、LAMP架构介绍LAMP是LinuxApache(httpd)MySQLPHP的简写&#xff0c;即把Apache、MySQL以及PHP安装在linux系统上&#xff0c;组成一个运行环境来运行PHP脚本语言&#xff0c;通常是网站。比如Google、淘宝、百度、51cto博客、猿课论坛等就是用PHP语言写出来…

LaTeX基础一:安装与基本操作

一、安装 1.首先下载texlive2015.iso文件。再在解压的镜像文件中运行install-tl-advanced.bat批处理命令。注意要关闭杀毒软件&#xff0c;否则可能会出现错误。2.可以修改一下安装路径&#xff0c;只要更改一个&#xff0c;其他也随之更改&#xff1a;3.把不要安装的语言包去掉…

电路宽度测量halcon例子

一个halcon处理的例子 目录处理要求&#xff1a;原图&#xff1a;处理程序&#xff1a;处理结果&#xff1a;处理要求&#xff1a; 根据客户给的宽度&#xff0c;计算出电路宽度太窄的为NG 原图&#xff1a; 处理程序&#xff1a; read_image (Image, 1.png) rgb1_to_gray(I…

iOS显示性能优化过程讲解

点我跳转原文地址 卡顿的原理 iOS系统界面滑动流畅性的保持主要是依靠CPU和GPU两大处理硬件间通力合作的结果&#xff0c;一个视图的显示需要先经过CPU创建、布局计算、对图片解码、文本绘制&#xff0c;然后CPU将计算的结果交给GPU&#xff0c;GPU可能需要对图形进行变换、合成…

1.SoapUI接口测试--创建项目

1、点击File-->New soapUI Project 2、填写项目名称&#xff0c;接口服务地址后单击【OK】按钮后就成功创建了一个项目 3、模拟发送请求 4、创建请求 或者直接Copy一个请求 5、保存项目 6、项目是以xml的格式保存的&#xff0c;下次用的时候可以直接导入&#xff0c;点击Fil…

HTML图片元素(标记)

<html> <head> <title>第一个网页</title> </head> <body> ***************图片元素******************</br> <img srcmm.jpg /> </body> </html> 新建一个文件夹“text”,在text文件夹内新建index.html并放入一张…

ASP.NET Aries 3.0发布(附带通用API设计及基本教程介绍)

主要更新&#xff1a; 1&#xff1a;升级处理机制&#xff08;js请求由同步变更为异步&#xff09; 2&#xff1a;优化前端JS&#xff1a;包括API和配置方式。 3&#xff1a;增加InputDialog功能。 4&#xff1a;增远远程验证功能。 5&#xff1a;优化权限安全机制。 6&#xf…

甲骨文称 Java 序列化的存在是个错误,计划删除

甲骨文计划从 Java 中去除序列化功能&#xff0c;因其在安全方面一直是一个棘手的问题。 Java 序列化也称为 Java 对象序列化&#xff0c;该功能用于将对象编码为字节流...Oracle 的 Java 平台小组的首席架构师 Mark Reinhold 说&#xff1a;“删除序列化是一个长期目标&#x…

CreateProcess

Windows 进程创建完整过程&#xff08;除去细节&#xff09; 当前流程是分析WinXP x86得到的&#xff0c;在最新版本Windows上不一定正确&#xff0c;但是可以做一个参考&#xff0c; 由于我这里符号并不全&#xff0c;所以导致我这里有些东西看到的可能是错误的&#xff0c;误…

MVC架构模式(2)

简介&#xff1a; MVC最初是在Smaltalk_80中被用来构建用户界面的。M代表模型Model&#xff0c;V代表视图View&#xff0c;C代表控制器Controller。 Model模型层&#xff0c;可以简单理解就是数据层&#xff0c;用于提供数据。在项目中&#xff0c;&#xff08;简单理解&#x…

ios学习之旅---指针也不难

1、认识指针#include <stdio.h> //基本数据类型作为函数參数传递是值传递 //void moveFront(int x ,int y) //{ // x x 2; //} void test() {// 确定当前坐标int x 20;int y 150;printf("%p\n",&x);printf("%lu\n",&x);*((int *)(0…