es6中的class类

es6中的class类之面向对象

class Person {
        constructor (name, age) {
          this.name = name
          this.age = age
        }
        eat () {
          alert(`${this.name} eat something`)
        }
        speak () {
          alert(`My name is ${this.name},age ${this.age}`)
        }
      }
      let zhang = new Person('zhang', 20)
      zhang.eat()
      zhang.speak()
      let wang = new Person('wang', 34)
      wang.eat()
      wang.speak()
    }

继承

class Student extends Person {
        constructor (name, age, number) {
          super(name, age)
          this.number = number
        }
        study () {
          alert(`${this.name} study`)
        }
      }
      let xiaoming = new Student('xiaoming', 10, 'A1')
      xiaoming.study()
      console.log(xiaoming.number)
      xiaoming.eat()
      let xiaohong = new Student('xiaohong', 11, 'A2')
      xiaohong.study()
      xiaohong.speak()

People是父类 公共的 不仅仅服务于Student
继承可将公共方法抽离出来，提高复用，减少冗余

封装

public完全开放
protected 对子类开放
private 对自己开放
ES6尚不支持，可以用typescript来演示

 class Person {
        name
        age
        protected weight //定义protected属性  只有自己和子类可访问
        constructor (name, age) {
          this.name = name
          this.age = age
          this.weight = 120
        }
        eat () {
          alert(`${this.name} eat something`)
        }
        speak () {
          alert(`My name is ${this.name},age ${this.age}`)
        }
      }
      class Student extends Person {
        number
        private girlfriend //定义private屬性
        constructor (name, age, number) {
          super(name, age)
          this.number = number
          this.girlfriend = 'xiaoli'
        }
        study () {
          alert(`${this.name} study`)
        }
        getWeight(){
          alert (`${this.weight}`)
        }
         getFriend(){
          alert (`${this.girlfriend}`)
        }
      }
      let xiaoming = new Student('xiaoming', 10, 'A1')
      xiaoming.study()
      xiaoming.getWeight()
    //   alert(xiaoming.girlfriend) //会报错，只能自己内部使用
      xiaoming.eat()
     xiaoming.getFriend()
      // let xiaohong = new Student('xiaohong', 11, 'A2')
      // xiaohong.study()
      // xiaohong.speak()
    

实例(模拟jQuery)

   class jQuery {
        constructor (seletor) {
          let slice = Array.prototype.slice
          let dom = slice.call(document.querySelectorAll(seletor))
          let len = dom ? dom.length : ''
          for (let i = 0; i < len; i++) {
            this[i] = dom[i]
          }
          this.length = len
          this.seletor = seletor || ''
        }
        append (node) {}
        addClass (name) {}
        html (node) {}
      }
      window.$ = function (seletor) {
        return new jQuery(seletor)
      }
      this.init2()
    },
    init2 () {
      var $p = $('p')
      console.log($p)
      console.log($p.addClass)
    }

**程序执行: 顺序、判断、循环---结构化
面向对象---数据结构化
对于计算机，结构化才是最简单的
编程应该 简单&抽象**