FY-7216 6-ES6

ES6

ES2015
ES6 以后，都叫 ESnext

主要 API

const

常量标识，命名一个常量，不允许重复声明和赋值。

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

ES5 中怎么实现常量：

vat arg = 'test'
Object.defineProperty(window,'arg',{
  value:'test',
  writable:false//是否可以改变,默认为 false
})

question:defineProperty 是啥

Object.defineProperty :在对象上定义一个新属性，或者修改已经存在的属性。
如果正常定义是可以修改的，如果通过 defineProperty 定义，且没有设置 writable 的话，是不可以修改的，就是说 writable 默认是 false

// obj 定义属性的当前对象
// prop 需要定义的属性名
// desc 属性描述
Object.defineProperty(obj, prop, desc)
//存在的意义:可以更精准的定义或者控制对象，例如 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';

  // 相当于
  var arg;
  console.log(arg);
  arg = 'yyds';

  //无变量提升--先声明再使用
  console.log(arg);
  const arg = 'yyds';//not defined

const 不会存在于 window 中，const 是一个块级作用域

const 无变量提升

dead zone

死区,TDZ，确保变量声明以后才可以使用。

let or const

• 引用类型，比较倾向于用 const

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

  // 对象如何不能被改变
  object.freeze(obj);// 冻结 obj
  //freeze 只能冻结s首层，嵌套引用类型需要遍历递归

  function deepFreeze(){
    Object.freeze(obj);
    (Object.keys(obj) || []).forEach((v) => {
      let innerObj = obj[v];
      if(typeof obj[v] === 'object'){
        deepFreeze(innerObj)
      }
    })
  }
  // typeof运算符用于判断对象的类型,但如果要判断是否为某个对象的实例，使用 instanceof

Arrow Function 箭头函数

箭头函数无法称为构造类

写法

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

上下文

this

  //ES6 context
  //箭头函数不会形成独立的上下文，内部的 this 指向了 window

场景2：类操作

箭头函数无法构造原型方法,无法完整构造类

箭头函数参数特性--无法使用 argument

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

Class 类

  // 传统 js 里面如何面向对象
  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 实例会默认执行
    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 和函数对象 属性有啥不同?

  //类里面的方法还是挂载到原型上的
  console.log(course.hasOwnProperty('teacher'))//true

类知识一个语法糖，本质上没有改变 js 的语法机制，所以 typeof class是 function

属性定义 构造器& 顶层定义

  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;
    }
  }
  //修改只读变量会报错吗？不会，但是无法改变

  // 2、如何建立私有属性
  class Course{
    constructor(teacher,leader) {
      this._teacher = teacher;
      thie.leader = leader;
      //在 constructor作用域内定义一个局部变量
      let _course = 'es';
      // 内部通过闭包的形式去暴露内部变量
      this.getCourse = () => {
        return _course
      }
    }
    // 或者
    #course = 'es'
  }

  // 3、封装核心 -- 适配器模式--封装中台业务
  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){//校验，符合我的规定，才进行校验
        this._name = val;
      }
    }
  }

静态方法

直接挂载在类上面的方法，无需实例化获取

  //ES5，实现静态方法
  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--解构

解开构造

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

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

使用场景

1. 形参结构
2. 结合初始值

  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 数组操作