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

箭头函数

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

语法规则

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