面向过程,面向对象

105 阅读2分钟

trim

去除字符串两边的空格

获取对象的属性名

Object.keys获取当前对象中的属性名,返回值是一个数组

Object.defineproperty

设置或者修改对象中的属性

面向过程

分析出解决问题所需要的步骤,用函数将这些步骤一步步实现,使用时再一个个的依次调用就行

面向对象

  • 把事务分解成一个个对象,由对象之间分工与合作

  • 面向过程:不易维护,不易复用

  • 面向对象:易维护,易服用,面向对象有多态,继承,封装的特性,使系统更加灵活

  • 在ES6中,新增了类的概念,可以用class类关键字声明一个类,之后用这个类来实例化对象,类抽象了对象的公共部分,指某一大类对象,通过实例化一个具体的对象
  • 类是构造函数的语法糖(简写)

创建类

   class Star {
        // 类的共有属性放到 constructor
        // 类实例化对象时候执行constructor
        // constructor 是构造器 或者构造函数
        constructor(name, age) {
          this.name = name
          this.age = age
        }
      }

      var ldh = new Star('刘德华', 18)
      console.log(ldh)

      // 结果 类创建的对象 和构造函数创建对象的结果是一样的

类中添加方法

 <script>
      // 创建类   创建一个明星类
      class Star {
        // 类的共有属性放到 constructor
        // 类实例化对象时候执行constructor
        // constructor 是构造器 或者构造函数
        constructor(name, age) {
          this.name = name
          this.age = age
        }
        // ---类里面所有的函数不需要写function
        // ----多个函数之间不需要添加逗号分割
        sing(song) {
          console.log(this.name + song)
        }
      }

      var ldh = new Star('刘德华', 18)
      var zxy = new Star('张学友', 20)
      // console.log(ldh)

      ldh.sing('冰雨')
      zxy.sing('李香兰')

      // 结果 类创建的对象 和构造函数创建对象的结果是一样的
    </script>

总结

  • 通过class关键字创建类,类名的首字母要大写
  • 类里面有个constructor函数,可以接收传递过来的参数,返回实例对象
  • constructor函数只要new生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
  • 多个函数之间不需要用逗号分割
  • 生成实例new不能省略
  • 创建类,类名后面不能加小括号,生成实例,类名后面的加小括号,类里面的函数不需要加function
  class Father {
        constructor(name, age) {
          this.name = name
          this.age = age
        }
        money() {
          console.log(10000)
        }
      }

      class Son extends Father {
        constructor(name, age, score) {
          // 调用父类的构造函数
          super(name, age)
          this.score = score
        }
      }

      var s = new Son('ldg', 13, 100)
      console.log(s)

类的继承

<script>
      class Father {
        constructor(x, y) {
          this.x = x
          this.y = y
        }
        sum() {
          console.log(this.x + this.y)
        }
      }

      class Son extends Father {
        constructor(x, y) {
          super(x, y) //调用了父类中的构造函数
        }
      }

      var son = new Son(1, 3)
      console.log(son)
      var son1 = new Son(3, 4)
      son.sum()
      son1.sum()
    </script>