JS-箭头函数及其this的指向和改变this指向（call apply bind）

2,箭头函数
    function(){}        ---   ()=>{}     箭头函数
    function(e){}       ---   e =>{}     箭头函数
    function(){一行}    ---   ()=>一行    箭头函数
    function(e){一行}   ---   e =>一行    箭头函数

    特点:1,this指向与一般的function函数不同
        声明式  function fun(){}           this指向,window
        赋值式  var fun = function(){}     this指向,window
        forEach()循环                      this指向,window
        定时器,延时器  setInterval(function(){} , 时间)
                                            this指向,window
        对象中的函数 const obj = {fun:function(){}}
                                            this指向,obj对象
        事件处理函数 标签.addEventListener(事件类型,function(){})
                                            this指向,标签对象
                                        
        箭头函数的this指向,是父级程序的this指向
            如果父级程序有this指向,指向向的就是父级程序的this指向
            如果父级程序没有this指向(对象,数组是没有this),指向的是window
        
        2,箭头函数,无法改变this指向

3,改变this指向
    函数.call(参数1,其他参数...)
        立即执行函数,并且改变函数的this指向为参数1表示的内容
        其他参数,是原始函数的实参,多个实参使用逗号间隔
    函数.apply(参数1,[数组参数])
        立即执行函数,并且改变函数的this指向为参数1表示的内容
        数组参数,是原始函数的参数,多个参数以数组的单元的形式存储
    函数.bind(参数1)
        不会立即执行函数,而是生成一个新的函数
        新函数,参数,程序内容,都与原始函数相同
        只是this改变为参数1表示的内容

一.箭头函数

<div>我是divdiv>

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

如果函数只有一个参数,可以不写()
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指向

<div>1234div>
<ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
ul>

箭头函数中的this指向
为什么要有箭头函数?
是为了配合明天要讲的面向对象和构造函数
在箭头函数中,this指向有特殊的意义,专门可以用来配合构造函数和面向对象编程思想

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

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

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

复习this指向

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

1,声明式 --- 指向的是window
function fun1(){
    console.log(this);
}

fun1();

2,匿名函数/赋值式 --- 指向的是window
const fun2 = function(){
    console.log(this);
}
fun2();

3,定义在对象中的函数 --- 指向的是对象
const obj = { 
    fun3 : function(){
        console.log(this);
    }
}
obj.fun3();

4,绑定的事件处理函数 --- 指向的是绑定事件处理函数的标签
const oDiv = document.querySelector('div');
// oDiv.onclick = function(){
//     console.log(this);
// }

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


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

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

// 对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);
    })
})

forEach()中 函数的this指向,就是window
const arr = [1,2,3,4,5,6];
arr.forEach(function(){
    console.log(this);
})


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指向

重点:箭头函数,不能改变this指向,只有普通function函数,能改变this指向

改变this指向的方法

1, call()方法
语法: 函数.call(参数1,其他参数....可以是多个或者没有 )
作用: 调用并且执行函数,同时,将函数的this指向,定义为指定的内容(参数1)
        参数1,是改变的this的指向
        其他参数,是原始函数的实参,原始函数有几个形参,此时就要对应的输入几个实参,没有形参,就没有实参

2, apply()方法
语法: 函数.apply(参数1,参数2)  只有两个参数
        参数1:改变的this的指向内容
        参数2:原始函数的实参,必须是一个数组的形式,将实参定义成数组的单元
其他用法和作用于 .call是相同的

总结: call方法与apply方法,作用,效果,都是完全一致的
        只是对于原始函数的参数赋值方法,不同
        call方法是通过其他多个参数来实现
        apply方法是通过一个数组参数,来实现
        两个方法没有本质的区别,爱用哪个用那个

3, bind()方法
语法: const 变量 = 函数.bind(参数1);
不是立即执行函数（下一篇博客有介绍 立即执行函数）
生成一个新的函数,这个新的函数是改变this指向之后的新的函数
参数1,定义的要改变的的this指向
其他参数,一般不定义,是使用函数原有的形参

总结:
    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 , '不知道' ])

// bind方法,不是立即执行函数,而是定义生成一个新的函数
// 新生成的函数,this指向是参数1
// 新生成的函数,形参是原始函数fun3的形参
const fun4 = fun3.bind(obj1);

fun4('王二麻子' , 100 , '不详');

四.注意事项特别说明

面向对象和面向过程

从面向过程,改造成面向对象
1,获取的数据,标签对象,要以参数的形式,定义给构造函数和实例化对象
    获取标签对象时,一般获取父级,传参父级,在构造函数中,通过父级标签,获取子级标签独享
2,必须非常非常非常注意 this的指向,一般在面向对象中 都是使用箭头函数
    如果万一不能清楚地知道this指向,可以先输出 this
3,其他步骤和思路基本相同,没有区别

总结:
1,改不改箭头函数,看内部是否需要 指向实例化对象的this 
    如果需要,可以改箭头函数,或者是提前存储this指向
    如果不许需要,改不改箭头函数都行
    一切以实现程序为最终需求,程序能执行就可以
2,之前面向过程的是参数,数据等,
    现在是面向对象编程,要在对象的属性中,定义参数数据
    也就是通过 构造函数 this.属性 = 属性值 语法来定义需要获取的参数数据
3,定义在构造函数方法中的一些变量数据,并不是定义在实例化对象中的属性
    没有必须写成 this.属性 = 属性值 的形式
    只要写成普通的变量定义即可 
    使用时,也是直接使用变量,不需要添加this
4,在构造函数的方法中,调用其他的函数方法
    语法形式 应该是 实例化对象.函数方法名称()
    在构造函数中,使用this来指向实例化对象,写成 this.函数方法名称()