JavaScript中的箭头函数

所谓的箭头函数，是函数的另一种语法形式。将匿名函数的部分，从 function(){} 写成 ()=>{} 的形式
const fun = function(){} 普通函数
const fun = ()=>{} 箭头函数

如果函数只有一个参数，可以不写()
const fun = function(e){} 普通函数
const fun = e =>{} 箭头函数

如果执行体中只有一行代码，可以不写{}
const fun = e =>{console.log(e)} 普通箭头函数
const fun = e => console.log(e) 不写{}箭头函数

const oDiv = document.querySelector('div');

        // 普通函数
oDiv.addEventListener('click' , function(){
console.log('我是div标签')
})

        // 箭头函数
oDiv.addEventListener('click' , ()=>{
console.log('我是div标签');
})

        // 只有一个参数，可以不写()，直接定义一个参数
oDiv.addEventListener('click' , e=>{
console.log(e);
})

        // 只有一行代码，可以不写{}
oDiv.addEventListener('click' , e=>console.log(e) )

箭头函数中的this指向：
在箭头函数中，this指向父级程序的this指向
如果父级程序有this指向，那么箭头函数指向的就是父级程序的this
如果父级程序没有this指向，那么指向的就是window

普通函数的this指向：
声明式，赋值式/匿名函数，对象中函数，绑定的事件处理函数，this都是指向调用函数时之前定义的内容
①声明式 — 指向的是window

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

②匿名函数/赋值式 — 指向的是window

const fun2 = function(){
console.log(this);
}
fun2();

③定义在对象中的函数 — 指向的是对象

const obj = { 
fun3 : function(){
console.log(this);
}
}
obj.fun3();

④绑定的事件处理函数 — 指向的是绑定事件处理函数的标签

const oDiv = document.querySelector('div');
oDiv.onclick = function(){
console.log(this);
}

//oDiv.addEventListener('click' , function(){
//console.log(this);
//})

箭头函数的this指向与普通函数的this指向是有区别的
箭头函数中，this的指向是父级程序的this指向当前的程序，箭头函数的父级程序没有this指向的就是window

const oDiv = document.querySelector('div');
oDiv.addEventListener('click' , ()=>{
console.log(this);
})

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
<script>
// 对li进行操作
const oLis = document.querySelectorAll('li');
oLis.forEach(function(item,key){
console.log(this);  // 输出的是forEach的函数的this指向

// 箭头函数的this是父级程序forEach()的this,是window
item.addEventListener('click' , ()=>{
console.log(key,this);
})
})
</script>

 const obj = {
            // 普通函数this指向对象
            fun1 : function(){console.log(this)}
            
            // 箭头函数this指向是父级程序,父级程序是对象。只有函数有this,obj对象没有this，父级程序没有this，指向的是window
            fun2 : ()=>{console.log(this)},

            // fun3是一个普通函数,this指向的是obj对象
            fun3 : function(){
               
                // fun4是一个箭头函数，this指向的是父级程序的this指向
                // 父级程序是fun3，fun3的this是对象，fun4箭头函数的this也是对象
                const fun4 = ()=>{console.log(this)};
                fun4();
            }
        }
        obj.fun1();
        obj.fun2();
        obj.fun3();

关于this的总结：
普通的function函数
声明式 — window
赋值式 — window
forEach循环 — window
定时器，延时器 — window
对象中的函数 — 对象本身
事件绑定事件处理函数 — 绑定事件的标签

箭头函数的this指向：父级程序的this指向
如果父级程序有this指向(父级程序也是函数)，this指向的就是父级程序的this指向
如果父级程序没有this指向(数组,对象…)，this指向的是window

改变this指向：
箭头函数不能改变this指向，只有普通function函数能改变this指向
①call()方法
语法：函数.call(参数1,其他参数…可以是多个或者没有 )
作用：调用并且执行函数，同时将函数的this指向定义为指定的内容(参数1)
参数1是改变的this的指向
其他参数是原始函数的实参，原始函数有几个形参，此时就要对应的输入几个实参。没有形参就没有实参
②apply()方法
语法: 函数.apply(参数1,参数2) 只有两个参数
参数1：改变的this的指向内容
参数2：原始函数的实参必须是一个数组的形式，将实参定义成数组的单元
其他用法和作用与call是相同的
③bind()方法
语法: const 变量 = 函数.bind(参数1);
不是立即执行函数
生成一个新的函数，这个新的函数是改变this指向之后的新的函数
参数1定义的要改变的的this指向
其他参数一般不定义，使用函数原有的形参

总结： call方法与apply方法作用效果都是完全一致的，只是对于原始函数的参数赋值方法不同。call方法是通过其他多个参数来实现，apply方法是通过一个数组参数来实现。两个方法没有本质的区别，爱用哪个用那个
call方法与apply方法都是立即执行函数，参数1都是改变的this指向，其他参数是原始函数的形参(可以有，也可以没有)
bind不是立即执行函数，是生成一个新的函数。参数1是改变的this指向，就使用原始函数的形参

const obj1 = {
            name:'张三',
            age:18,
            sex:'男',
        }
const obj2 = {
            name:'李四',
            fun2 : function(){
                console.log(this);
            }
        }
        // 对象中的函数this指向的是这个对象，obj2
        obj2.fun2();
        // 改变this指向，指向的是obj1这个对象
        // 代用，并且执行fun2这个函数，同时将fun2的this指向从原始的obj2改变为obj1
         obj2.fun2.call(obj1);
         
        // 带有参数的函数this指向的改变
        // 定义的带有参数的普通函数
        function fun3(name,age,sex){
        console.log(name,age,sex,this);
        }
        // 执行时输出实参，此时this指向是window
        fun3('张三',18,'男');

        // 改变this指向，call方法
        fun3.call(obj1,'李四',20,'女');

        // 改变this指向，apply方法
        fun3.apply(obj1 , [ '王五' , 20 , '不知道' ])

        const fun4 = fun3.bind(obj1);
        fun4('王二麻子' , 100 , '不详');