摘要：在中必須調(diào)用方法，因?yàn)樽宇悰](méi)有自己的對(duì)象，而是繼承父類的對(duì)象，然后對(duì)其進(jìn)行加工而就代表了父類的構(gòu)造函數(shù)。雖然代表了父類的構(gòu)造函數(shù)，但是返回的是子類的實(shí)例，即內(nèi)部的指的是，因此在這里相當(dāng)于。要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次函數(shù)，否則會(huì)報(bào)錯(cuò)。

ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，引入了 Class（類）這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類。
基本上，ES6 的class可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5 都可以做到，新的class寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已

特點(diǎn)

1.類的所有方法都定義在類的prototype屬性上面

class Point {
  constructor() {
    // ...
  }
}
==
Point.prototype = {
  constructor() {},
};

2.Point.prototype.constructor === Point // true
3.定義“類”的方法的時(shí)候，前面不需要加上function這個(gè)關(guān)鍵字，直接把函數(shù)定義放進(jìn)去了就可以了
4.類不存在變量提升（hoist），這一點(diǎn)與 ES5 完全不同。
5.類的方法內(nèi)部如果含有this，它默認(rèn)指向類的實(shí)例
6.如果在一個(gè)方法前，加上static關(guān)鍵字，就表示該方法不會(huì)被實(shí)例繼承，而是直接通過(guò)類來(lái)調(diào)用，這就稱為“靜 態(tài)方法”。
7.寫(xiě)法

ES5寫(xiě)法

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return "(" + this.x + ", " + this.y + ")";
};

var p = new Point(1, 2);

ES6

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return "(" + this.x + ", " + this.y + ")";
  }
}

這是ES6對(duì)類的默認(rèn)方法，通過(guò) new 命令生成對(duì)象實(shí)例時(shí)自動(dòng)調(diào)用該方法。并且，該方法是類中必須有的，如果沒(méi)有顯示定義，則會(huì)默認(rèn)添加空的constructor( )方法。

1.constructor方法默認(rèn)返回實(shí)例對(duì)象（即this）

 class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
point.hasOwnProperty("x") // true

2.super( ) ——繼承

在class方法中，繼承是使用 extends 關(guān)鍵字來(lái)實(shí)現(xiàn)的。子類 必須 在 constructor( )調(diào)用
 super( )方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。
在 constructor 中必須調(diào)用 super 方法，因?yàn)樽宇悰](méi)有自己的 this 對(duì)象，而是繼承父類的 this 對(duì)象
，然后對(duì)其進(jìn)行加工,而 super 就代表了父類的構(gòu)造函數(shù)。super 雖然代表了父類 A 的構(gòu)造函數(shù)，
但是返回的是子類 B 的實(shí)例，即 super 內(nèi)部的 this 指的是 B，因此 super() 在這里相當(dāng)于 
A.prototype.constructor.call(this, props)。

class A {}
class B extends A {
  constructor() {
    super();  // ES6 要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次 super 函數(shù)，否則會(huì)報(bào)錯(cuò)。
  }
}

3.如果你在constructor中要使用this.props,就必須給super加參數(shù)：super(props)；

順帶一提的是，其實(shí)可以給組件標(biāo)簽也加上 ref

  this.input = input} />//input為獲取的節(jié)點(diǎn)

嵌套的結(jié)構(gòu)在組件內(nèi)部都可以通過(guò) props.children 獲取到
class Card extends Component {
  render () {
    return (
      

        

          {this.props.children[0]}
        
        

          {this.props.children[1]}
        
      
    )
  }
}
ReactDOM.render(
  
    
children[0]
    
children[1]
  ,
  document.getElementById("root")
)

class LikeButton extends Component {
  static defaultProps = {
    likedText: "取消",
    unlikedText: "點(diǎn)贊"
  }
static propTypes = {
    comment: PropTypes.object//const { comment } = this.props
  }
static propTypes = {
  comment: PropTypes.object.isRequired
}
}

