JS-箭头函数和普通函数区别

箭头函数和普通函数区别

//传统js函数
funtcion print(a{
    console.log("hello js");
}

//函数表达式(匿名函数)
var print=function(){
    console.log("hello js");
}

//箭头函数
let print=()=>{
    console.log("hello js");   
}

区别一：函数名提升

showName();  //name
function showName(){
    console.log("name");
}
//传统js函数有函数名提升

showName1();  // Cannot access 'showName1' before initialization
let showName1=()=>{
    console.log("name1");
}
//箭头函数无函数名提升

原因：let定义的东西无提升

区别二：this指向不同

function showName(){
    console.log(this);
}
showName();  //window
let obj={
    showName:showName
}
obj.showName();  //obj
//传统js函数this指向随着使用环境不停发生改变


let showName1=()=>{
    console.log(this);
}
showName1();  //window
let obj={
    showName1:showName1
}
obj.showName1();  //window
//箭头函数this指向是静态的，始终指向声明时的作用域

区别三：构造函数创建对象

function Student(name,age){
    this.name=name,
    this.age=age
}
let stu=new Student();
//传统js函数可以利用构造函数创建对象


let Student1=(name,age)>={
    this.name=name,
    this.age=age
}
let stu1=new Student();  //报错
//箭头函数不可以利用构造函数创建对象

原因：可以联系实例化对象时new做了以下三步操作进行分析，

1.创建一个空对象
2.让构造函数中的this指向了空对象
3.将空对象返回出去

在第二步中，由于箭头函数this始终指向声明时的作用域，无法改变，所以new不起作用

区别四：参数arguments

function sum(){
    let s=0;
    for(let n=0;n<arguments.length;n++){
        s+=arguments[n];
    }
    return s;
}
let x=sum(1,2,3,4,5,7,8);
console.log(x);  //30
//传统js函数可以使用arguments保存参数集合


let sum=()=>{
    console.log(arguments);
}
sum(1,2,3,4,5);  //Uncaught ReferenceError: arguments is not defined
//箭头函数没有arguments,箭头函数用rest保存参数
function showName(...args){
    console.log(args);
}
showName("w","j","h");  //(3) ["w", "j", "h"]

补充：箭头函数简写方式

//1.省略小括号，如果有且只有一个参数的时候
//2.省略花括号和return，如果有且仅有一条语句并且是return语句
let pow=(n)=>{
    return n*n;
}
//简写后
let pow=n=>n*n;