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开始计时

<button id="btn">开始</button>
<span id="result">0</span>

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