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

    Python编程 wuya 171次浏览 已收录 0个评论

    面向对象

    • 创建对象
      // 方式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)


    学海无涯 , 版权所有丨如未注明 , 均为原创丨转载请注明js面向对象-js面向对象继承
    喜欢 (0)
    发表我的评论
    取消评论
    表情 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址