bind返回值是由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝
在JSX中傳遞的事件不是一個(gè)字符串，而是一個(gè)函數(shù)（如:onClick={this.handleClick}），此時(shí)onClick即是中間變量，所以處理函數(shù)中的this指向會(huì)丟失。解決這個(gè)問(wèn)題就是給調(diào)用函數(shù)時(shí)bind(this)，從而使得無(wú)論事件處理函數(shù)如何傳遞，this指向都是當(dāng)前實(shí)例化對(duì)象。
當(dāng)然，如果不想使用bind(this)，我們可以在聲明函數(shù)時(shí)使用箭頭函數(shù)將函數(shù)內(nèi)容返回給一個(gè)變量，并在調(diào)用時(shí)直接使用this.變量名即可

1
有bind點(diǎn)擊一下
2
constructor(props) {
        super(props);
        this.state = {

        };
        this.handleClick=this.handleClick.bind(this)
    }
3
{this.handleClick()}>

高階組件是一個(gè)函數(shù)（而不是組件），它接受一個(gè)組件作為參數(shù)，返回一個(gè)新的組件。這個(gè)新的組件會(huì)使用你傳給它的組件作為子組件

import React, { Component } from "react"

export default (WrappedComponent, name) => {
  class NewComponent extends Component {
    constructor () {
      super()
      this.state = { data: null }
    }

    componentWillMount () {
      let data = localStorage.getItem(name)
      this.setState({ data })
    }

    render () {
      return 
    }
  }
  return NewComponent
}

import wrapWithLoadData from "./wrapWithLoadData"

class InputWithUserName extends Component {
  render () {
    return 
  }
}

InputWithUserName = wrapWithLoadData(InputWithUserName, "username")
export default InputWithUserName

模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能。一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量，外部無(wú)法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量

1.export命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系
2.export語(yǔ)句輸出的接口，與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，即通過(guò)該接口，可以取到模塊內(nèi)部實(shí)時(shí)的值
3.注意輸出時(shí){}的使用表明其是一個(gè)接口，不用則為值會(huì)報(bào)錯(cuò)

//export var year = 1958;
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;
export {firstName, lastName, year};
----------
// 報(bào)錯(cuò)
export 1;
// 報(bào)錯(cuò)
var m = 1;
export m;
----------
// 寫(xiě)法一
export var m = 1;
// 寫(xiě)法二
var m = 1;
export {m};
// 寫(xiě)法三
var n = 1;
export {n as m};
//函數(shù)
function f() {}
export {f};

4.import命令接受一對(duì)大括號(hào)，里面指定要從其他模塊導(dǎo)入的變量名。大括號(hào)里面的變量名，必須與被導(dǎo)入模塊（profile.js）對(duì)外接口的名稱相同
5.如果想為輸入的變量重新取一個(gè)名字，import命令要使用as關(guān)鍵字，將輸入的變量重命名
6.import命令輸入的變量都是只讀的，因?yàn)樗谋举|(zhì)是輸入接口。也就是說(shuō)，不允許在加載模塊的腳本里面，改寫(xiě)
接口
7.注意，import命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行
8.import是靜態(tài)執(zhí)行，所以不能使用表達(dá)式和變量

import { lastName as surname } from "./profile.js";
import {myMethod} from "util";//util是模塊文件名，必須通過(guò)配置，告訴引擎怎么取到這個(gè)模塊
import "lodash";//import語(yǔ)句會(huì)執(zhí)行所加載的模塊

除了指定加載某個(gè)輸出值，還可以使用整體加載，即用星號(hào)（*）指定一個(gè)對(duì)象，所有輸出值都加載在這個(gè)對(duì)象上面。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

import * as circle from "./circle";

console.log("圓面積：" + circle.area(4));
console.log("圓周長(zhǎng)：" + circle.circumference(14));

// export-default.js
export default function () {
  console.log("foo");
}

// import-default.js
import customName from "./export-default";
customName(); // "foo"

1.使用export default時(shí)，對(duì)應(yīng)的import語(yǔ)句不需要使用大括號(hào)

// 第一組
export default function crc32() { // 輸出
  // ...
}
import crc32 from "crc32"; // 輸入
// 第二組
export function crc32() { // 輸出
  // ...
};
import {crc32} from "crc32"; // 輸入
//結(jié)合使用
import _, { each, forEach } from "lodash";

