栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

ES箭头函数

ES箭头函数

箭头函数 认识箭头函数
  • 箭头函数结构:const/let 函数名 = (参数)=> { 函数体 }

  • 将普通函数改写为箭头函数

    const add=function(x,y){};
    const add=(x,y)=>{};
    
注意事项
  • 单个参数:可以省略圆括号,无参或多个参数不能省略:const add = x =>{}

  • 单行函数体:可以同时省略{}和return,多行函数体不能再简化:const add = (x,y)=>x+y

  • 单行对象:返回单行对象,可以在{}外加上(),让浏览器不在认为那是函数体的花括号

    const add=x=>{};
    const add=(x,y) => x+y;
    const add=(x,y)=>({value:x+y});
    
不适用箭头函数的场景
  • 作为构造函数
  • 需要this指向调用对象
  • 需要使用arguments时
箭头函数的应用

点击按钮时,从0开始计时


0

const btn = document.getElementById('btn');
const result = document.getElementById('result');


const timer = {
 time: 0,
 start: function () {
   // this
   btn.addEventListener(
     'click',
     () => {
       // this
       setInterval(() => {
         console.log(this);
         this.time++;
         result.innerHTML = this.time;
       }, 1000);
     },
     false
   );
 }
};

timer.start();
this指向问题 全局作用域中的this指向window 一般函数中的this指向
  • 只有在函数调用时this指向才确定
  • this指向和函数在哪调用无关,之和谁在调用有关
  • 没有调用时在严格模式下指向undefined,在非严格模式下转为window
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/457521.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号