JavaScipt 中 function(){} 和 ()=>{} 区别

Jakcy JavaScript 2021-11-08 46

1,方法体中this变化

// 1
var obj = {
    name:"ABC",
    fun:function(){
        console.log(this);
    }
};
obj.fun();// obj
var fun = obj.fun;
fun();// window
// 2
var obj = {
    name:"ABC",
    fun:()=>{
        console.log(this);
    }
};
obj.fun();// window
var fun = obj.fun;
fun();// window

// 3
function Obj(){
    this.name = "ABC"
    this.fun=()=>{
        console.log(this)
    }
}
var obj = new Obj()
obj.fun();// obj
var fun = obj.fun;
fun();// obj

// 4
function Obj(){
    this.name = "ABC"
    this.fun=function(){
        console.log(this)
    }
} 
var obj = new Obj()
obj.fun();// obj
var fun = obj.fun;
fun();// window

2,方法体中arguments变化


// 1
var obj = {
    name:"ABC",
    fun:function(){
        console.log(arguments);
    }
};
obj.fun(1); // 1
var fun = obj.fun;
fun(1); // 1

// 2
var obj = {
    name:"ABC",
    fun:()=>{
        console.log(arguments);
    }
};
obj.fun(1); // arguments is not defined
var fun = obj.fun;
fun(1); // arguments is not defined

// 3
function Fun(){
    return ()=>{
        console.log(arguments)
    }
}
var fun = Fun(2);
fun(1);// 2
// 4
function Fun(){
    return function(){
        console.log(arguments)
    }
}
var fun = Fun(2);
fun(1);// 1