原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>