ES6箭头函数

最新推荐文章于 2024-02-12 08:00:00 发布

村望老弟

最新推荐文章于 2024-02-12 08:00:00 发布

阅读量137

点赞数

分类专栏： ES6学习

本文链接：https://blog.csdn.net/weixin_42716535/article/details/90481193

版权

ES6学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ES6学习之路请指教

箭头函数

箭头函数

函数之前的写法

var b = function (a) {
        console.log(a)
    }
    b(3)

箭头函数写法

var b = (a) => {
     console.log(a)
    }
    b(3)

箭头函数的简写，
参数一个可选择 “当只有一个参数是，参数的括号可以去掉，也可以不去掉”
没有参数加括号
参数多个逗号分隔（a,b,c）

  var b = a => {
        console.log(a)
    }
  b(3)

箭头函数的隐式返回

var b = a =>  console.log(a)    去掉大括号，然后 执行的放一行，

小tips:
箭头函数是一个匿名函数

箭头函数this理解.

Js中的 this 值是在运行的时候才绑定的

const changhao = {

        name: "changhao",
        
        hobby: ["playgame", "singing", "running"],
        
        age: 21,
        
        printhobbies: function () {
        
        	console.log（this）//此时应该指向的是changhao这个对象
        	
            this.hobby.map (function (hobby) {
            	//这里函数是一个独立的函数，这个this指向 window 这个对象，所以是空的
                console.log(`${this.name}${hobby}`);
                

            })
        }
    }
    changhao.printhobbies() //这里是changhao调用的时候this 绑定 changhao的

输出
：在这里插入图片描述
发现是没有name的

 const changhao = {
 
        name: "changhao",
        
        hobby: ["playgame", "singing", "running"],
        
        age: 21,
        
        printhobbies: function () {
        
            this.hobby.map((hobby) => {
            
                console.log(`${this.name} ${hobby}`);
                

            })       
        }
    }
    changhao.printhobbies()

箭头函数的this值，是指向父级的作用域，

函数参数的默认值

经典写法：

<script>
    let add = function (a, b) {
        a = a || 5;
        b = b || 8;
        return console.log(a + b)
    }
    add()
</script>

输出：
在这里插入图片描述
ES6写法
嘻嘻，边学便用，用到了默认参数，参数简写，隐身返回,

<script>
    let add = (a = 5, b = 8) => console.log(a + b)
    add()
</script>

花式调用哈哈哈

<script>
    let add = (a=5, b = 8) => console.log(a + b)
    add(,b)
</script>

翻车
在这里插入图片描述
更正

<script>
    let add = (a=3, b=5) => console.log(a + b)
    add(undefined,15)
</script>

输出
在这里插入图片描述

箭头函数那么好用，也有一些不适合用的地方

1.作为构造函数

// 箭头函数  构造的person 对象
 let person = (name, age) => {
        this.name = name;
        this.age = age;
    }

//创建 person 实例
过程：1.生成一个新对象 2.构造函数里的this值指向这个新生成的对象 3.把这个对象绑定他的原型对象 4返回新生成对象
  let bill = new person("bill", 20)
   console.log(bill)

在这里插入图片描述
报错，说person 不是一个构造器,因为 箭头函数不存在this值的绑定

这个时候this是指向window的
所以只能使用原来的构造函数方式function

 let person = function (name, age) {
        this.name = name;
        this.age = age;
    }


    let bill = new person("bill", 20)
    console.log(bill)

输出：
在这里插入图片描述
这样就正常的啦
今天把之前用的 prototype 了解了，之前Vue.prototype.axios = axios 不知是什么东西

原来 prototype 属性使您有能力向对象添加属性和方法。

<script>
    let person = function (name, age) {
        this.name = name;
        this.age = age;
    }


    let bill = new person("bill", 20)
    console.log(bill)
    
    person.prototype.money = 2000;
    console.log(bill.money)


</script>

在这里插入图片描述

2.当你真的需要this的时候

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .add {
            animation: my 5s linear infinite alternate;
        }

        @keyframes my {
            0% {
                background-color: aliceblue;
            }

            25% {
                background-color: rgb(7, 33, 56);
                width: 200px;
            }

            50% {
                background-color: rgb(120, 141, 160);
            }

            75% {
                background-color: rgb(41, 145, 15);
            }

            100% {
                background-color: rgb(162, 243, 12);
                width: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>
<script>
    var obox = document.querySelector(".box")

    obox.onclick = () => {
    
        this.classList.add("add")
        
    }


</script>

在这里插入图片描述
还是一样的，箭头函数没有this绑定，箭头函数的this指向外层的也就是window

回归正常写法，这个this 就指向（动态绑定）运行他的那个东西 obox

<script>
    var obox = document.querySelector(".box")

    obox.onclick = function() {
        this.classList.add("add")  //  
    }

</script>

3.需要使用arguments 对象的时候（待补充）

村望老弟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ES6箭头函数

ES6学习之路请指教箭头函数箭头函数的隐式返回箭头函数this理解.函数参数的默认值箭头函数那么好用，也有一些不适合用的地方1.作为构造函数2.当你真的需要this的时候箭头函数函数之前的写法var b = function (a) { console.log(a) } b(3)箭头函数写法var b = (a) => { console...
复制链接

扫一扫

专栏目录