JavaScript ES6语法之箭头函数及其this指向问题

墨蓝 2023-07-24 08:12 3阅读 0赞

# 箭头函数 #

所谓的箭头函数是函数的另一种语法形式。

### 语法规则 ###

const fun = function(){}     普通函数
    const fun = ()=>{}           箭头函数
    将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式

##### 实例 #####

<div>我是div</div>
    <script> const oDiv = document.querySelector('div'); // 普通函数 oDiv.addEventListener('click' , function(){ console.log('我是div标签') }); // 箭头函数 oDiv.addEventListener('click' , ()=>{ console.log('我是div标签'); }); </script>

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

##### 实例 #####

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

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

##### 实例 #####

<div>我是div</div>
    <script> // 只有一行代码,不写{} oDiv.addEventListener('click' , e=>console.log(e) ) </script>

# 箭头函数中的this指向 #

在箭头函数中,this指向有特殊的意义，专门可以用来配合构造函数和面向对象编程思想。

### 规则 ###

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

### 普通函数的this指向 ###

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

##### 实例 #####

<div>1234</div>
    <script> // 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); }); </script>

### 箭头函数的tihs指向 ###

**与普通函数的this指向是有区别的  
箭头函数中，this的指向是父级程序的this指向**

##### 实例 #####

<div>1234</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script> const oDiv = document.querySelector('div'); // 当前的程序,，箭头函数的父级程序，没有 // 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(); </script>

### 关于this的总结 ###

1，普通的function函数
     		声明式 --- window
     		赋值式 --- window
     		forEach循环 --- window
     		定时器，延时器 --- window
     		对象中的函数 --- 对象本身
     		事件绑定事件处理函数 --- 绑定事件的标签
    
    2，箭头函数的this指向
     		父级程序的this指向
     		如果父级程序有this指向(父级程序也是函数)，this指向的就是父级程序的this指向
     		如果父级程序没有this指向(数组,对象....)，this指向的是window
     		
    注意：箭头函数，不能改变this指向，只有普通function函数，能改变this指向。