【JS】JavaScript中箭头函数与传统函数的区别 arguments以及剩余参数 函数中this的指向

函数基本写法

传统写法

function fn(){}

箭头函数

const fn = () => {}

arguments

箭头函数没有arguments

function fn () {
	console.log(arguments) 
}
fn(1,2,3)  // [1,2,3]

注意: arguments是伪数组，无法直接使用数组方法，需要转为真数组，由于比较鸡肋，箭头函数不再支持arguments。

剩余参数

普通函数和箭头函数都有，且为真数组

写法

类似展开运算符 …

function fn(a,b,...args){
		console.log(args)
}
fn(1,2,3,4,5)  // [3,4,5]

const fn1 = (...args) => {
		console.log(args)
}
fn1(1,2,3)  // [1,2,3]

函数中的this

普通函数

普通函数的this总是指向调用者

function fn(){
 	consloe.log(this)
}
fn() // Window对象

const obj = {
  fn:function(){
    console.log(this)
  }
}
obj.fn() // obj

const obj1 = {
  fn:function(){
    const fn1 = () => {
      console.log(this)
    }
    fn1()
  }
}
obj.fn() // obj

箭头函数

注意事项

• 箭头函数没有自身的this，它的this总是其外层函数的this。
• 箭头函数的this无法通过call、bind、apply修改。
• 箭头函数无法作为构造函数使用 。

const fn = () => {
	console.log(this)
}
fn() // Window对象

const obj = {
  fn:() => {
    console.log(this)
  }
}
obj.fn() // Window对象