前端小白Earl笔记

箭头函数的基本语法

• 箭头函数属于函数表达式。箭头函数表达式的写法与函数申明以及普通函数表达式的写法有所不同。

//函数申明
function f1(){
    console.log('普通函数')
}
function f2(a, b){
    return a + b;
}

//普通函数表达式
let f1 = function(){
    console.log('普通函数')
}
let f2 = function(a, b){
    return a + b;
}

//箭头函数表达式
let f1 = () => {
    console.log('箭头函数')
}
let f2 = (a, b) => {
    return a + b;
}

• 箭头函数的函数体如果只有一个表达式，可以写成一行的简写体，省略return，直接返回该表达式。

//基础语法
let f2 = (a, b) => {
    return a + b;
}

//简写体
let f2 = (a, b) => a + b

• 箭头函数如果只有一个参数，可以省略小括号。

//基础语法
let f3 = (a) => {
    return a + 1;
}
let f4 = (a) => {
    console.log(a);
}

//简写体
let f3 = a => a + 1
let f4 = a => {
    console.log(a);
}

• 箭头函数的加小括号的函数体返回对象字面量表达式。

let f5 = age => ({Age: age})
console.log(f5(18))  // {Age: 18}

• 箭头函数支持参数列表解构。

let f6 = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c
f6()  // 6

箭头函数的特点

• 箭头函数表达式比普通函数表达式更简洁，指向性更强，可读性更好。
• 箭头函数属于表达式函数，因此不存在函数提升。
• 箭头函数相当于匿名函数，不能作为构造函数，不可以使用new命令。
• 箭头函数没有prototype属性。
• 箭头函数不绑定this，它只会从自己的作用域链的上一层继承 this。

var user1={
  name:'earl',
  fullname:function(){ return this.name }  // 'earl' 这里的this指向user1
}

var user2={
  name:'earl',
  fullname:()=>this.name  //'' 箭头函数没有定义this绑定，这里的this指向window
}

var user3={
  name:'earl',
  sleep:function(){ 
    console.log(this)   // 这里的this指向user3
    var fn = ()=>{console.log(this)} // 这里的this也指向user3
    fn()
  }  
}

• 使用call,apply,bind并不会改变箭头函数中的this指向。

window.name = "window_name";
let f1 = function () {
  return this.name
}
let f2 = () => this.name
let obj = { name: "obj_name" }

console.log(f1.call(obj))  //obj_name
console.log(f2.call(obj)) // window_name

• 箭头函数不绑定arguments，它只会从自己的作用域链的上一层继承arguments。箭头函数可以使用剩余参数。

let f1 = ()=>console.log(arguments)
f1()  //报错 Uncaught ReferenceError: arguments is not defined

function f2(){
  let f = ()=> {
    console.log(arguments)
  }
  f();
}
f2(1,2,3) // [1,2,3]