2021-06-10

es6的箭头函数

#箭头函数（=>）定义函数
以前声明函数的方式

let fun = function(){
    //函数体
}

新的方法

let fn = () => {函数体}  //直接省略function关键字

调用的形式还是不变

####箭头函数的特性

1. this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值
2. 不能作为构造函数实例化对象

---

//1. this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值
function getName(){
    console.log(this.name);
}

let getName2 = () => {
    console.log(this.name);
}

//设置window对象的属性 name
window.name = '大学生'；
const school = {
    name:'小学生';
}

//直接调用方法
getName();   //===>大学生
getName2();  //===>大学生


//但是使用call方法时
getName.call(school);  //===>小学生

getName2.call(school); //===>大学生

//2、不能作为构造实例化对象

//以下的方法时错误的
let Person = (name, age ) => {
    this.nam = name;
    this.age = age;
}

//错误的做法
let me = new Person('xiao',30);  //会直接提示错误
console.log(me);

//3、不能使用 arguments 变量
let fn = () => {
    console.log(arguments);  
}

//调用fn
fn(1,2,3);   //提示arguments 为notdefined 未定义

4、箭头函数的简写

1. 直接省略小括号，当形参有且只有一个的时候

2. 省略花括号{}，当代码代码体只有一条语句的时候，而且 return 语句也必须省，语句的执行结果就是函数的返回值

    //1、直接省略小括号，仅有一个参数的时候
    let add = n => { return n+n;}
    
    //2、省略花括号，只有一条语句的时候
    let pow = (n) => n*n;