JavaScript中的箭头函数

箭头函数

1.用法

//常规的定义
var func1 = function(a,b){...}
//箭头函数
var func1 = (a,b) => {...}

//常规（函数体中只有一行return代码）
const func2 = function(a,b){return a + b}
//箭头
const func2 = (a,b) => a + b

//常规（参数只有一个）
const func3 = function(a){return a*a }
//箭头（当参数只有一个时，可以省略括号）
const func3 = a => a*a 

2.箭头函数的this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

下面的例子解析：

• setTime1-------this是window

• setTime1-1-------this是window

• setTime1-2使用箭头函数，没有this，所以继承了setTime1中的this

• setTime2使用箭头函数，没有this，所以继承了f1中的this，this值为obj对象

• setTime2-1-------this是window

• setTime2-2 使用箭头函数，没有this，所以继承了setTime2中的this，所以是obj对象

const obj = {
    f1(){
        //this==obj
        //setTime1
        setTime(function(){
            //setTime1-1
            setTime(function(){  
                console.log(this);   //window（自身的）
            })
            
            
            //setTime1-2
            setTime(()=>{
                console.log(this);   //window（继承于setTime1）
            })
        })
       
        
        
        
        
        
        //setTime2
         setTime(()=>{
            //setTime2-1
            setTime(function(){
                console.log(this);  //window（自身的）
            })
            
            
            //setTime2-2
            setTime(()=>{
                console.log(this);  //object（继承于setTime2，而setTime2继承于f1函数，所以等于object）
            })
        })
        

    }
}