java1234开源博客系统
博客信息

es6箭头函数

0
发布时间:『 2019-06-10 23:15』  博客类别:Vue.js  阅读(2251) 评论(0)

在es6中,推出了一个新语法 箭头函数;


以前定义一个函数,是这么定义的;

let fun=function(){

console.log('我是箭头函数');

};


现在可以简化下,用箭头函数:

let fun=()=>{console.log('我是箭头函数')};

然后假如函数体只有一条语句或者是表达式的时候{}可以省略

let fun=()=>console.log('我是箭头函数');


加形参情况;

let fun2=(a)=>console.log(a);

只有一个形参的时候 ()可以省略

改成:

let fun2=a=>console.log(a);


多个形参:

let fun3=(x,y)=>console.log(x,y);

fun3(20,30);


有返回值情况:

let fun6=(x,y)=>{

console.log(x,y);

return x+y;

}

console.log(fun6(1,3));


关于 箭头函数里的this;(重点)

箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是再定义的时候所在的对象就是它的this

箭头函数的this看外层是否有函数,

如果有,外层函数的this就是内部调用箭头函数的this 

如果没有,则this是window

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
    let btn1=document.getElementById('btn1');
    let btn2=document.getElementById('btn2');

    btn1.onclick=function(){
        alert(this);
    };
    btn2.onclick=()=>{
        alert(this);
    }
</script>
</body>
</html>



QQ鎴浘20190610222035.jpg



可以看出 点击 按钮1 这里的this是 调用的时候的btn1对象;

而点击按钮,this是window对象;


再来个复杂点的实例,来深入理解下:

箭头函数搞到定义对象的回调函数里;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script type="text/javascript">
    let btn1=document.getElementById('btn1');
    let btn2=document.getElementById('btn2');

    let person1={
        name:'jack',
        getName:function(){
            btn1.onclick=()=>{
                console.log(this);
            }
        }
    }
    person1.getName();

    let person2={
        name:'Marry',
        getName:function(){
            btn2.onclick=function(){
                console.log(this)
            }
        }
    }
    person2.getName();
</script>
</body>
</html>

22.jpg

因为箭头函数是定义再对象的回调方法里,所以这里的this是person1;



关键字:   es6     箭头函数  

上一篇:es6 模版字符串

下一篇:es6三点运算符

关注Java1234微信公众号
博主信息
Java1234_小锋
(知识改变命运,技术改变世界)
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有