你真的了解箭头函数吗(代码片段)

浪漫主义码农 浪漫主义码农     2022-10-24     174

关键词:

箭头函数

🙊前言:箭头函数相信大家都使用过,会用的人屡试不爽,怕用错的可能选择不用,多码几行字的事。但是用过的人说真的爽。那么本文就来搞明白箭头函数的玩法。

箭头函数使用

下面就根据普通函数和箭头函数的对比使用来更加深入的了解使用箭头函数吧

1.语法格式上

我们普通函数语法格式上是这样的

function()函数体内容

然而我们的箭头函数是这样的,是不是很简洁

(参数)=>函数体内容

🏀例如: 我们遍历数组,并修改数组

var hobby=["吃饭","睡觉","打球"]
    var arr = hobby.map(function(item) //普通函数实现
        return "张三喜欢"+item;
    )
    var brr =hobby.map((item)=>return "李四喜欢"+item); //箭头函数实现
    console.log(arr)
    console.log(brr)

🏀如果你要返回一个对象,要改变写法,错误的写法会被以为是函数体内容

 var obj1 = ()=>name:"浪漫主义码农";age:20 //错误写法
 var obj = ()=>(name:"浪漫主义码农",age:20) //正确写法
  console.log(obj1(),"错误写法")
  console.log(obj(),"正确写法")

小结一下

  1. 如果只有一个参数,就可以省略(),函数体只有一条语句就可以省略和return,上面的例子就可以省略为var brr =hobby.map(item=>"李四喜欢"+item);
  2. 箭头函数作为匿名函数,是不可以命名的

2.this的指向

箭头函数并没有他们自己的执行上下文。所以就没有this,arguments,

箭头函数的this指向是它所在的对象的父级

🏀来个例子

    var a = 
        name: "愿你历经千帆",
        init: function () 
            console.log(this)
            console.log(this.name)
        
    
    var b = 
        name: "终能得偿所愿",
        init: ()=> 
            console.log(this)
            console.log(this.name)
        
    
    a.init()
    b.init()

可以看出普通函数this指向了本身对象,而箭头函数this往外层找指向了window,因为window没有name字段所以没有输出。

箭头函数使this从“动态”变成“静态”,实质是内部没有this指向,继承上级对象this指向

箭头函数的this指向定义时外部作用域内的this指向,普通函数的this指向调用时根据上下文取确认.

3.无法作为构造函数

箭头函数作为匿名函数,没有prototype,没有自己的this指向,因此不能使用new构造函数

来个例子:

    function mao(name,age) //普通函数
        this.name=name,
        this.age=age
    
    var fn = (name,age) => ( //箭头函数
        name:name,
        age:age
    )
    var b = new mao("浪漫主义码农",100) //普通函数
    console.log(b)
    var a = new fn("张三",200) // 箭头函数
    console.log(a)

分析:

💠首先我们要知道构造函数new的过程是怎么样的

  1. 创建一个空对象 ;
  2. 将要实例化对象的原形链指向该对象原形。
  3. 绑定该对象为this的指向
  4. 返回该对象。

由于箭头函数没有prototype 没有自己的this指向,不可以使用arguments。

🏀这里贴一个手写new构造函数吧,以后再出一篇深度探究构造函数的吧

function mao(name,age)
        this.name=name;
        this.age=age;
   
//手写new
function _new(fn, ...args) // ...args为ES6展开符,也可以使用arguments
    //先用Object创建一个空的对象
    let obj=new Object();
    //新对象会被执行prototype连接
    obj.__proto__=fn.prototype;
    //新对象和函数调用的this绑定起来
    let res=fn.call(obj,...args);
    //判断函数返回值如果是null或者undefined则返回obj,否则就返回res
    return res instanceof Object?res:obj;

var a= _new(mao,"浪漫至死不渝",20)
console.log(a)

💠写在最后

🙊如果上面有误,欢迎大佬指出,不胜感激。

💌 愿你历经千帆,终能得偿所愿 💌

一个心怀浪漫宇宙,也珍惜人间日常的码农

你真的了解箭头函数吗(代码片段)

...的可能选择不用,多码几行字的事。但是用过的人说真的爽。那么本文就来搞明白箭头函数的玩法。箭头函数使用下面就根据普通函数和箭头函数的对比使用来更加深入的了解使用箭头函数吧1.语法格式上我们普通函数语法... 查看详情

你真的了解main函数吗?(代码片段)

大家好,我是KookNut39,在CSDN写文,分享一些自己认为在学习过程中比较重要的东西,致力于帮助初学者入门,希望可以帮助你进步。最近在更新C/C++方面的知识,感兴趣的欢迎关注博主,可以去... 查看详情

你真的了解[super]关键字吗?(代码片段)

前言此篇文章是看了阮老师的es6教程,看到super关键字的时候觉得有必要总结梳理一下,原文还是参考ECMAScript6入门。正文super这个关键字,既可以当作函数使用,也可以当作对象使用。1.当作函数使用super作为函数调用时,代表... 查看详情

