• JS-面向对象-封装


    --参考文献;

    --http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

    --js面向对象 封装,继承;

    一  .首先,我们先来看看,非面向对象模式编程;陈宇代码多,不灵活,浪费内存;

      var cat1 = {}; // 创建一个空对象

        cat1.name = "大毛"; // 按照原型对象的属性赋值

        cat1.color = "黄色";

      var cat2 = {};

        cat2.name = "二毛";

        cat2.color = "黑色";

        如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。

       简直就是面向过程编程,一个对象一个”类“的感觉;

      二、 原始模式的改进

            解决代码重复的问题。

      function Cat(name,color){

        return {

          name:name,

          color:color

        }

      }

    然后生成实例对象,就等于是在调用函数:

       

          var cat1 = Cat("大毛","黄色");

      var cat2 = Cat("二毛","黑色");

    种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例

    三.构造函数模式 

     function Cat(name,color){

       this.name=name;

       this.color=color;

       this.type="猫科动物";

       this.action=function (){

           alert("eat...")

       }

     }

    生成实例:

                var cat1=new Cat("一毛","白色");    

                var cat2=new Cat("二毛","黑色");    

                cat1 和 cat2 来自两个同一个原型对象实例;

                可以使用 alert (cat1.constructor==Cat)  指向它们的构造函数。//true

                 可以使用 alert (cat2.constructor==Cat)  指向它们的构造函数。//true

      缺点:

                对于每一实例对象;type 和 eat()方法都一模一样;

                每一次生成实例,都必须为重复的内容,多占一些内存;

     改进:

        四 prototype模式。

        Cat.prototype.type="猫科动物";

        Cat.prototype.action=function (){alert("eat...")};

      --prototype  其实都是指向同一个内存地址;类似,c#中的静态方法;

      --它是被类所共有的;

       isPrototypeOf()

    这个方法用来判断,某个proptotype对象和某个实例之间的关系。

      alert(Cat.prototype.isPrototypeOf(cat1)); //true

      alert(Cat.prototype.isPrototypeOf(cat2)); //true

      hasOwnProperty()

    每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。

      alert(cat1.hasOwnProperty("name")); // true

      alert(cat1.hasOwnProperty("type")); // false

        in运算符

    in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。

      alert("name" in cat1); // true

      alert("type" in cat1); // true

    in运算符还可以用来遍历某个对象的所有属性。

    in运算符还可以用来遍历某个对象的所有属性。

      for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

    总结:

       

    对于直接使用{}创建对象..这种情况在创建极少数对象的情况下且不需要封装的情况下使用,对于需要批量创建对象的情况使用构造函数来实例化对象就非常方便 主要还是看具体的情况吧 。
    1.{}可以算做是一个单例模式;
    2.function 这种 每次 new的时候,都返回一个不同对象

  • 相关阅读:
    Docker+Nginx 部署Vue+Element前端项目
    MySql取字段逗号分隔的第一个
    Mysql数据库中从表字段中存储了主表以逗号隔开的主键ID,现需求查询从表数据以及以逗号隔开的字段改为主表名称隔开(group_count() find_in_set())
    IIS 错误500.21解决方法
    IIS 出现500.19 错误处理解决方式
    Linux中vim的三种模式
    Centos7 .Net Core 使用Supervisor守护进程,进行后台运行
    Nginx反代理ASP.NET Core项目
    C# vb .net实现圆角矩形特效滤镜
    C# vb .net实现旋转特效滤镜
  • 原文地址:https://www.cnblogs.com/mc67/p/4803000.html
Copyright © 2020-2023  润新知