扫盲JavaScript知识点（三）- 生成实例对象

语法糖

语法糖是一个专业术语，指计算机语言中添加的某种语法，并且对语言的功能没有影响，只是方便使用

生成实例对象

ES5 - 构造函数和原型的组合

function Vue(options) {
      this._init(options)
    }
    Vue.prototype._init= function (vm) {  
      console.log(vm);
    }

    let vm = new Vue({data:{a:1}}) // {data:{a:1}}
    
    vm._init(444) // 444

ES6 - Class类

class Vue{
      constructor(options){
        this.$options = options
      }
      _init(vm){
        if(!vm) {
          console.log(this.$options);
          return
        }
        console.log(vm);
      }
    }
    let vm = new Vue({data:{a:1}})
    vm._init(444)

类的构造方法

类的方法都定义在prototype对象上
可以通过Object.assign()方法往类的原型上添加方法。

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

语法

Object.assign(target, ...sources)

ES5

function Observe(vm) {
      console.log(vm);
    }
    Observe.prototype = {
      constructor(){

      },
      initData(data){
        console.log(data);
      }
    }
    let myOb = Observe.prototype.initData
    myOb(333) // 33

    function Vue(options) {
      this._init(options)
    }
    Vue.prototype._init= function (vm) {  
      console.log(vm);
    }

    let vm = new Vue({data:{a:1}}) // {data:{a:1}}
    
    vm._init(444) // 444

    Object.assign(Vue.prototype,{
      _initData(){
        console.log(999);
      }
    })
    console.log(Vue.prototype);
    Vue.prototype._initData()

image.png

ES6

class Vue{
      constructor(options){
        this.$options = options
      }
      _init(vm){
        if(!vm) {
          console.log(this.$options);
          return
        }
        console.log(vm);
      }
    }
    let vm = new Vue({data:{a:1}})
    vm._init(444)

    Object.assign(Vue.prototype,{
      _initData(){
        this.$options = {data:{b:2222}}
        console.log(this.$options);
      }
    })

    Vue.prototype._initData();

image.png

class类

基本语法

1. 默认方法constructor（必须要有）
   如果没有定义，也会默认添加一个空的constructor
2. class类必须new调用，否则报错。
   普通构造函数可以当成一个普通函数，不用new也可以执行
3. getter()和setter()方法
   对应属性的存值和取值函数，可以通过这两个函数拦截属性的存取。

class Vue{
      constructor(data){
        this.data = data
        this._data = data
      }
      get data(){
        return this._data
      }
      set data(value){
        this._data = value
        console.log('set data');
      }
    }
    let vm = new Vue(1)  // 触发set

4. class类的细节

• class类的内部默认是严格模式。
• class类不会进行生命提升。new操作必须在class类的后面
• class类内部定义的方法中this默认指向class类，但是如果通过解构赋值的方法拿到里面的方法，在执行时，this执行class类外部上下文。

class iVue {
    cookDinner(food = 'beef'){
      console.log('start');
      this.cooking(food)
    }
    cooking(food){
      console.log('dinner is',food);
    }
  }
  let newVue = new iVue()
  newVue.cookDinner()
  let {cookDinner} = newVue
  cookDinner() // 先输出‘start’，然后报错

• class类的静态属性和方法
  类相当于实例的原型，是可以被实例继承的。如果某个方法不想被继承，加上static关键字

class Vue{
   static count = 0
   constructor(){
     // 初始化调用一下add 将 count 0 -> 1
     this.add()
   }
   add(){
     Vue.count ++
   }
 }
 let iCount = new Vue()
 console.log(iCount.count); // undefined
 console.log(Vue.count); //1
 iCount.add()
 console.log(Vue.count); //2

• class类的静态方法也可以被继承

class VueChild extends Vue{}
   let iVue = new VueChild()
   iVue.add()
   console.log(iVue.count); // 2