js学习笔记04-ES6函数(箭头函数与this),class

Posted 2020-11-05

箭头函数

让简短单行函数更容易编写和阅读的
普通函数可以是函数声明或函数表达式，但是箭头函数始终是表达式
普通函数(把名字转换为大写)

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

将函数转换为箭头函数,函数主体只有一个表达式,简写主体语法
1)删掉关键字 function
2)删掉圆括号
3)删掉左右花括号
4)删掉关键字 return
5)删掉分号
6)在参数列表和函数主体之间添加一个箭头（=>）

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

箭头函数的主体内需要多行代码,常规主体语法
1)它将函数主体放在花括号内
2)有返回内容也需要使用 return。

箭头函数存储在变量中

多个或者0个参数就需要将参数列表放在()中
有时候‘‘_"表示一个参数,但是不使用它

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

箭头函数内的，this 的值与函数外面的 this 的值一样

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

上面的闭包代码用箭头函数就可以不需要变量cone

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

函数参数默认值

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

默认值和解构数组

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

默认值和解构对象

函数可以让对象成为一个默认参数，并使用对象解构
与数组默认值相比,因为数组是基于位置的,对象默认值具备的一个优势是跳过参数进行处理
而数组是基于位置的,需要传入 undefined 以跳过参数

//={} 同数组一样
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创建类

ES5 构造函数创建“类”

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();

新的 class 语法编写后的代码

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

静态方法static

静态方法不会被实例继承，而是直接通过类来调用
三种调用方法,调用与实例无关
1)父类直接调用
2)子类继承父类后调用
3)子类通过super对象调用

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和extends

子类继承父类使用关键字 extends
在构造方法中，super 被用作函数,如果子类的构造方法中有this和super,super必须放在this的前面使用。在子类的方法中，super 被用作对象,调用父类的方法

 class Tree {  // ES6 创建类,子类
  constructor(size = ‘10‘, leaves = {spring: ‘green‘, summer: ‘green‘, fall: ‘orange‘, 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 { //继承父类
  constructor(syrupQty = 15, size, leaves) {
    super(size, leaves); //构造方法中的super
    this.syrupQty = syrupQty;
  }
changeSeason(season) {
    super.changeSeason(season); //子类方法中的super
    if (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;