美文网首页让前端飞web前端开发
JavaScript实现多态和继承的封装操作示例

JavaScript实现多态和继承的封装操作示例

作者: 88b61f4ab233 | 来源:发表于2018-11-29 21:39 被阅读6次

    封装Encapsulation

    如下代码,这就算是封装了

    (function (windows, undefined) {
      var i = 0;//相对外部环境来说,这里的i就算是封装了
    })(window, undefined);
    

    继承Inheritance

    (function (windows, undefined) {
      //父类
      function Person() { }
      Person.prototype.name = "name in Person";
      //子类
      function Student() { }
      Student.prototype = new Person();      //修复原型
      Student.prototype.constructor = Student;  //构造函数
      Student.prototype.supr = Person.prototype; //父类
      //创建子类实例
      var stu = new Student();
      Student.prototype.age = 28;
      Student.prototype.name = "name in Student instance";
      //打印子类成员及父类成员
      console.log(stu.name); //name in Student instance
      console.log(stu.supr.name); //name in Person
      console.log(stu.age); //28
    })(window, undefined);
    

    前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力

    运行结果如下:


    多态Polymorphism

    有了继承,多态就好办了

    //这就是继承了
    (function (windows, undefined) {
      //父类
      function Person() { }
      Person.prototype.name = "name in Person";
      Person.prototype.learning = function () {
        console.log("learning in Person")
      }
      //子类
      function Student() { }
      Student.prototype = new Person();      //修复原型
      Student.prototype.constructor = Student;  //构造函数
      Student.prototype.supr = Person.prototype; //父类
      Student.prototype.learning = function () {
        console.log("learning in Student");
      }
      //工人
      function Worker() { }
      Worker.prototype = new Person();      //修复原型
      Worker.prototype.constructor = Worker;  //构造函数
      Worker.prototype.supr = Person.prototype; //父类
      Worker.prototype.learning = function () {
        console.log("learning in Worker");
      }
      //工厂
      var personFactory = function (type) {
        switch (type) {
          case "Worker":
            return new Worker();
            break;
          case "Student":
            return new Student();
            break;
        }
        return new Person();
      }
      //客户端
      var person = personFactory("Student");
      person.learning(); //learning in Student
      person = personFactory("Worker");
      person.learning(); //learning in Worker
    })(window, undefined);
    

    运行结果如下:

    相关文章

      网友评论

        本文标题:JavaScript实现多态和继承的封装操作示例

        本文链接:https://www.haomeiwen.com/subject/gceqcqtx.html