WS6--箭头函数和箭头函数的this

原js函数写法

 function sum(a,b){
       return a+b;
   }
  sum(1,2) 

箭头函数的写法

const sum=(a,b)=>{
   return a+b;
 }
let res=sum(1,2);
console.log(res);//3

箭头函数简写

代码块只有一句话省略{}和return

const sum=(a,b)=>a+b;
let res=sum(1,2);
console.log(res);//3

只有一个参数  小括号可以省略

const sum =a => a+3;
let res = sum(1);
console.log(res);//4



 const sum= ()=>3;
 let res=sum()
 console.log(res);//3

箭头函数的this

一：全局函数下的this

普通函数this 跟调用者有关系

function global(){
   console.log(this)
}
global();

箭头函数的this 箭头函数this this是静态 根据上下文的this

const global=()=>{
   console.log(this)
} 
global();

二：对象方法里面的this

const Person={
  realname:"张三",age:19,
  say:function(){
         console.log(this)
  }
}
Person.say(); //Person实例

对象箭头函数的this

const Person ={
   realname:"张三",age:19,
   say:()=>{
     console.log(this)
  }
}
Person.say(); //window

三：构造函数的this  构造函数的this就是当前实例

 箭头函数的this 一旦定义了就不允许改变

function Person(realname,age)
  thih.realname=realname;
  this.age=age;
  this.say=()=>{
      console.log(this); //这个this不会 当时 实例是谁就是谁
 }
  this.say1=function(){
    console.log(this);
  }
}
const P1=new Person("张三"，19);
const P2=new Person("李四"，20);

P1.say.call(P2)

P1.say1.call(P2)

P1.say1.bind(P2)()

箭头函数的应用

单击按钮2s后改变按钮文字：按钮被点击，在单击按钮改变文字：点击被取消。

<button id="btn">未点击</button>
    <script>
        let btnobj=document.querySelector('#btn');
        let flag=false;

        btnobj.addEventListener('click',function(){
            flag =!flag;

            if(flag){
                setInterval(()=>{
                    console.log(this);
                    this.innerText='已点击'
                },2000)
            }else{
                this.innerText='未点击';
            }
        })
    </script>