Js——面向对象

基本概念

类：类型、模板、统称（狗类、猫类）

对象：是类的一个类别，会具体到某一事物上（天上飞的那只鸟，家里的那只猫）

继承：狗类继承至哺乳动物类，猫类也继承到哺乳动物类，继承后，子类可以使用父类的属性和方法

新语法与旧语法

ES5面向对象语法（prototype）

构造函数：用于创建对象的函数

原型对象：prototype

​    // es5没有类的概念，通过构造函数来实现类
    // 构造函数的函数名，首字母大写
    // 构造函数是用来创建对象用的
    function Cat (name, age) {
      this.name = name
      this.age = age
    }

    // 通过原型对象，为构造函数生成的对象赋予新的方法
    Cat.prototype.sayName = function () {
      console.log(`我的名字是${this.name}`)
    }

    var cat = new Cat("猫猫", 3)   //创建了一个对象，猫类的实例
    var bigCat = new Cat("小猫", 2)
    cat.sayName()
    bigCat.sayName()
​

原型链：实现继承（了解）

    function Aniaml (name) {
      this.name = name
    }

    Aniaml.prototype.sayName = function () {
      console.log(`你好，我是${this.name}`)
    }

    Aniaml.prototype.sayHello = function () {
      console.log("hello!!!")
    }

    function Dog (name) {
      this.name = name
    }

    Dog.prototype = new Aniaml()

    var a = new Aniaml("小羊")
    a.sayName()

    var dog = new Dog("小黑")
    dog.sayName()
    dog.sayHello()
    // 子类构造函数可以调用父类构造函数的所有属性和方法

ES6（2015）面向对象语法

Class关键字

    // ES2015(ES6)
    class Dog {
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      sayName () {
        console.log(`我是${this.name}`)
      }
    }
    let dog = new Dog("小黑", 2)
    dog.sayName()

继承

   class Animal {
      constructor(name) {
        this.name = name
      }
      sayName () {
        console.log(`我是${this.name}`)
      }
    }
    class Dog extends Animal {
      constructor(name, age) {
        super(name)
        this.age = age
      }
    }
    let dog = new Dog("小黑", 2)
    console.log(dog.age);

总结：前端开发过程中，大部分情况我们不需要通过定义类来完成开发任务，但是很多时候我们会使用别人定义的类（例如第三方库或框架）

练习：

1. 扩展Date对象实现如下功能，实现dateFormate方法，返回值是"xxxx年xx月xx日"

2. 定义一个Person类，让Student类和Teacher类继承Person，为Person类添加getInformation方法，使Student类和Teacher类都可以通过此方法获取个人信息