前端笔记5——箭头函数笔记

最新推荐文章于 2024-07-31 16:33:32 发布

Shaoxi Zhang

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量1.2k

点赞数

分类专栏： VUE Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42844704/article/details/123717058

版权

Javascript 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

VUE

5 篇文章 0 订阅

订阅专栏

          参考文章链接：[https://blog.csdn.net/qq_32614411/article/details/80897256](https://blog.csdn.net/qq_32614411/article/details/80897256)

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
//一、语法问题

        //使用ES6箭头函数语法定义函数，将原函数的“function”关键字
        //和函数名都删掉，并使用“=>”连接参数列表和函数体。

        function fun1() {
            return 100;
        }
        const fun2 = function () {
            return 102;
        }
        fun8 = function () {
            return 102;
        }
        var fun8
        //使用箭头函数写法
        const fun3 = () => {
            return 103;
        }
        const fun4 = (a, b) => {
            return a + b;
        }

        //箭头函数不带return
        const fun5 = () => 106

        console.log('fun1=', fun1());
        console.log('fun2=', fun2());
        console.log('fun3=', fun3());
        console.log('fun4=', fun4(3, 5));
        console.log('fun5=', fun5());


//二、箭头函数没有argument
        function test1(a, b) {
            console.log('arguments', arguments)
        }
        test1(1, 2, 3)
        let test2 = () => {
            console.log('arguments1', arguments)
        }
        test2(1, 2, 3)


//三、箭头函数this的指向问题
        let obj = {
            name: "小明",
            age: 2,
            sayName() {
                //console.log(`我是${this.name}`)
                console.log("1.我是" + this.name);

                setTimeout(function f1() {
                    console.log("2.我是" + this.name);
                    console.log(this);
                }, 500)

                setTimeout(() => {
                    console.log("3.我是" + this.name);
                    console.log(this);
                }, 500)


            }
        }

        obj.sayName();
    </script>
</body>
</html>

小结1：
箭头函数语法两个特点：
1.如果只有一个参数，可以不写括号();如果没有参数时，括号()不能省略；
2.{}中写函数体，如果函数体中只有返回值，可以不写return.
参考：https://blog.csdn.net/qq_32614411/article/details/80897256
疑问：
1.
(a, b) => {
return a + b
}
没有函数名的箭头函数有什么意义？
2.fun1和fun2有什么区别吗？
fun1会变量提升（预解析），fun2不会。

        小结2：普通函数和箭头函数指向不同，普通函数指向调用它的那个对象（谁调用普通函数，普通函数就指向谁），
        箭头函数指向词法作用域的对象，箭头函数内部的this是词法作用域，由上下文确定。
        换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的
    
        1。this指向，普通函数的this是指向调用它的对象,a.b(),b函数里面的this就是a，c(),c里面的this就是指向window,
        2。function (a) {...}     a=>{}   a=>2*a   a=>({a:1})
        3。它不能当作构造函数执行
        4。它没有arguments
    
        function A(){
    
            let obj={}
            this=obj
    
            this.aa=1;
            this.bb=2;
    
            // return obj
            return {aa:4}
        }
        
        let a=new A()
    
        
    
        a={
            aa:1,
            bb:2
        }
    
        let B=()=>{
            this.aa=1;
            this.bb=2;
        }
    
        4.它没有argument

Shaoxi Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记5——箭头函数笔记

参考文章链接：[https://blog.csdn.net/qq_32614411/article/details/80897256](https://blog.csdn.net/qq_32614411/article/details/80897256) 代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http...
复制链接

扫一扫

专栏目录