(精华)2020年7月4日 JavaScript高级篇 ES6(箭头函数)

基本用法

// 没有参数 多个参数 需要用() 包裹起来
const fn = ()=>5
console.log(fn());
const fnG = (num1,num2)=>num1 + num2
console.log(fnG(1,2));
// 函数块的语句 多于一条语句的 要使用{} 包裹起来 并且要用return 返回
const fJ = (a,b)=>{
    let c = a+b;
    let d = c+19;
    return d
}
console.log(fJ(1,7));
// 注意 返回的是一个对象 {} 此时应该怎么处理 必须要在对象的外面加括号
let getObj = ()=>({name:'张三',age:18})
console.log(getObj());
let getObj1 = ()=>{
    return {
        name:'张三',age:18
    }
}
console.log(getObj1());

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

注意点

// 1 this 也是箭头函数作用最大的地方 this不再是动态的 定义时候所在的对象而不是使用时所在的对象
// 2 箭头函数不能当做构造函数 不能new 
// 3 箭头函数内部不能用 arguments
// 4 不能够当做 generator函数 不能加yield命令

  

 

  
1
  
2
  
3
  
4
 

实例演示

// 见跑马灯的代码
function Person(){
    this.name = '张三'
    this.say = function(){
        console.log(`这是我的名字${this.name}`); 
    }
    this.say = this.say.bind(this)
    // this.say = ()=>{
    //     console.log(`这是我的名字${this.name}`); 
    // }
}
let person = new Person()
let res = person.say
res()

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

使用时机

// 箭头函数的使用时机
// 1 如果说有一个简短的语句 返回是一个简单的表达式 return num + num 2 函数内部没有this的引用 
// 也没有自身的引用 (递归)
// 2 内部需要 调用vat self = this 调用 bind 也适用于箭头函数
// 3 只要是回调函数 99% 用箭头函数就没有错

  

 

  
1
  
2
  
3
  
4
  
5
 

不适用箭头函数的场景

1. DOM 绑定的事件中调用 this 来获取自身的某个属性值

   document.querySelector('#textBtn').oninput = () => {
      console.log(this.value); // undefined
   };
   
       
   
      
   
       
   1
       
   2
       
   3
      

2. 通过 call、apply、bind 来改变 箭头函数的 this

   // apply
   const A = (age, gender) => {
     this.age = age;
     this.gender = gender;
   };
   const a = {};
   A.apply(a, [18, 'gender']);
   console.log(a); // {}
   
   // bind
   const test = () => {
   	console.log(this.gender); // window.gender => undefined
   };
   const obj = {
   	gender: 'male',
   };
   const bindTest = test.bind(obj);
   bindTest();
   
       
   
      
   
       
   1
       
   2
       
   3
       
   4
       
   5
       
   6
       
   7
       
   8
       
   9
       
   10
       
   11
       
   12
       
   13
       
   14
       
   15
       
   16
       
   17
       
   18
      

3. 把箭头函数当做构造函数

   const A = () => {};
   const a = new A(); // 报错
   
       
   
      
   
       
   1
       
   2
      

4. 在构造函数中使用 arguments 对象

   const a = () => {
     console.log(arguments); // arguments 未定义
   };
   
       
   
      
   
       
   1
       
   2
       
   3
      

5. 把箭头当做 generator 函数使用

   const a = *() => {}; // 编译器就语法错误了
   
       
   
      
   
       
   1
      

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107131678