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

本站消息

站长简介/公众号

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

西小口到了吗

1003

文章

599685

访问

+关注

分类

暂无分类

日期归档

2023-05(4)

2023-06(4)

7.ES6 箭头函数

发布于2021-05-30 13:20 阅读(1488) 评论(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>