js面向对象-js面向对象继承

面向对象

• 创建对象

  // 方式1：先创建空对象，然后添加属性和方法 
  var p = new Object()
  // 添加属性
  p.name = 'dahua'
  // 添加方法
  p.say = function () {
      console.log('I am ' + this.name)
  }
  // 访问属性
  console.log(p.name)
  // 调用方法
  p.say()
  ​
  // 方式2:通过JSON字符串形式(字面量)创建对象
  var p2 = {name: 'ergou', say: function () {
      console.log('I am ' + this.name)
  }}
  console.log(p2.name)
  p2.say()
  ​
  // 方式3:采用类似于构造方法的形式
  function Person(name)
  {
      this.name = name
      this.say = function () {
          console.log('I am ' + this.name)
      }
  }
      
  var p3 = new Person('xiaowang')
  p3.say()
  ​
  // 方式4:ES6中提供的方式
  class Dog
  {
      // 构造方法
      constructor(name) {
          this.name = name
      }
      run() {
          console.log(this.name + '喜欢奔跑')
      }
  }
  ​
  var d = new Dog('旺财')
  d.run()

• 类的继承
  • 构造继承

  // 父类
  function Animal(name)
  {
      this.name = name
      this.sleep = function () {
          console.log(this.name + '正在睡觉zZ~')
      }
  }
  // 添加原型方法
  Animal.prototype.eat = function (food) {
      console.log(this.name + '喜欢吃' + food)
  }
  // 添加原型属性
  Animal.prototype.color = '橘黄色'
      
  // 子类
  function Cat(name, age=1)
  {
      Animal.call(this, name)
      // 添加属性和方法
      this.age = age
  }
  ​
  var jiafei = new Cat('加菲')
  jiafei.sleep()
  ​
  // 原型链上的属性和方法都无法继承
  // jiafei.eat('可比克')
  // console.log(jiafei.color)
  ​
  console.log(jiafei instanceof Cat)
  // 子类对象不属于父类
  console.log(jiafei instanceof Animal)

  1.不能继承原型链上的属性和方法 2.子类对象不是父类对象

  • 原型继承

  // 父类
  function Animal(name)
  {
      this.name = name
      this.sleep = function () {
          console.log(this.name + '正在睡觉zZ~')
      }
  }
  // 添加原型方法
  Animal.prototype.eat = function (food) {
      console.log(this.name + '喜欢吃' + food)
  }
  // 添加原型属性
  Animal.prototype.color = '橘黄色'
  ​
  // 子类
  function Cat(name)
  {
      this.name = name
  }
  ​
  // 原型继承:无法向父类传参
  Cat.prototype = new Animal()
  // 添加原型属性和方法必须在设置原型之后
  Cat.prototype.xxx = 'xxx'
  ​
  // 修正构造方法的指向
  Cat.prototype.constructor = Cat
      
  var jiafei = new Cat('加菲')
  jiafei.sleep()
  // 可以继承原型方法
  jiafei.eat('薯条')
      
  // 子类对象属于父类
  console.log(jiafei instanceof Animal)

  1.新增的原型属性和方法必须写在设置原型对象之后 2.创建子类对象时，无法向父类传参

  • 组合继承

  // 父类
  function Animal(name)
  {
      this.name = name
      this.sleep = function () {
          console.log(this.name + '正在睡觉zZ~')
      }
  }
  // 添加原型方法
  Animal.prototype.eat = function (food) {
      console.log(this.name + '喜欢吃' + food)
  }
  // 添加原型属性
  Animal.prototype.color = '橘黄色'
  ​
  // 子类
  function Cat(name)
  {
      Animal.call(this, name)
  }
  ​
  Cat.prototype = new Animal()
  Cat.prototype.constructor = Cat
  ​
  var jiafei = new Cat('加菲')
  jiafei.sleep()
  // 可以继承原型方法
  jiafei.eat('薯条')
  // 子类对象属于父类
  console.log(jiafei instanceof Animal)

  调用了两次父类的构造方法，生成两份实例(子类的属性和方法将原型上的屏蔽了而已)

  • 寄生组合继承

  // 父类
  function Animal(name)
  {
      this.name = name
      this.sleep = function () {
          console.log(this.name + '正在睡觉zZ~')
      }
  }
  // 添加原型方法
  Animal.prototype.eat = function (food) {
      console.log(this.name + '喜欢吃' + food)
  }
  // 添加原型属性
  Animal.prototype.color = '橘黄色'
  ​
  // 子类
  function Cat(name)
  {
      Animal.call(this, name)
  }
  ​
  (function () {
      var Super = function () {}
      // 设置父类的原型对象
      Super.prototype = Animal.prototype
      // 设置原型
      Cat.prototype = new Super()
      // 修正构造方法
      Cat.prototype.constructor = Cat
  })()
  ​
  var jiafei = new Cat('加菲')
  jiafei.sleep()
  // 可以继承原型方法
  jiafei.eat('薯条')
  // 子类对象属于父类
  console.log(jiafei instanceof Animal)

  实现略微复杂

  • ES6的继承

  // 父类
  class Animal
  {
      constructor(name) {
          this.name = name
      }
      // 所有的属性和方法默认都在原型上
      sleep() {
          console.log(this.name + '正在睡觉zZ~')
      }
  }
  ​
  // 子类
  class Cat extends Animal
  {
      constructor(name, age) {
          // 调用父类方法
          super(name)
          // 添加属性
          this.age = age
      }
      run() {
          console.log(this.name + '成天迈着优雅的步子')
      }
  }
  ​
  var jiafei = new Cat('加菲', 3)
  jiafei.sleep()
  jiafei.run()
  console.log(jiafei instanceof Animal)

  ​