函数的扩展

2024-03-24 14:40:58

箭头函数

下面的例子就是一个的箭头函数，省略了function关键字，加了=>运算符

注意：=>是一个运算符，中间不能有空格

如果函数内部只有一行语句，可以省略{}和return

let sum = (a,b) => a + b;
console.log(sum(2,3))

如果内部不止一行语句要加{}和return

箭头函数更重要的一点是可以连续箭头

上面的函数等价于下面的函数

const fn = function (a,b) {
  return function (m) {
    return a + b + m
  }
}
console.log(fn(1,3)(5))

箭头函数的上下文

箭头函数的上下文this是函数体内的this对象，就是定义时所在的对象，而不是调用时所在的对象。

我们看一下普通函数的上下文

普通函数的上下文是调用时候确定的，而不是定义时候确定的

箭头函数会在定义的时候确定自己的上下文

虽然是对象打点调用的，但是由于是箭头函数，所以不是按照普通函数结果返回的，上下文是window对象

箭头函数的call和apply是失效的

bind方法

bind方法表示给一个函数定死上下文，无论如何调用

此时call和apply都是失效的

bind、call、apply的区别？

bind不能调用函数，call和apply会调用函数
bind会定死上下文，call和apply是临时上下文

函数默认参数

函数可以有默认参数

没有第二个参数使用默认参数，有第二个参数使用第二个参数

函数的默认值会导致函数的length属性获取不到该默认值

箭头函数不绑定arguments参数

普通函数是有arguments对象的，但是箭头函数是没有arguments对象的

先来看普通函数

 const fun = function () {
         console.log(arguments) 
      }
    fun(1,2,3,4,5)

再来看箭头函数

const fun2 = ()=>{
      console.log(arguments)
      }
    fun2(1,2,3,4,5)

通过上面的错误你会发现箭头函数本身就没有绑定arguments这个对象，如果我们想要有arguments的替代者我们可以使用rest参数来代替

…rest参数

ES6引入rest参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了

"…"叫做扩展运算法

函数的…rest参数指的就是…运算符进行对参数的“解构方式”，专业术语叫做函数的…rest参数

rest参数将所有实参整合为了一个数组

注意rest参数必须在函数形参列表的最后一位

下面的写法是错误的…b的后面有c是不合法的

function f(a, ...b, c) {}

函数的length指的是形参列表，但是rest参数不会包含在形参列表中

箭头函数不可以当做构造函数

普通函数使用new 关键字来创建构造函数，但是箭头函数是一个匿名函数不能使用new 来创建构造函数，主要是因为箭头函数的上下文的问题导致设计时候就没有constructor

箭头函数没有原型属性prototype

const fun = ()=>{
  return 100;
}
console.log(fun.prototype)

箭头函数不能进行变量声明提升

箭头函数没有变量声明提升本身是定义性质所导致的，是因为声明的方法必须是var、const、let这些关键字定义的，这些方式定义的无论是普通函数还是箭头函数都不允许先使用后定义

先来看普通函数的

console.log(fun(1,2))
var fun = function(a,b){
  return a +b;
}

再来看箭头函数的

console.log(fun(1,2))
var fun = (a,b)=> {
  return a +b;
}

函数可以先使用后定义的是function 关键字定义的函

函数的参数也可以进行解构

码农公寓