7.ES6 箭头函数-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

西小口到了吗

1009

文章

614158

访问

+关注

分类

暂无分类

日期归档

2024-11(6)

7.ES6 箭头函数

发布于2021-05-30 13:20 阅读(1687) 评论(0) 点赞(8) 收藏(0)

在es6中，推出了一个新语法箭头函数；

以前定义一个函数，是这么定义的；


let fun=function(){
    console.log('我是箭头函数');
};
fun();

现在可以简化下，用箭头函数：


let fun=()=>{console.log('我是箭头函数')};
fun();

然后假如函数体只有一条语句或者是表达式的时候{}可以省略


let fun=()=>console.log('我是箭头函数');
fun();

加形参情况；


let fun2=(a)=>console.log(a);
fun2('ccc');

只有一个形参的时候 ()可以省略，改成：


let fun2=a=>console.log(a);
fun2('ccc');

多个形参：


let fun3=(x,y)=>console.log(x,y);
fun3(20,30);

有返回值情况：


let fun4=(x,y)=>x+y;
console.log(fun4(1,1));
let fun6=(x,y)=>{
    console.log(x,y);
    return x+y;
}
console.log(fun6(1,3));

关于箭头函数里的this；（重点）

传统写法：


let fun=function(){
    console.log(this);
    console.log('我是箭头函数');
};
fun();

箭头函数：


let fun6=(x,y)=>{
    console.log(this)
    console.log(x,y);
    return x+y;
}
console.log(fun6(1,3));

复杂案例：


let obj={
    name:"jack",
    age:11,
    getname:function () {
        console.log('xxx',this);
        return this.name;
    }
}
console.log(obj.getname());

传统写法：由于是obj调用的，所以它的this就是obj本身；因为this就是obj，所以可以通过this获取name属性

再来看obj的箭头函数写法（外部无函数）：


let obj={
    name:"jack",
    age:11,
    getname:function () {
        console.log('xxx',this);
        return this.name;
    },
    getname2:()=>{
        console.log('yyy',this);
    }
}
console.log(obj.getname2());

再来做一个更详细的案例，用点击事件来监听


<button id="btn">按钮1</button>
<script type="text/javascript">
    let obj={
        name:"jack",
        age:11,
        getname:function () {
            document.getElementById("btn").onclick=function () {
                console.log("按钮："+this)
            }
            return this.name;
        },
        getname2:()=>{
            console.log('yyy',this);
        }
    }
    console.log(obj.getname());
    </script>

点击按钮以后调用的是按钮对象，this也就是它本身，这是传统的方式

再换成箭头函数的方式：


let obj={//3
    name:"jack",
    age:11,
    getname:function () {
        document.getElementById("btn").onclick=function () {
            console.log("按钮："+this)
        }
        return this.name;
    },
    getname2:function(){  //2
        document.getElementById("btn").onclick=()=> {
            console.log(this);  //1
        }
    }
}
console.log(obj.getname2());

点击按钮以后调用的是obj，按标记的顺序来理解:

1是this，它的外部有一个function（不是箭头函数），function所属是obj，所以在定义的时候this就是obj

在上面的基础上增加在obj对象之外参数获取的案例：


var name='mimi'
let obj={
    name:"jack",
    age:11,
    getname:function () {
        document.getElementById("btn").onclick=function () {
            console.log("按钮："+this.name)
        }
        return this.name;
    },
    getname2:()=>{
        document.getElementById("btn").onclick=()=> {
            console.log("测试"+this.name)
        }
    }
}
console.log(obj.getname());

在外部设置了name='mimi'，然后按钮调用getname函数拿到的值是个空

再调用getname2：


var name='mimi'
let obj={
    name:"jack",
    age:11,
    getname:function () {
        document.getElementById("btn").onclick=function () {
            console.log("按钮："+this.name)
        }
        return this.name;
    },
    getname2:()=>{
        document.getElementById("btn").onclick=()=> {
            console.log("测试"+this.name)
        }
    }
}
console.log(obj.getname2());

细心的小伙伴可能发现了为什么不用let来定义name='mimi'，

解释下：let的作用域不像var那么大那里都可以定义，let的的作用域只在块级作用域里有效

总结：

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所在的对象就是它的this

箭头函数的this看外层是否有函数，如果有，外层函数的this就是内部调用箭头函数的this 如果没有，则this是window

完整代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">按钮1</button>
<script type="text/javascript">
    var name='mimi'
    let obj={
        name:"jack",
        age:11,
        getname:function () {
            //console.log('xxx',this);
            document.getElementById("btn").onclick=function () {
                console.log("按钮："+this.name)
            }
            return this.name;
        },
        getname2:()=>{
            document.getElementById("btn").onclick=()=> {
                console.log("测试"+this.name)
            }
            //console.log('yyy',this);
        }
    }
    console.log(obj.getname2());
 
    // let fun=function(){
    //     console.log(this);
    //     console.log('我是箭头函数');
    // };
    // fun();
    //let fun=()=>{console.log('我是箭头函数')};
    // let fun=()=>console.log('我是箭头函数');
    //let fun2=(a)=>console.log(a);
    // let fun2=a=>console.log(a);
    // fun2('ccc');
    // let fun3=(x,y)=>console.log(x,y);
    // fun3(20,30);
    // let fun4=(x,y)=>x+y;
    // console.log(fun4(1,1));
    // let fun6=(x,y)=>{
    //     console.log(this)
    //     console.log(x,y);
    //     return x+y;
    // }
    // console.log(fun6(1,3));
</script>
</body>
</html>

原文链接:https://blog.csdn.net/Stubborn_bull/article/details/117160533

所属网站分类: 技术文章 > 博客

作者：西小口到了吗

链接：http://www.qianduanheidong.com/blog/article/116149/e5230e3a0a6376f0dd0d/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权一经发现必将追究其法律责任

8 0

收藏该文

昵称:

评论内容：(最多支持255个字符)

---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力

程序员的那些事(new)

window属性：controllers

如何用Idea或者webstorm跑一个Vue项目

“我对技术架构的理解与架构师角色的思考” 读后感

程序员狂怒：薪水被应届生倒挂了，很不爽，天王老子也别想留住我！

荐结合论文看Youtube推荐系统中召回和排序的演进之路（中）篇

11个编程接单的网站，你有技术就有收入，有收入就有女朋友《男盆友》

身为程序员——你还不知道这十几个网站？

让微信 8.0 「裂开」「炸弹」的特效代码来了

35岁的程序员：第20章，解脱

在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

全网最详细的nodejs卸载和安装教程

web期末大作业--网页设计 HTML+CSS+JS（附源码）

2024·2025年前端开发的就业现状及前景

基于天地图使用Leaflet.js进行WebGIS开发实战

记录｜C#主界面设计【Web风格】

Roundcube Webmail安装与配置完全指南

Spring Boot Web 应用请求响应太慢故障排查

Markdown 语法大全详解

uniapp前端实现微信支付（小程序、公众号H5、app）

pc端web网站使用第三方微信登录流程（web、js）

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

无法应用 CSS，可能是因为 Bootstrap

不含当前目录的相对路径

是否可以将 HTML 插入 Wix 模板？

使用 html 和 jQuery 动态加载标签，并输入 Java 的输入

无法使输入类型=日期必填

如何使用 VBA 从网络下载表格？

为什么计数器没有增加

子级没有渲染父级的 %height 吗？[重复]

电话号码验证包含 +** ***-***-****（后面加上两位数的国家代码和 10 位数的手机号码）

jQuery Grid css 无法在 .net core 2 中加载

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站