es6箭头函数_Java开源博客系统-Powered by java1234

博客信息

es6箭头函数

发布时间：『 2019-06-10 23:15』博客类别：Vue.js 阅读(2582) 评论(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>

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

关键字： es6 箭头函数

上一篇：es6 模版字符串

下一篇：es6三点运算符

关注Java1234微信公众号

博主信息

Java1234_小锋

(知识改变命运，技术改变世界)

按日志类别

按日志日期

友情链接