2.export default命令其實(shí)只是輸出一個(gè)叫做default的變量，所以它后面不能跟變量聲明語(yǔ)句

// 正確
export var a = 1;
// 正確
var a = 1;
export default a;
// 錯(cuò)誤
export default var a = 1;

本質(zhì)上，這種寫(xiě)法屬于“模式匹配”，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。下面是一些使用嵌套數(shù)組進(jìn)行解構(gòu)的例子

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ["a"];
x // "a"
y // undefined
z // []

1.如果等號(hào)的右邊不是數(shù)組（或者嚴(yán)格地說(shuō)，不是可遍歷的結(jié)構(gòu)，參見(jiàn)《Iterator》一章），那么將會(huì)報(bào)錯(cuò)

// 報(bào)錯(cuò)
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;

2.解構(gòu)賦值允許指定默認(rèn)值

let [foo = true] = [];
foo // true

let [x, y = "b"] = ["a"]; // x="a", y="b"
let [x, y = "b"] = ["a", undefined]; // x="a", y="b"

3.解構(gòu)不僅可以用于數(shù)組，還可以用于對(duì)象

//簡(jiǎn)易模型
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

//基本模型
var robotA = { name: "Bender" }; 
var robotB = { name: "Flexo" }; 
var { name: nameA } = robotA; 
var { name: nameB } = robotB;
nameA//"Bender"
nameB//"Flexo"

//多重解構(gòu)
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

//默認(rèn)值
var {x, y = 5} = {x: 1};
x // 1
y // 5
var { message: msg = "Something went wrong" } = {};

//JavaScript 引擎會(huì)將{x}理解成一個(gè)代碼塊，從而發(fā)生語(yǔ)法錯(cuò)誤
//只有不將大括號(hào)寫(xiě)在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個(gè)問(wèn)題
let x;
({x} = {x: 1});

//字符解構(gòu)
const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

箭頭函數(shù)沒(méi)有 this，所以需要通過(guò)查找作用域鏈來(lái)確定 this 的值。這就意味著如果箭頭函數(shù)被非箭頭函數(shù)包含，this 綁定的就是最近一層非箭頭函數(shù)的 this。
沒(méi)有 arguments
不能通過(guò) new 關(guān)鍵字調(diào)用
沒(méi)有原型
沒(méi)有 super

格式1：多個(gè)參數(shù)
(param1, param2, …, paramN) => { statements }
// statements應(yīng)該有return 語(yǔ)句 
(param1, param2, …, paramN) => expression 
//相當(dāng)于 return expression

格式2：一個(gè)參數(shù)
 (singleParam) => { statements } 
singleParam => { statements } //可以去掉括號(hào)

格式3:沒(méi)有參數(shù)
() => { statements }

格式4:返回對(duì)象
params => ({foo: bar}) 

格式5:支持?jǐn)U展符號(hào)
(param1, param2, ...rest) => { statements } 

格式6:支持默認(rèn)值
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } 

格式7:支持解構(gòu)賦值
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6

修飾器是一個(gè)對(duì)類進(jìn)行處理的函數(shù)。修飾器函數(shù)的第一個(gè)參數(shù)，就是所要修飾的目標(biāo)類。@是語(yǔ)法糖

1.類的修飾

function decorator(target) {
  target.isTestable = true;
}
@decorator
class A {}

// 等同于
class A {}
A = decorator(A) || A;

A.isTestable//true

2.修飾器帶參數(shù)

function testable(isTestable) {
  return function(target) {
    target.isTestable = isTestable;
  }
}

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

3.與redux庫(kù)結(jié)合

class MyReactComponent extends React.Component {}
export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
//connect(mapStateToProps, mapDispatchToProps)返回一個(gè)函數(shù)
//加上（）即(MyReactComponent)，再次執(zhí)行函數(shù)，傳入一個(gè)組件返回一個(gè)被修飾的組件
==
@connect(mapStateToProps, mapDispatchToProps)//將props導(dǎo)入到被修飾的組件上去
export default class MyReactComponent extends React.Component {}