ES6

ES2015
ES6 以后，都叫 ESnext

主要 API

const

常量標(biāo)識，命名一個(gè)常量，不允許重復(fù)聲明和賦值。

  const LIMIT = 10;
  const OBJ= {
    a:'a'
  }

ES5 中怎么實(shí)現(xiàn)常量：

vat arg = 'test'
Object.defineProperty(window,'arg',{
  value:'test',
  writable:false//是否可以改變,默認(rèn)為 false
})

question:defineProperty 是啥

Object.defineProperty :在對象上定義一個(gè)新屬性，或者修改已經(jīng)存在的屬性。
如果正常定義是可以修改的，如果通過 defineProperty 定義，且沒有設(shè)置 writable 的話，是不可以修改的，就是說 writable 默認(rèn)是 false

// obj 定義屬性的當(dāng)前對象
// prop 需要定義的屬性名
// desc 屬性描述
Object.defineProperty(obj, prop, desc)
//存在的意義:可以更精準(zhǔn)的定義或者控制對象，例如 es5中的不可修改對象的定義

塊級作用域

  if(true){
    var arg1 = 'yunyin'
  }
  console.log('arg1',arg1)
  if(true){
    const arg2 = 'yunyin'
  }
  console.log('arg2',arg2)

無變量提升

  console.log(arg);
  var arg = 'yyds';

  // 相當(dāng)于
  var arg;
  console.log(arg);
  arg = 'yyds';

  //無變量提升--先聲明再使用
  console.log(arg);
  const arg = 'yyds';//not defined

const 不會存在于 window 中，const 是一個(gè)塊級作用域

const 無變量提升

dead zone

死區(qū),TDZ，確保變量聲明以后才可以使用。

let or const

• 引用類型，比較傾向于用 const

  cosnt obj = {
    teacher:'ddd',
    leader:'ccc'
  }
  obj.teacher = 'bbb';
  const a = ['1','2']
  a[0] = '3';

  // 對象如何不能被改變
  object.freeze(obj);// 凍結(jié) obj
  //freeze 只能凍結(jié)s首層，嵌套引用類型需要遍歷遞歸

  function deepFreeze(){
    Object.freeze(obj);
    (Object.keys(obj) || []).forEach((v) => {
      let innerObj = obj[v];
      if(typeof obj[v] === 'object'){
        deepFreeze(innerObj)
      }
    })
  }
  // typeof運(yùn)算符用于判斷對象的類型,但如果要判斷是否為某個(gè)對象的實(shí)例，使用 instanceof

Arrow Function 箭頭函數(shù)

箭頭函數(shù)無法稱為構(gòu)造類

寫法

  const tst = (a) => {
    return a;
  }
  const tst = (a) => a;
  const tst = a => a;

上下文

this

  //ES6 context
  //箭頭函數(shù)不會形成獨(dú)立的上下文，內(nèi)部的 this 指向了 window

場景2：類操作

箭頭函數(shù)無法構(gòu)造原型方法,無法完整構(gòu)造類

箭頭函數(shù)參數(shù)特性--無法使用 argument

  const test = function(teacher){
    console.log(arguments)
  }
  const test = (teacher) => {
    console.log(arguments)
  }

Class 類

  // 傳統(tǒng) js 里面如何面向?qū)ο?  function Course(teacher,leader){
    thie.teacher = 'aaa';
    this.leader = 'bbb';
  }
  Course.prototype.getCourse = function(){
    return 'theacher'
  }

  const cc = new Course('lilei','hanmeimei');
  cc.getCourse();

  // es6
  class Course{
    //init 實(shí)例會默認(rèn)執(zhí)行
    constructor(teacher,leader){
      thie.teacher = 'aaa';
      this.leader = 'bbb';
    }
    //拓展方法
    getCourse = function(){
      return 'theacher'
    }
  }
  const cc = new Course('lilei','hanmeimei');
  cc.getCourse();

面試問題

1. typeof class：function
2. class 的原型 prototype 是啥？class
3. class 和函數(shù)對象 屬性有啥不同?

  //類里面的方法還是掛載到原型上的
  console.log(course.hasOwnProperty('teacher'))//true

類知識一個(gè)語法糖，本質(zhì)上沒有改變 js 的語法機(jī)制，所以 typeof class是 function

屬性定義 構(gòu)造器& 頂層定義

  class Course{
    constructor(teacher,leader) {
      this.teacher = teacher;
      thie.leader = leader;
    }
    getCourse(){
      return `${this.teacher}`
    }
    get teacher(){
      // 有空間去做其他事情
      return this.teacher;
    }
    get teacher(te){
      // 有空間去做其他事情
      return this.teacher = te;
    }
  }

  // 意義何在？
  // 1、如何建立只讀變量
  class Course{
    constructor(teacher,leader) {
      this._teacher = teacher;
      thie.leader = leader;
    }
    getCourse(){
      return `${this.teacher}`
    }
    get teacher(){
      // 有空間去做其他事情
      return this._teacher;
    }
  }
  //修改只讀變量會報(bào)錯(cuò)嗎？不會，但是無法改變

  // 2、如何建立私有屬性
  class Course{
    constructor(teacher,leader) {
      this._teacher = teacher;
      thie.leader = leader;
      //在 constructor作用域內(nèi)定義一個(gè)局部變量
      let _course = 'es';
      // 內(nèi)部通過閉包的形式去暴露內(nèi)部變量
      this.getCourse = () => {
        return _course
      }
    }
    // 或者
    #course = 'es'
  }

  // 3、封裝核心 -- 適配器模式--封裝中臺業(yè)務(wù)
  class Utils{
    constructor(core) {
      this._main = core;
      thie._name = 'my-utils';
    }
    get name(){
      return {
        ...this._main.name,
        name:`${this._name}`// name 是自己的，但是其他的是穿回來的
      }
    }
    set name(val){
      if(true){//校驗(yàn)，符合我的規(guī)定，才進(jìn)行校驗(yàn)
        this._name = val;
      }
    }
  }

靜態(tài)方法

直接掛載在類上面的方法，無需實(shí)例化獲取

  //ES5，實(shí)現(xiàn)靜態(tài)方法
  function Course() {
    //..
  }
  Course.ring = function(){
    //...
  }

  //ES6
  class Course{
    constructor(){
      //...
    }
    static ring(){
      //...
    }
  }
  Course.ring();

繼承

  //es5
  function Ccc(){}
  Ccc.ring = function(){}
  function Child(){
    Ccc.call(this,'cc');// 就是 es6 中的 super（）；
    this.run = function(){}
  }
  Child.prototype = Ccc.prototype;

  //ES6
  class Course{
    construstor(){
      //...
    }
  }

  class Child extends Course{
    constructor(){
      super();
    }
  }

Deconstruction--解構(gòu)

解開構(gòu)造

  const zw = {
    tea:{
      name:'sss',
      age:30
    },
    leader:'',
    name:'ddd'
  }

  //別名
  const {
    tea:{
      name,
      age
    },
    leader,
    name:className
  }

使用場景

1. 形參結(jié)構(gòu)
2. 結(jié)合初始值

  const course = ({taa,leader,course = 'chushizhi'}) =>{

  }

3. 返回值

  const getcourse = () =>{
    return {
      teacher:'',
      leader:''
    }
  }
  const {teacher,leader} = getcourse();

4. 變量交換
   [a,b] = [b,a];
5. json 處理

  const json = '{teacher:'aaa',leader:'bbb'}';
  const obj = JSON.parse(json);

  const {
    teacher,
    leader
  } = JSON.parse(json);

6. ajax

Array for...of 數(shù)組操作