你真的了解asp.netcore部署模型吗?(代码片段)

原文:你真的了解ASP.NETCore部署模型吗? ----------------------------   以下内容针对ASP.NETCore2.1,2.2出现IIS进程内寄宿暂不展开讨论--------------------------      相比ASP.NET,ASP.NETCore 查看详情

04-字典集合,你真的了解吗(代码片段)

04-字典、集合,你真的了解吗?你好,我是景霄。前面的课程,我们学习了Python中的列表和元组,了解了他们的基本操作和性能比较。这节课,我们再来学习两个同样很常见并且很有用的数据结构:字典(dict)和集合(set)。... 查看详情

涨知识:equals和==你真的了解吗?(代码片段)

基本概念==是运算符,比较的是两个变量是否相等;equals()是Object方法,用于比较两个对象是否相等看一下源码:publicbooleanequals(ObjectanObject)if(this==anObject)returntrue;if(anObjectinstanceofString)StringanotherString=(String)anObject;intn=va 查看详情

你真的了解cdc吗?(代码片段)

ChangeDataCapture[1]简称CDC,用于异构数据同步,将database的数据同步到第三方,这里的DB可以是MySQL,PG,Mongo等等一切数据源,英文技术圈称之为SingleSourceOFTrue(SSOT),目标称为DerivedDataSystems。常见的使用场景有:缓存Cache,异... 查看详情

你真的了解synchronized和volatile吗?(代码片段)

原文来自于:公众号三不猴子什么是cas?cas:compareandswap比较然后交换,它在没有锁的状态下可以保证多线程的对值得更新。我们可以看一下在jdk中对cas的应用:/** * Atomically increments by one the current value. * * @return the updat... 查看详情

你真的了解吗?一文详解底层原理!(代码片段)

前言一、SpringMVC简介1.1、SpringMVC引言为了使Spring有可插入的MVC架构,SpringFrameWork在Spring基础上开发SpringMVC框架,从而在使用Spring进行WEB开发时可以选择使用Spring的SpringMVC框架作为web开发的控制器框架。1.2、SpringMVC的优势SpringMVC是一... 查看详情

你真的了解maven吗?(代码片段)

(一)什么是MavenMaven是Apache下的一个开源项目,目前可以用于构建和管理任何基于Java的项目的工具,让Java开发人员的日常工作更轻松。为了让开发人员更轻松,Maven做到了以下几点:简化构建过程提供了... 查看详情

你真的了解maven吗?(代码片段)

(一)什么是MavenMaven是Apache下的一个开源项目,目前可以用于构建和管理任何基于Java的项目的工具,让Java开发人员的日常工作更轻松。为了让开发人员更轻松,Maven做到了以下几点:简化构建过程提供了... 查看详情

类加载机制你真的了解吗?(代码片段)

之前在介绍JVM内存模型的时候(参看:了解JVM内存模型),提到了在运行时数据区之前,有个ClassLoader,这个就是类加载器。用以把Class文件中的描述信息加载到内存中运行和使用。以下是《深入理解Java虚拟机第二版》对类加载... 查看详情

你真的了解androidnotification吗?(代码片段)

最近时不时地有人问我这样或那样的通知如何实现,所以本文将根据个人经验对Notification做个总结,以供参考!什么是通知(Notification)通知是一个可以在应用程序正常的用户界面之外显示给用户的消息。通知发出时... 查看详情

你真的了解lateralviewexplode吗?--源码复盘(代码片段)

​这几天情绪真的很down啊,包括写这篇文章的时候,无论如何,希望大家看了这篇文章后,功力能再上涨一层~~用Lateralviewexplode这么久,竟然发现,不是很了解它?Lateralview与UDTF函数一起使用,UDTF... 查看详情

你真的了解cookie和session吗?(代码片段)

我在做面试官的时候,曾经问过很多朋友这个问题:Cookie和Session有什么区别呢?大部分的面试者应该都可以说上一两句,比如:什么是Cookie?什么是Session?两者的区别等。但如果再往深入探讨的话,就慢慢有一些朋友不太了解... 查看详情

requestanimationframe方法你真的用对了吗?(代码片段)

requestAnimationFrame方法让我们可以在下一帧开始时调用指定函数。但是很多人可能不知道,不管三七二十一直接在requestAnimationFrame的回调函数里绘制动画会有一个问题。是什么问题呢?要理解这个问题,我们先要了解requestAnimationFr... 查看详情

15个问题自查你真的了解java编译优化吗?(代码片段)

...,就能理解这个问题了。本文分享自华为云社区《你真的了解java编译优化吗?15个问题考察自己是否理解》,作者:breakDraw。首先提出一个问题,为什么C+ 查看详情

你真的了解asynctask吗?asynctask源码分析(代码片段)

转载请注明出处:http://blog.csdn.net/yianemail/article/details/516113261,概述AndroidUI是线程不安全的,如果想要在子线程很好的访问ui,就要借助Android中的异步消息处理机制http://blog.csdn.net/yianemail/article/details/5023 查看详情