ES6类的语法

ES6 类的语法

• 1. 构造函数 不加new也能使用,只是没有意义
• 2. 构造函数与原型上的内容需要分开书写

    function person() {
      this.a = 123
      this.abc = 456
    }
    Person.prototype.init = function() {}
    let p = person()
    // console.log(p) //undefined
    console.log(window)

• ES6类的书写

    class Stu {
      // 构造器,类似于ES5构造函数的函数体
      constructor(num) {
        this.name = '张三'
        this.age = num
      }
      // 接下来的位置全都是原型的书写位置
      init() {
        console.log('我是原型上的init方法')
      }
      abc() {
        console.log('我是原型上的abc方法') 
      }
      move() {
        console.log('我是原型上的move方法')
      }
    }
    // const s1 = new Stu(18)
    // console.log(s1)
    // const s2 = new Stu(168)
    // console.log(s2)
    // s1.init()
    // s2.move()
    // const s3 = Stu(99) //报错
    // console.log(s3)

ES6补充

• 1.模板字符串
  • 在ES5中要么是单引号包裹要么是双引号包裹
  • 而ES6中推出的模板字符串是使用`` 反引号包裹的
  • 和之前的区别
    • 1. 反引号能够换行,但是单引号双引号不行
    • 2. 内部如果书写的有${} 然后在内部可以识别出变量
• 2. 展开运算符

  • 在ES6 推出了展开运算符 ...

  • 能够展开数组 或者 对象

    let arr = [1, 2, 3]
    console.log(arr) //(3) [1, 2, 3]
    console.log(...arr) //1 2 3
    

  • 2.1 合并数组

    let arr2 = [...arr, 100, 101, 102]
    console.log(arr2) //(6) [1, 2, 3, 100, 101, 102]
    

  • 2.2 函数传参

     function fn(a, b, c) {
        console.log('fn 函数的形参:',a, b, c)
     }
     fn(...arr)
    

  • 2.3 展开对象

        // let obj = {
        //   a: 1, 
        //   b: 2
        // }
        // console.log(...obj) //这个代码不符合语法规范
        // let obj2 = {
        //   ...obj,
        //   c: 100,
        //   d: 200
        // }
        // console.log(obj2) //{a: 1, b: 2, c: 100, d: 200}    
    

对象的简写语法:当对象的key与value相同的时候,并且value是一个变量,那么可以省略其中一个不写

    let name = '张三'
    let obj = {
      // name: '张三'
      // name: name
      name,
      age: 18,
      fn: function () {
        console.log('我是对象obj属性fn的属性值')
      },
      fn1 () {
        console.log('我是fn1函数')
      }
    }
    // console.log(obj) //我是对象obj属性fn的属性值
    obj.fn()
    obj.fn1() //我是fn1函数