js學(xué)習(xí)筆記04-ES6函數(shù)(箭頭函數(shù)與this),class

箭頭函數(shù)

讓簡(jiǎn)短單行函數(shù)更容易編寫和閱讀的
普通函數(shù)可以是函數(shù)聲明或函數(shù)表達(dá)式，但是箭頭函數(shù)始終是表達(dá)式
普通函數(shù)(把名字轉(zhuǎn)換為大寫)

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

將函數(shù)轉(zhuǎn)換為箭頭函數(shù),函數(shù)主體只有一個(gè)表達(dá)式,簡(jiǎn)寫主體語法
1)刪掉關(guān)鍵字 function
2)刪掉圓括號(hào)
3)刪掉左右花括號(hào)
4)刪掉關(guān)鍵字 return
5)刪掉分號(hào)
6)在參數(shù)列表和函數(shù)主體之間添加一個(gè)箭頭（=>）

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

箭頭函數(shù)的主體內(nèi)需要多行代碼,常規(guī)主體語法
1)它將函數(shù)主體放在花括號(hào)內(nèi)
2)有返回內(nèi)容也需要使用 return。

箭頭函數(shù)存儲(chǔ)在變量中

多個(gè)或者0個(gè)參數(shù)就需要將參數(shù)列表放在()中
有時(shí)候''_"表示一個(gè)參數(shù),但是不使用它

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!`;  //參數(shù)為"_"

箭頭函數(shù)中的this

箭頭函數(shù)內(nèi)的，this 的值與函數(shù)外面的 this 的值一樣

function IceCream() {
  this.scoops = 0;
}
IceCream.prototype.addScoop = function() {
  const cone = this; // 設(shè)置 `this` 給 `cone`變量 ,如果使用箭頭函數(shù)就不需要
  setTimeout(function() {
    cone.scoops++; // 引用`cone`變量
    console.log('scoop added!');
  }, 500);
};
const dessert = new IceCream();
dessert.addScoop(); //500毫秒之后,dessert.scoops = 1

上面的閉包代碼用箭頭函數(shù)就可以不需要變量cone

function IceCream() {
  this.scoops = 0;
}
// 為 IceCream 添加 addScoop 方法
IceCream.prototype.addScoop = function() {
  setTimeout(()  => {
   this.scoops++; //直接使用函數(shù)外的對(duì)象
    console.log('scoop added!');
  }, 500);
};

函數(shù)參數(shù)默認(rèn)值

function getName(name){
    name = (typeof name !== 'undefined') ? name : 'fish'; 
    return name;
}
function getName(name = "fish") {    // 添加等號(hào) ( = ) 以及默認(rèn)值
    return name;
}

默認(rèn)值和解構(gòu)數(shù)組

// = []  防止調(diào)用無參函數(shù)報(bào)錯(cuò) Cannot read property 'Symbol(Symbol.iterator)' of undefined
 function createGrid([width = 5, height = 5] = []) {  //=[], createGrid()可以直接使用
  return `Generating a grid of ${width} by ${height}`;
}

默認(rèn)值和解構(gòu)對(duì)象

函數(shù)可以讓對(duì)象成為一個(gè)默認(rèn)參數(shù)，并使用對(duì)象解構(gòu)
與數(shù)組默認(rèn)值相比,因?yàn)閿?shù)組是基于位置的,對(duì)象默認(rèn)值具備的一個(gè)優(yōu)勢(shì)是跳過參數(shù)進(jìn)行處理
而數(shù)組是基于位置的,需要傳入 undefined 以跳過參數(shù)

//={} 同數(shù)組一樣
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創(chuàng)建類

ES5 構(gòu)造函數(shù)創(chuàng)建“類”

function Plane(numEngines) {  //Plane 函數(shù)是一個(gè)構(gòu)造函數(shù)
  this.numEngines = numEngines;
  this.enginesActive = false;
}
// 由所有實(shí)例 "繼承" 的方法
Plane.prototype.startEngines = function () {
  console.log('starting engines...');
  this.enginesActive = true;
};
const richardsPlane = new Plane(1); //使用new創(chuàng)建新的 Plane 對(duì)象
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        新語法定義的類也只是一種函數(shù)

靜態(tài)方法static

靜態(tài)方法不會(huì)被實(shí)例繼承，而是直接通過類來調(diào)用
三種調(diào)用方法,調(diào)用與實(shí)例無關(guān)
1)父類直接調(diào)用
2)子類繼承父類后調(diào)用
3)子類通過super對(duì)象調(diào)用

class Foo {
  static classMethod() {
    return 'hello';
  }
}
Foo.classMethod();  //hello 父類直接調(diào)用
class Bar extends Foo {
}
Bar.classMethod();  //hello 子類繼承父類調(diào)用
class Cla extends Foo {
    return super.classMethod(); //hello super調(diào)用
}

super和extends

子類繼承父類使用關(guān)鍵字 extends
在構(gòu)造方法中，super 被用作函數(shù),如果子類的構(gòu)造方法中有this和super,super必須放在this的前面使用。在子類的方法中，super 被用作對(duì)象,調(diào)用父類的方法

 class Tree {  // ES6 創(chuàng)建類,子類
  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); //構(gòu)造方法中的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創(chuàng)建類,子類
  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); //函數(shù)原型設(shè)置為基類原型
Maple.prototype.constructor = Maple;//重新建立constructor和構(gòu)造函數(shù)的連接
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;