JS Learning note 04-es6 function (arrow function with this), class

Arrow functions

Making short single-line functions easier to write and read
A normal function can be a function declaration or function expression, but an arrow function is always an expression
Normal function (converts the name to uppercase)

const upperNames = [‘Fish‘, ‘RedHands‘, ‘Sugarbeans‘].map(function(name) {   return name.toUpperCase();});

convert function to arrow function, function body has only one expression , shorthand body syntax
1) Delete the keyword function
2) Remove the parentheses
3) Remove the left and right curly braces
4) Delete the keyword return
5) Remove the semicolon
6) Add an arrow (= =) between the argument list and the function body

const upperNames = [‘Fish‘, ‘RedHands‘, ‘Sugarbeans‘].map( name => name.toUpperCase() );

Multiple lines of code are required within the body of the arrow function, general body Syntax
1) It puts the function body inside the curly braces
2) Return content is also required.

The arrow functions are stored in the variable

multiple or 0 parameters you need to put the parameter list in ()
Sometimes ' _ ' denotes a parameter, but does not use it

const greet = name=>`Hello ${name}`;greet("fish");const students = (name,age) =>`Hello My name is ${name}, I‘m ${age}`;students("fish",19);const firstDemo = _=>`Hello world!`;  //参数为"_"

This in the arrow function

Inside the arrow function, the value of this is the same as the value of this outside the function

function IceCream() {  this.scoops = 0;}IceCream.prototype.addScoop = function() {  const cone = this; // 设置 `this` 给 `cone`变量 ,如果使用箭头函数就不需要  setTimeout(function() {    cone.scoops++; // 引用`cone`变量    console.log(‘scoop added!‘);  }, 500);};const dessert = new IceCream();dessert.addScoop(); //500毫秒之后,dessert.scoops = 1

The above closure code with the arrow function can not need the variable cone

function IceCream() {  this.scoops = 0;}// 为 IceCream 添加 addScoop 方法IceCream.prototype.addScoop = function() {  setTimeout(()  => {   this.scoops++; //直接使用函数外的对象    console.log(‘scoop added!‘);  }, 500);};

function parameter Default value

function getName(name){    name = (typeof name !== ‘undefined‘) ? name : ‘fish‘;     return name;}function getName(name = "fish") {    // 添加等号 ( = ) 以及默认值    return name;}

Default and deconstructed arrays

// = []  防止调用无参函数报错 Cannot read property ‘Symbol(Symbol.iterator)‘ of undefined function createGrid([width = 5, height = 5] = []) {  //=[], createGrid()可以直接使用  return `Generating a grid of ${width} by ${height}`;}

Default and Deconstruction objects

function can make an object a default parameter and use an object to deconstruct
Because the array is location-based, an advantage of the object's default value is to skip the parameter for processing, as opposed to the array default
Arrays are location-based and need to pass in undefined to skip parameters

//={} 同数组一样function createSundae({scoops = 1, toppings = [‘Hot Fudge‘]} = {}) {  const scoopText = scoops === 1 ? ‘scoop‘ : ‘scoops‘;  return `Your sundae has ${scoops} ${scoopText} with ${toppings.join(‘ and ‘)} toppings.`;}

ES6 Class Creation Classes

ES5 Constructor creates "class"

function Plane(numEngines) {  //Plane 函数是一个构造函数  this.numEngines = numEngines;  this.enginesActive = false;}// 由所有实例 "继承" 的方法Plane.prototype.startEngines = function () {  console.log(‘starting engines...‘);  this.enginesActive = true;};const richardsPlane = new Plane(1); //使用new创建新的 Plane 对象richardsPlane.startEngines();const jamesPlane = new Plane(4);jamesPlane.startEngines();

Code after the new class syntax is written

class Plane { //  constructor(numEngines) {    this.numEngines = numEngines;    this.enginesActive = false;  }startEngines() {    console.log(‘starting engines…‘);    this.enginesActive = true;  }}typeof Plane; // function        新语法定义的类也只是一种函数

static method Statics

Static methods are not inherited by instances, but are called directly through the class.
Three call methods, which are not related to the instance
1) The parent class calls directly
2) The subclass inherits the parent class and then calls
3) Subclasses are called through Super objects

class Foo {  static classMethod() {    return ‘hello‘;  }}Foo.classMethod();  //hello 父类直接调用class Bar extends Foo {}Bar.classMethod();  //hello 子类继承父类调用class Cla extends Foo {    return super.classMethod(); //hello super调用}

Super and extends

Subclass inherits the parent class using the keyword extends
In the construction method, super is used as a function, if the constructor of the subclass has this and super,super must be placed in front of this. In the method of a subclass, super is used as an object, calling the method of the parent class

  class Tree {///ES6 Create class, subclass constructor (size = ' ten ', leaves = {spring: ' Green ', Summer: ' Green ', Fall: ' Orang    E ', winter:null}) {this.size = size;    This.leaves = leaves;  This.leafcolor = null;    }changeseason (season) {this.leafcolor = This.leaves[season];    if (season = = = ' Spring ') {this.size + = 1;    }}}class Maple extends Tree {//inherits the parent class constructor (Syrupqty = $, size, leaves) {super (size, leaves);//Super in construction method  This.syrupqty = Syrupqty; }changeseason (season) {Super.changeseason (season);//Super If in Subclass method (season = = = ' Spring ') {this.syrupqty + = 1    ;  }} Gathersyrup () {this.syrupqty-= 3; }}

function Tree(size, leaves) {  //ES5创建类,子类  this.size = size || 10;  this.leaves = leaves || {spring: ‘green‘, summer: ‘green‘, fall: ‘orange‘, winter: null};  this.leafColor;}Tree.prototype.changeSeason = function(season) {  this.leafColor = this.leaves[season];  if (season === ‘spring‘) {    this.size += 1;  }}function Maple (syrupQty, size, leaves) {  //子类  Tree.call(this, size, leaves);  //使用父类的属性  this.syrupQty = syrupQty || 15;}Maple.prototype = Object.create(Tree.prototype); //函数原型设置为基类原型Maple.prototype.constructor = Maple;//重新建立constructor和构造函数的连接Maple.prototype.changeSeason = function(season) {  Tree.prototype.changeSeason.call(this, season);  //重写父类的方法  if (season === ‘spring‘) {    this.syrupQty += 1;  }}Maple.prototype.gatherSyrup = function() {  this.syrupQty -= 3;}

Tree.call (this, size, leaves);
Maple.prototype = Object.create (Tree.prototype);
Maple.prototype.constructor = Maple;

JS Learning note 04-es6 function (arrow function with this), class