Js箭头函数和lambda基础知识_函数菜鸟教程

() => {} 基本特点es6中的箭头函数,在实际开发中确实比较方便,通常来说会有几个特点:箭头函数中的this会绑定在外部作用域没有arguments如果想返回一个对象记得加()包裹call和apply不能传入this(() => {a: 1})() //返回值为undefiend,想返回对象,使用下面的方式
(() => ({a: 1})()箭头函数和

Js箭头函数和lambda基础知识

() => {} 基本特点

es6中的箭头函数,在实际开发中确实比较方便,通常来说会有几个特点:

Js箭头函数和lambda基础知识_函数菜鸟教程

  • 箭头函数中的this会绑定在外部作用域
  • 没有arguments
  • 如果想返回一个对象记得加()包裹
  • call和apply不能传入this
(() => {a: 1})() //返回值为undefiend,想返回对象,使用下面的方式
(() => ({a: 1})()

箭头函数和lambda表达

lambda在计算机科学中表示匿名函数,本质上是用来简化操作的。简单来说,是一种表示方法,代表了一定的输入和输出。

step1:

实现一个平方运算表达(x * x): 
数学表达式(λ代表一个表达式的输入):

λx.x * x

用JavaScript实现:

(function (x) {
  return x * x;
})()

step2:

在平方的基础上再加2(x * x + 2): 
数学表达式:

(λx.x * x)(λx.x + 2)

用Javascript实现:

(function(x) {
  return x + x
})((function () {
  return x * x
})())

其实就是利用了匿名函数然后,再继续嵌套。 
但是有了箭头函数,就可以更加简便地实现上面的操作:

(x => x + 2)((x => x * x)())

step3:

更加优雅地实现,其实向上面这种方式,不是特别优雅,可读性不好,需要一种能够更加优雅地方式:

const action = [
  x => x * x,
  x => x + 2
];

let res = action.reduce((res, cur) => cur(res), 2);

step4:

总结:从上面的过程可以看出来,有两个主要的关键过程:

  • 1、箭头函数是一个匿名函数,简化书写
  • 2、箭头函数作为变量传递给reduce函数的回调

所以箭头函数在很大程度上,简化了函数式的操作。其实lambda表达式,在Javascript中就是匿名函数。

箭头函数使用总结:

  • 箭头函数适合纯函数的操作,比如map、filter、reduce等操作
  • 箭头函数内部,一般不要使用this,因为this是和外部作用域绑定的,容易产生问题

问题1:

function A() {
  this.foo = 1
}

A.prototype.bar = () => console.log(this.foo)

let a = new A()
a.bar()  //undefined

因为对象a,并没有构成一个作用域。

如果想让this指向A,可以这样写:

function A() {
  this.foo = 1;
  this.bar = () => {
    console.log('value', this.foo);
  }
}
let a = new A();
a.bar(); //1

因为bar的声明在函数A的作用域内部。

问题2:

const A = {
  foo: 1,
  bar: () => {
    console.log('value', this.foo);
  }
}
let a = Object.create(A);
a.bar(); //undefined

如果想输出正常的值,应该使用function定义:

const A = {
  foo: 1,
  bar: function (){
    console.log('value', this.foo);
  }
}
let a = Object.create(A);
a.bar(); // value 1
海计划公众号
(0)
上一篇 2020/03/29 01:42
下一篇 2020/03/29 01:42

您可能感兴趣的内容

  • js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法基础知识_ajax使用攻略

    在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?方法一、函数回调:js中把函数当做对象来传递,是异步编程最基本的方法,在异步执行完成后,在执行里面的回调方法,这样不会出现程序堵塞的情况,例如:function fn(callback){setTimeout(function(){

    2020/04/05
  • tinypng指南攻略一款图片在线压缩的网站

    tinypng基础入门 官方网址:https://tinypng.com/ 简介描述:一款图片在线压缩的网站

    2020/03/05
  • @media screen媒体查询入门基础知识_自适应使用攻略

    媒体查询一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自CSS3,允许内容的呈现针对一个特定范围的输出设备而进行裁剪,而不必改变内容本身。基本使用具体的使用方式是<link rel="stylesheet" media="(max-w

    2020/03/29
  • vali-admin小白知识_一个模块化的易于配置的后台模板

    vali-admin小白知识 官方网址:https://pratikborsadiya.in/vali-admin/ GitHub:https://github.com/prati…

    2020/03/06
  • Principle入门指南_一款交互设计工具

    Principle入门指南 官方网址:http://principleformac.com/ 简介描述:一款交互设计工具 Principle是前 Apple 工程师打造的一款交互设…

    2020/03/06
  • Js防扒站,防止镜像网站使用说明_网站菜鸟知识

    自己没日没夜敲出来的站,稍微漂亮一点,被人看上了就难逃一扒,扒站是难免的,但不能让他轻轻松松就扒了;前些天有个朋友做的官网被某不法网站镜像,严重影响到 SEO,当时的解决方法是通过屏蔽目标 IP 来阻止它继续镜像,但这种亡羊补牢的方法并不能解决根本的问题,最多只是阻止了镜像站不会再继续更新;最近在网上瞎逛看到一个防止扒站解决方法,主要是判断当前访问页面的浏览

    2020/03/29
  • Js中的普通函数与构造函数比较使用教程_函数菜鸟教程

    正文想必学过javascript函数的同学想必能细心的发现,同样是函数,为什么有个函数要加上new关键字呢,加上他们的意义又是什么,作用于什么场景,下面我们就来给大家详细介绍一下。问题什么是构造函数?构造函数的优点与缺点?构造函数与普通函数区别是什么?用new关键字的时候到底做了什么?构造函数有返回值怎么办?构造函数能当普通函数调用吗?什么是构造函数语法:l

    2020/03/26
  • 如何写出优美的javascript代码?小白指南_代码入门百科

    在多年以前,人们注重功能是如何实现的。现如今,随着Web及互联网技术的不断发展,功能仅成了最基本的要求,如何写出漂亮,整洁的代码已成为一个大牛级程序员不可或缺的条件。写出优美的JavaScript代码的方法:少写代码提前设计能有助于少写代码,增强全局感。而代码写得少还能防止失控——感觉不对时就应该停下来,腾出时间来思考,为什么会偏离最先的想法。遵行惯用法注释

    2020/03/22
  • Express基础入门基于 Node.js 平台,快速、开放、极简的 web 开发框架

    Express基础入门 官方网址:http://www.expressjs.com.cn/ GitHub:https://github.com/expressjs/expressj…

    2020/03/05
  • PHP面向对象(抽象类与抽象方法、接口的实现)使用帮助_接口菜鸟知识

    一、抽象类与抽象方法1,任何一个类,如果它里面至少有一个方法是被声明为抽象的,那么这个类就必须被声明为抽象的。2,定义为抽象的类不能被实例化。3, 被定义为抽象的方法只是声明了其调用方式(参数),不能定义其具体的功能实现。 4,必须在子类中将抽象类的全部抽象方法全部实现才可以<?php
    // 任何一个类,如果它里面至少有一个方法是被声明为抽象的,那么这个类

    2020/03/31
  • 使用String. localeCompare比较字符串菜鸟知识_字符串入门基础知识

    javascript提供stringA.localeCompare(stringB)方法,来判断一个字符串stringB是否排在stringA的前面。返回值: 如果引用字符存在于比较字符之前则为负数; 如果引用字符存在于比较字符之后则为正数; 相等的时候返回 0 。 返回一个数字表示是否 引用字符串 在排序中位于 比较字符串 的前面,后面,或者二者相同

    2020/03/31
  • 如何用 Hooks 来实现 React Class Component 写法?零基础入门_Hooks指南攻略

    Hooks 的 API 可以参照 React 官网。本文主要是结合 Demo 详细讲解如何用 Hooks 来实现 React Class Component 写法,让大家更深的理解 Hooks 的机制并且更快的入门。 注意:Rax 的写法和 React 是一致的,本文 Demo 基于 React 实现 ,查看 Demo 完整版本文内容包括如下:一、在 Hoo

    2020/03/24
  • ES6 之 对象的简写方式小白攻略_对象小白知识

    简写有两条基本原则:同名的属性可以省略不写对象中的方法中的 : function 可以省略不写来看下下面这个例子,我分别用ES5 和 ES6 的语法分别定义并声明了一个简单的学生对象:ES5:var studentES5 = {name: ‘小方哥’,age: 20,sex: ‘男’,getName: function () {return this.nam

    2020/03/30
  • base16基础入门_在控制台中使用的base16配色方案

    base16基础入门 官方网址:http://chriskempson.com/projects/base16 GitHub:https://github.com/chriskem…

    2020/03/06
  • jquery中toggleClass(), index()基础教程_jquery小白知识

    1. toggleClass()对设置货已出被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类,如果不存在则添加类,如果已设置则将之删除。这就是所谓的切换效果,不过通过“switch”参数,只能够规定只删除或者添加类。语法:$(selector).toggleClass(class,switch)参数描述class必需。规定添加或移除 class

    2020/03/20
  • 通过git命令,上传本地文件到git服务器使用攻略_git使用攻略

    步骤一:首先进入需要上传的项目文件夹,通过命令git init初始化,在内部会生成.git的文件夹git init步骤二:将本地文件添加到版本库中,使用命令 git add .将文件提交到本地的暂存区,后面的小数点“.”代表添加文件夹下的所有文件git add .步骤三:使用命令git commit将文件提交到本地仓库,-m 后为备注信息git commit

    2020/04/05