• Javascript基础与面向对象基础~第四讲 Javascript中的类对象


    回到目录 

      今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声“抱歉”!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一般是从这点上看出来的。

    占占对类的定义:

    类是对现实中的事物的抽象,一个类一般由属性和方法构成,属性是一些固定的信息,而方法是类的某种行为,类往往用来抽象一些复杂的对象,类与类这间可以进行继承,一般通过JS的function实现,JS中的类对象是实现JS面向对象的基础。

    占占对结构体的定义:

    一个结构体也是对现实事物的一种抽象,它用来表示逻辑简单的对象,一般通过JS的object对象实现

    实现结构体的代码:

          //简单结构体对象
            var Animal = {
                Name: "动物",
                Type: "",
                Food: ["草", "肉"],
                Print: function () {
                    console.log("名称:" + this.Name + ",类型:" + this.Type + ",食物:" + this.Food);
                }
            };
            Animal.Print();//调用

    实现复杂的类的代码:

         //复杂的类型对象
            var AnimalFun = function (name, type) {
                this.Name = name;
                this.Type = type;
                this.Food = ["草", "肉"];
                this.Print = function () {
                    console.log("名称:" + this.Name + ",类型:" + this.Type + ",食物:" + this.Food);
                }
            };
            var animalFun = new AnimalFun();
            animalFun.Print();

    子类去继承父类,但复写父类的属性,调用父类的方法,代码如下:

         //子类可以继承父类,并可以复写它的属性
            var Dog = function (name, type, food) {
                //调用父类构造方法,并传递name参数  
                AnimalFun.call(this, name, type);
                //复写属性  
                this.Food = food;
            }
    
            //将Dog的原型链指向AnimalFun对象  
            Dog.prototype = new AnimalFun();
            //重置constructor属性为Student类,由于设置了Student类的prototype为Person时  
            //擦除了constructor属性  
            Dog.prototype.constructor = Dog;
            //实例化Dog类  
            var s = new Dog('狗', '低级动物', '肉');
            //调用父类的方法  
            s.Print(); //结果:名称:狗,类型:低级动物,食物:肉

    小知识:JS实现类的继承的机制是这样的:

    在子类构造函数(constructor)中调用父类构造函数(父类.call()).

    修改子类prototype(原型链)属性为父类的实例.(prototype一般用来实现对函数的扩展,Dog.prototype = new AnimalFun();表示对父类AnimalFun进行扩展)

    重置子类的prototype的constructor属性为子类.

    感谢您的阅读!

    回到目录

  • 相关阅读:
    影响CSS的margin合并的几个属性
    Mouse w/o Borders实现两台主机共用一套键鼠方法及问题处理
    隐藏"Input"标签默认样式
    如何快速开发网站?
    如何让Web.xml变得简洁?
    关于中文处理方面的研究
    Hello,World 百态
    UI开发的终极解决方案
    构建网络爬虫?so easy
    MDA数据校验规则定义
  • 原文地址:https://www.cnblogs.com/lori/p/2872547.html
Copyright © 2020-2023  润新知