ES6-箭头函数以及声明特点

最新推荐文章于 2022-11-23 10:12:41 发布

yrfjygb

最新推荐文章于 2022-11-23 10:12:41 发布

阅读量84

点赞数

分类专栏： ESx

本文链接：https://blog.csdn.net/yrfjygb/article/details/115031951

版权

ESx 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.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>Document</title>
<body>
    <script>
        // 1. this是静态的
        function getName(){
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }
        window.name = 'zs';
        let obj = {
            name: 'ls'
        }
        // 1.1 直接调用
        getName() // zs
        getName2() // zs
        
        // 1.2 call方法直接调用 call 方法改变this的指向
        getName.call(obj) // ls
        getName2.call(obj) // zs
    </script>
</body>
</html>

2.不能作为构造实例化对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<body>
    <script>
        // 2. 不能作为构造实例化对象
        let Person = (name,age) => {
            this.name = name
            this.age =age
        }
        let me = new Person('xiao',30)
        console.log(me);
        
    </script>
</body>
</html>

2.1 报错

在这里插入图片描述

3.不能使用 arguments 变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<body>
    <script>
        // 3.不能使用 arguments 变量
        let Fn = () => {
            console.log(arguments);
        }
        Fn(1,2,3)
    </script>
</body>
</html>

3.1 报错

在这里插入图片描述

4. 箭头函数的简写

4.1 省略小括号，当形参有且只有一个的时候

4.2 省略花括号，当代码只有一条语句的时候，此时 return必须省略,而且语句的执行结果就是函数的返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<body>
    <script>
        // 4. 箭头函数的简写
        // 4.1 省略小括号，当形参有且只有一个的时候
        let add = n => {
            return n+n
        }
        const rs = add(2,2)
        console.log(rs);
        
        // 4.2 省略花括号，当代码只有一条语句的时候，此时 return必须省略
        // 而且语句的执行结果就是函数的返回值
        let pow = n => n*n
        const result = pow(3)
        console.log(result);
        
    </script>
</body>
</html>

4.3 结果

在这里插入图片描述

yrfjygb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6-箭头函数以及声明特点

1.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>Document</title><body&
复制链接

扫一扫

专栏目录