箭头函数改变this指向

1.箭头函数

<div>我是div</div><script>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) )//click { target: div, buttons: 0, clientX: 47, clientY: 20, layerX: 47, layerY: 20 } </script>

2. 箭头函数中的this指向

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

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

<body><div>1234</div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script> // 复习this指向 // 普通函数的this指向// 声明式,赋值式/匿名函数,对象中函数,绑定的事件处理函数// this都是指向的调用函数时,之前定义的内容// 1,声明式 --- 指向的是windowfunction fun1(){console.log(this); //Window }fun1();// 2,匿名函数/赋值式 --- 指向的是windowconst fun2 = function(){console.log(this);    //Window }fun2();// 3,定义在对象中的函数 --- 指向的是对象const obj = { fun3 : function(){console.log(this);   //Object { fun3: fun3() }}}obj.fun3();// 4,绑定的事件处理函数 --- 指向的是绑定事件处理函数的标签const oDiv = document.querySelector('div');oDiv.onclick = function(){console.log(this); //<div>}oDiv.addEventListener('click' , function(){console.log(this);   //<div>})// 箭头函数的tihs指向// 与普通函数的this指向是有区别的// 箭头函数中,this的指向是父级程序的this指向// 当前的程序,箭头函数的父级程序,没有// this指向的就是windowoDiv.addEventListener('click' , ()=>{console.log(this);   //window})// 对li进行操作const oLis = document.querySelectorAll('li');oLis.forEach(function(item,key){console.log(this);  // 输出的是forEach的函数的this指向// 箭头函数的this,是父级程序,forEach()的this,是windowitem.addEventListener('click' , ()=>{console.log(key,this);//0--4 window})})// forEach()中 函数的this指向,就是windowconst arr = [1,2,3,4,5,6];arr.forEach(function(){console.log(this); //window})const obj = {// 普通函数,this指向对象fun1 : function(){console.log(this)},// 箭头函数this指向是,父级程序// 父级程序是对象// 只有函数有this,obj对象没有this// 父级程序没有this,指向的是windowfun2 : ()=>{console.log(this)},// fun3是一个普通函数,this指向的是obj对象fun3 : function(){// fun4,是一个箭头函数,this指向的是父级程序的this指向// 父级程序是fun3,fun3的this是对象,fun4箭头函数的this也是对象const fun4 = ()=>{console.log(this)};fun4();}}obj.fun1(); //Object { fun1: fun1(), fun2: fun2(), fun3: fun3() }obj.fun2();    //Window obj.fun3();    //Object { fun1: fun1(), fun2: fun2(), fun3: fun3() }</script>

关于this的总结

普通的function函数
声明式 — window
赋值式 — window
forEach循环 — window
定时器,延时器 — window
对象中的函数 — 对象本身
事件绑定事件处理函数 — 绑定事件的标签
箭头函数的this指向
父级程序的this指向
如果父级程序有this指向(父级程序也是函数),this指向的就是父级程序的this指向
如果父级程序没有this指向(数组,对象…),this指向的是window

3.改变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指向的是这个对象,obj2obj2.fun2();    //Object { name: "李四", fun2: fun2() }// 改变this指向,指向的是obj1这个对象// 代用,并且执行fun2这个函数,同时将fun2的this指向,从原始的obj2,改变为obj1obj2.fun2.call(obj1);  //Object { name: "张三", age: 18, sex: "男" }// 带有参数的函数,this指向的改变// 定义的带有参数的普通函数function fun3(name,age,sex){console.log(name,age,sex,this);}// 执行时,输出实参,此时this指向是windowfun3('张三',18,'男');  //张三 18 男  window// 改变this指向 , call方法
fun3.call(obj1,'李四',20,'女');    //李四 20 女  Object { name: "张三", age: 18, sex: "男" }// 改变this指向 , apply方法
fun3.apply(obj1 , [ '王五' , 20 , '不知道' ])    //王五 20 不知道  Object { name: "张三", age: 18, sex: "男" }// bind方法,不是立即执行函数,而是定义生成一个新的函数// 新生成的函数,this指向是参数1// 新生成的函数,形参是原始函数fun3的形参const fun4 = fun3.bind(obj1);fun4('王二麻子' , 100 , '不详');    //王二麻子 100 不详  Object { name: "张三", age: 18, sex: "男" }

4. 立即执行函数

立即执行函数
在定义函数的同时,立即执行这个函数
语法:
( 封装的函数 ) ( )
! 封装的函数 ( )
~ 封装的函数 ( )
这三种语法没有区别,爱用哪个用那个
立即执行定义的函数,不是真正的在定义声明函数
立即执行之后,无法再次被正常的调用
具体使用方法,要到闭包的时候使用

        // 定义函数function fun(){console.log(123)}// 调用函数fun(); // 立即执行,在定义的同时,立即执行函数( function fun1(){console.log(123)} )()// 立即执行函数,并没有真正的定义真个函数// 没有办法正常的再次调用这个函数// fun1();!function fun1(){console.log(123)}()~function fun1(){console.log(123)}()

