ECMA6Script学习笔记(三)

最新推荐文章于 2024-11-11 21:32:38 发布

XError＿xiaoyu

最新推荐文章于 2024-11-11 21:32:38 发布

阅读量509

点赞数 7

分类专栏：编程学习专栏 # 前端工程学习文章标签：学习笔记前端 javascript

本文链接：https://blog.csdn.net/weixin_72543266/article/details/140803750

版权

编程学习专栏同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

前端工程学习

14 篇文章 0 订阅

订阅专栏

【摘要】本文是对自己学习ES6的学习笔记回顾,后面是概要: 本文探讨了ES6中箭头函数的特点和使用。箭头函数简化了函数声明。关键特性是它们不绑定自己的this，而是继承自定义时的上下文。文中通过代码示例阐释了this指向问题，并展示了在实际开发中如何通过打印this来理解其指向。本文通过一个HTML页面的点击事件示例，演示了如何使用箭头函数处理事件和this的指向问题，强调了在不同上下文中this的不同
原创声明:文章首发地址:https://bbs.huaweicloud.com/blogs/431971,本文是由本作者在华为云社区的首发后搬运而来,不存在抄袭.

箭头函数

个人比较喜欢在代码中写注释,因此后续的代码和知识点中,很多解释会在代码中以注释的方式存在

使用箭头函数的需要知道的基础知识

 //需要知道的基础知识
        let fun1 = function(){} //普通的函数声明
        let fun2 = ()=>{} //箭头函数的声明 lambda
        let fun3 = (x)=>{return x+1}
        let fun4 = x =>{return x+1} // 参数列表中有且仅有一个参数,()可以省略不写
        let fun5 = x =>console.log(x) //参数列表中 只有一行代码{}可以省略不写
        let fun6 = x => x+1 //方法体中,有且只有一行代码,代码是return返回的结果

箭头函数的this指向问题,箭头函数没有自己的this,箭头函数的this指向的是定义时的this,而不是调用时的this 而箭头函数中的this是外层上下文环境中的this
具体继续往下看,会用代码和示例来进行展示:

console.log(this) //window
       let person = {
           name:'张三',
           showName:function(){
               console.log(this.name) //张三
            },
            VieName:()=>{
                   console.log(this) //window
               }
               
            }
        person.showName() //张三
        person.VieName() //window

通过箭头函数练习理解箭头函数的使用

通过下面的练习来对es6在箭头函数中的使用进解释:其实想要理解和使用其中的箭头函数,记住在es6中箭头函数的this指的不是调用当前函数时的对象,而是上下文中的this,也就是上一层对象,如果无法判断当前this的话,可以跟下面的练习中的做法一样,可以在使用前打印(显示)一下this对象,然后在进行使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数练习</title>
    <style>
      /* 其中这部分是对下面div标签部分进行样式 */
        #xdd{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="xdd"></div>
    <script>
        //谨记箭头函数中的this是外层上下文环境中的this
        var xdd = document.getElementById("xdd");
        xdd.onclick = function(){
            console.log(xdd);
            console.log(this); //xdd
            //进行参数转换
            let _this = this; //将this(xdd)变为变量

            //直接使用this,其中this代表当前对象
            //如果需要使用this代表外层对象,需要做参数转换
            window.setTimeout(function(){
                console.log(this); //window
                console.log(_this); //xdd
                // this.style.backgroundColor = "yellow";
                _this.style.backgroundColor = "yellow";
            },2000);

            //箭头函数使用this,this代表上下文的对象(window的上一层是xdd)
            window.setTimeout(()=>{
                console.log(this); //xdd
                this.style.backgroundColor = "blue";
            },4000);
            
        }
    </script>
</body>
</html>