zoukankan      html  css  js  c++  java
  • JavaScript 面向对象编程

    写的项目需要把js封装处理,不然很乱。。然后就想到前端大神阮一峰了,去blog搜索一下果然有收获

    参考文章:

    Javascript定义类(class)的三种方法

    Javascript 面向对象编程(一):封装

    此处使用极简主义法:

    如何定义一个类:

    此法是定义一个生成器以及构造函数(类似工厂模式吧)

    var Cat = {

        createNew: function(){

        var cat = {};

        cat.name = "大毛";

        cat.makeSound = function(){ alert("喵喵喵"); };

        return cat;

      }

    };

    Cat是生成器类,createNew是一个构造器函数,cat是实体对象,cat.name是成员变量

    如何调用构造器:

    var cat1 = Cat.createNew();
    cat1.makeSound(); // 喵喵喵

    如何定义私有变量:

    cat.name是一个公有变量,外部可以直接访问

    定义私有变量的方法则是在构造函数里定义一个局部变量,这样只有类的成员函数能够访问这个变量了,外部访问是undefined

    var Cat = {
        createNew: function(){
        var cat = {};
        var sound = "喵喵喵";
        cat.makeSound = function(){ alert(sound); };

        var privateFun() {alert("private")}
        cat.publicFun() {
          privateFun(); //注意这里不能用this.privateFun();,会报错
          alert("public");
        }
        
    return cat;   } };

    测试结果

    var test = Cat.createNew();
    test.privateFun(); // undefined
    test.publicFun(); // "private" "public"

    如何定义静态变量(数据共享):

    在Cat这个构造类内定义变量。。这就涉及到闭包的知识了,Cat类只存在一个实力,而cat1=Cat.createNew(),实际上是在Cat类的一个子函数定义一个变量,子函数是可以访问父类/父函数内的变量的,所以无论那个实体类修改Cat的成员变量的时候,Cat这个类里的变量就修改了,就实现了相当于Java的静态变量的功能了

    var Cat = {
        sound : "喵喵喵",
        createNew: function(){
        var cat = {};
        cat.makeSound = function(){ alert(Cat.sound); };
        cat.changeSound = function(x){ Cat.sound = x; };
        return cat;
      }
    };

    这样sound就是一个静态变量

    然后生成两个实例对象并用其中一个修改sound

    var cat1 = Cat.createNew();
    var cat2 = Cat.createNew();
    cat1.makeSound(); // 喵喵喵
    
    cat2.changeSound("啦啦啦");
    cat1.makeSound(); // 啦啦啦

    cat2.changeSound("啦啦啦");

      cat1.makeSound(); // 啦啦啦

  • 相关阅读:
    Redis 存储字符串和对象
    深入理解Java中的final关键字
    Redis缓存Object,List对象
    JVM最多能创建多少个线程: unable to create new native thread
    Java中如何使用Redis做缓存
    Fiddler抓包11-HTTPS证书Actions无法导出问题
    Fiddler抓包10-会话框添加查看get与post请求类型
    python接口自动化10-token登录
    python接口自动化9-https请求(SSL)
    python爬虫beautifulsoup4系列4-子节点
  • 原文地址:https://www.cnblogs.com/someblue/p/4330770.html
Copyright © 2011-2022 走看看