5. 解构数组语法

数组的解构语法
就是数组的另一种使用调用方法
可以不通过 [ ]语法,不通过索引下标,来调用使用数组中的数据
用于将数组中的数据,一一对应的赋值给变量

        const arr = ['北京','上海','广州','重庆','天津'];// 之前使用数组的数据,必须通过[]语法和索引下标// let str1 = arr[0];// let str2 = arr[1];// let str3 = arr[2];// let str4 = arr[3];// let str5 = arr[4];// 将 arr 中的数据,调用出来,给 左侧内容进行一一对应的赋值let [str1,str2,str3,str4,str5] = arr;console.log(str1,str2,str3,str4,str5);// 结构多层的数组// 二维数组const arr2 = ['北京','上海',['a','b','c']];// s1对应北京,s2,对应上海,s3,对应['a','b','c']// let [s1,s2,s3] = arr2// 接续把 s3 对应的数组  ['a','b','c'] 解析// s1对应北京,s2对应上海,[]对应['a','b','c']// s3对应a s4对应b s5对应clet [s1,s2,[s3,s4,s5]] = arr2console.log(s1,s2,s3,s4,s5);

6. 对象的解构

对象的解构
之前对象数据的调用,通过.语法或者[]语法,配合属性来调用操作数据
现在可以使用解构语法来调用操作数据

        const obj = {name:'张三',age:18,sex:'男',addr:'北京',phone:123456,}// 之前调用数据// let str1 = obj.name;// 解构语法// 将对象中,属性是name的属性值,调用,赋值给name变量名称// {}中定义的属性,一定是对象中具有的属性// 变量名称,就是name也就是属性名称// let {name} = obj;// console.log(name);// 解构语法之定义其他名称// 在对象obj中,找name属性,将对应的数值数据,赋值给变量别名userName// 通过userName来调用使用数据// 只能一次解构一个数据,不能一次性的做一一对应的赋值// let {phone:userName} = obj;// console.log(userName);// 多级对象的解构const obj2 = {name1:{name2:'张三'}}// let {name1 : {name2}} = obj2;let {name1 : {name2:userName}} = obj2;console.log(userName); // 只有name2解构对应张三,name1没有内容// console.log(name1); // 如果只是 let {name1} = obj2// name1存储的是 对象 {name2:'张三'}

7. 展开运算符

展开运算符
…数组
将数组中的数据,展开来使用
在函数的实参中使用

        // 有多个形参function fun(num1,num2,num3,num4,num5){console.log(num1,num2,num3,num4,num5)}// 执行时就要输入多个实参fun(100,200,300,400,500);// 现在有一个数组,存储多个数据const arr = [1,2,3,4,5];fun(arr[0],arr[1],arr[2],arr[3],arr[4]);// 展开运算符,将数组中的数据展开使用// 将arr中的数据,展开,对形参进行一一对应的赋值// 通过数组,给多个形参赋值更简单fun(...arr);

8. 合并运算符

合并运算符
…
在函数的形参中使用
作用:将赋值的所有的实参,都是以数组的形式,存储在形参中

       // 只有一个形参,形参只能存储一个实参 function fun(arr){console.log(arr);}// 即时输入多个参数,只有一个形参,也只能存储第一个实参fun('a','b','c','d');// 合并运算符// 不管实参有几个,都以数组的形式,存储在形参中function fun1(...arr){console.log(arr);// 调用存储在形参arr中的实参,必须用过[]语法,索引下标// 或者 循环遍历 获取}// 输入的所有的实参,都会以数组的数据的形式,存储在形参arr中fun1('a','b','c','d','e',1,2,3,4,5);// 在 普通函数中,JavaScript定义了一个专门的变量,叫 arguments// 如果你没有定义形参,所有的实参都会以数组的形式存储在这个变量中// 作用于合并运算符相同// 但是 箭头函数中 没有 arguments 这个变量// 必须使用 ...形参 合并运算符的形式 来存储实参// 没有形参,JavaScript自动在arguments中,以数组的形式存储实参function fun3(){console.log(arguments);}fun3(1,2,3,4,5,6,7);// 箭头函数没有arguments,会报错// 只能使用 合并运算符 ...形参// const fun4 = ()=>{//     console.log(arguments);// }// fun4(1,2,3,4,5);const fun5 = (...arr)=>{console.log(arr);}fun5(1,2,3,4,5);