Fade away

Appearance

箭头函数 ​

  1. ES6新增一种函数的定义方法，可以实现对函数的简写

  2. 语法：(参数形参)=>{函数体：函数调用后执行代码}

  3. 箭头函数不能定义函数名，使用箭头函数时，一般采用的是赋值式函数，或者作为参数等不需要函数名的情况下，不能简写声明式函数(普通函数)

1.箭头函数针对函数的简写的情况 ​

1.箭头函数针对 声明式函数(有名函数)无法简写

js
function fn1(){
	console.log('函数被调用了，箭头函数对声明式函数无法简写')
}
fn1();

2.箭头函数针对赋值式函数(匿名函数)可以简写

js
let fn2 = function(){
    console.log('函数被调用了22222')
}
fn2();
    // 简写
let fn3 = (num1,num2)=>{
    console.log(num1+'函数被调用了,箭头函数对赋值式函数可以简写'+num2)
}
fn3(5,2);

3.当函数当做参数的时候，箭头函数是可以简写的

js
//定时器箭头函数
setTimeout(function(){
	console.log(1234567890);
},1000);
// 简写
setTimeout(()=>{
	console.log('abcdefghijk');
},1000);
//遍历数组箭头函数
var arr1 = ['haha','hello',false,true,123];
arr1.forEach(function(item,index,arr){
    console.log(item);
})
    // 简写
arr1.forEach((item,index,arr)=>{
    console.log(item);
})

4.箭头函数对事件处理函数 是可以进行简写的----但是一般是不会使用的

js
let obox = document.querySelector('#box');

obox.onclick = ()=>{
    alert('事件触发了')
}

5.对象中的方法也可以使用箭头函数简写

js
let obj = {
    name: 'hello',
    age: 18,
    sayHi: function(){
        console.log(this);  
    },
    hello: (a,b)=>{
        console.log(a); 
        console.log(b); 
    }
}

2.箭头函数this指向问题 ​

2.1箭头函数的特殊性 ​

  1. 箭头函数内部没有 this，箭头函数的 this 是上下文的 this

  2. 所谓的上下文的this就是说箭头函数所书写的位置的this指向

  3. 一般的确认方式：

    • 在书写箭头函数的上一行打印this的位置打印的结果，就是箭头函数内部 的 this指向

    • 箭头函数内部不仅没有this，而且不能改变this，因为没有，所以无法改变，所以 call()  apply()  bind() 方法针对 箭头函数是 无效的

    • 箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在 给一些方法作为 参数 时定义

  4. 注意：

    1. 箭头函数的this指向不可更改，所以不要在最外层定义箭头函数，

    2. 因为在函数内部操作this会很容易污染全局作用域。

    3. 最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；

js
console.log(this);  // window
let fn1 = ()=>{
    console.log(this);  // window
}
fn1();

let obox = document.querySelector('#box');
console.log(this);  // window
// obox.onclick = ()=>{
//     console.log(this);  // window
// }
        
obox.onclick = function(){
	console.log(this);  // 事件源 obox
}
let n = ()=>{
    console.log(this);  // obox
}



console.log(this);  // window
let obj = {
    name: 'hello',
    age: 18,
    sayHi: function(){
        console.log(this);   // obj对象
        console.log(this.name);  // 'hello'
    },
    abc: this,
    hello: ()=>{
        console.log(this);  // window
        console.log(this.name);  // 
    }
}

obj.sayHi();
obj.hello();
console.log(obj.abc);  // window

console.log(this);  // window
setTimeout(() => {
    console.log(this);  // window
},2000);


obox.onmouseover = function(){
    console.log(this);  // 事件源 obox

    setTimeout(() => {
        console.log(this);  // obox
    },2000);

    setTimeout(function(){
        console.log(this);  // window
    },5000);
}

3.箭头函数参数问题 ​

3.1 剩余参数 ​

箭头函数没有arguments，我们可以通过es6新特性获取剩余参数，

在定义函数时，通过...data，那么在函数中data就是剩余的参数

注意：

  • 如果函数写多个形参，剩余参数只能写在最后一个
js
// 普通函数的arguments
function fn1(){
    console.log(arguments);  // 实参的 类数组集合
}
fn1(1,2,3,'fsdf',true)

// 箭头函数的arguments，会报错
let fn2 = ()=>{
    console.log(arguments);  // Error: arguments is not defined
}
fn2(1,2,3,'fsdf',true)

// 箭头函数的rest
const fn = (...rest) => {
    console.log(rest)
}

fn(1,2,3,4)   // 1,2,3,4

// 箭头函数的rest
const fn = (num,...rest) => {
    console.log(num) 		// 1
    console.log(rest)		 // 2,3,4
}

fn(1,2,3,4)

3.2 形参省略括号() ​

函数的形参只有一个且没有默认值的时候可以不写 () ，其余情况必须写

js
const obj = {
  fn: () => {
    console.log('没有参数，必须写小括号')
  },
  fn2: a => {
    console.log('一个行参，可以不写小括号')
  },
  fn3: (a, b) => {
    console.log('两个或两个以上参数，必须写小括号')
  }，
  fn4:(a=4)={
        console.log('给形参赋值，要写小括号')
  }
}

3.3 省略大括号{} ​

函数体只有一行代码的时候，可以不写 {} ，并且会自动 return

js
const obj = {
  fn: a => {
    return a + 10
  },
  fun: a => a + 10          //两者效果一样
}
​
console.log(obj.fn(10)) // 20
console.log(obj.fun(10)) // 20

3.4 形参默认值 ​

ES6新特性，定义函数时，可以给形参一个默认值，普通函数也行

js
function fn(a) {
  a = a || 10
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20
  • 在 ES6 中我们可以直接把默认值写在函数的形参位置
js
function fn(a = 10) {
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20
  • 这个默认值的方式箭头函数也可以使用
js
const fn = (a = 10) => {
  console.log(a)
}
fn()   // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20

注意： 箭头函数如果你需要使用默认值的话，那么一个参数的时候也需要写 （）

MIT Licensed

Copyright © 2024-present xarzhi