zoukankan      html  css  js  c++  java
  • ES6 箭头函数

    解决的问题

    1.缩减代码         2.改变this指向

    1.缩减代码

    ES5
    const double = function(number){
      return number * 2  
    }
    
    ES6
    const double = (number) => number * 2
    

    2.改变this指向

    ES5
    const team1 = {
      members: ['Henry', 'Elyse'],
      teamName: 'es6',
      teamSummary: function(){
             return this.members.map(function(menber){
                  return `${member}隶属于${this.teamName}小组`
             })
      }  
    }
    
    console.log(team1.teamSummary())         // ['Henry隶属于undefined小组', 'Elyse隶属于undefined小组']
    
    分析:因为map方法中会改变this的指向,this不知道该指向谁
    
    
    ES5
    const team2 = {
      members: ['Henry', 'Elyse'],
      teamName: 'es6',
      teamSummary: function(){
             return this.members.map(function(menber){
                  return `${member}隶属于${this.teamName}小组`
             }, bind(this))
      }  
    }
    console.log(team2.teamSummary())  // ['Henry隶属于es6小组', 'Elyse隶属于es6小组']
    
    分析:bind可以将父级this的指向到map中
    
    ES5
    const team3 = {
      members: ['Henry', 'Elyse'],
      teamName: 'es6',
      teamSummary: function(){
            let that = this
             return this.members.map(function(menber){
                  return `${member}隶属于${that.teamName}小组`
             })
      }  
    }
    console.log(team3.teamSummary())  // ['Henry隶属于es6小组', 'Elyse隶属于es6小组']
    
    分析:将父级this赋值到that变量,在map中用that就相当于用this
    
    ES6
    const team4 = {
      members: ['Henry', 'Elyse'],
      teamName: 'es6',
      teamSummary: function(){
             return this.members.map((menber) =>{
                  return `${member}隶属于${this.teamName}小组`
             })
      }
    }
    console.log(team4.teamSummary())  // ['Henry隶属于es6小组', 'Elyse隶属于es6小组']
    
    分析: map中this的指向,是指向map函数父级的this
    

    建议将以上代码在编辑器中运行查看,可以记忆比较深刻

  • 相关阅读:
    gitblit.cmd运行自动关闭
    用SourceTree轻松Git项目图解
    GUI for git|SourceTree|入门基础
    SourceTree的简单使用
    Windows平台使用Gitblit搭建Git服务器图文教程
    使用Gitblit 搭建Windows Git服务器
    Git使用详细教程
    Kafka 设计与原理详解
    Kafka 客户端实现逻辑分析
    js判断只能输入数字或小数点
  • 原文地址:https://www.cnblogs.com/gqx-html/p/11276698.html
Copyright © 2011-2022 走看看