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
    

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

  • 相关阅读:
    浏览器渲染引擎工作原理
    js运行原理与机制
    新式网络浏览器幕后揭秘
    网站身份信息验证规则Cookie、Session、Token、JWT说明
    http简介
    react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
    雅虎前端优化的35条军规
    服务端渲染与客户端渲染
    DataURL与File,Blob,canvas对象之间的互相转换的Javascript
    docker安装samba
  • 原文地址:https://www.cnblogs.com/gqx-html/p/11276698.html
Copyright © 2011-2022 走看看