Javescript 面向对象编程 — 封装

Posted 2020-08-29 On the road

 

• 生成实例对象的原始模式

    <script type="text/javascript">
         var Cat={
             name:‘波斯猫‘,
             color:‘White‘
         }
         alert(cat.name);
     </script>

这是简单的封装，单若需要生成多个示例，则需要多生成多个示例，较为麻烦，如下：

<script type="text/javascript">
        var cat={
            name:‘波斯猫‘,
            color:‘White‘
        }
        var cat1={
            name:‘折耳猫‘,
            color:‘orange‘
        }
        var cat2={
            name:‘美国卷毛猫‘,
            color:‘White‘
        }
    </script>

 

•  原始模式的改进

     将生成实例的过程封装成一个方法，生成实例对象是，再调用方法，代码如下：

<script type="text/javascript">
        var cat3=NEWCat("折耳猫","orange");
        var cat4=NEWCat("波斯猫","White");
        function NEWCat(name,color)
        {
            var cat={
                name:name,
                color:color
            }
            return cat
        }
    </script>

    这种方法存在的问题是两个实例之间没有存在内部联系，不能反应出它们是同一原型对象的实例

• 构造函数模式

    为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

    所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

    this指的是调用函数的那个对象（后续学习总结this变量）

   <script type="text/javascript">
        var cat3= new Cat("折耳猫","orange");
        var cat4= new Cat("波斯猫","White");
        alert(cat3.name);
        alert(cat4.name);
        function  Cat(name,color)
        {
          this.name=name;
          this.color=color;
        }
    </script>

    cat3和cat4会含有一个constructor属性，指向它们的构造函数：

      alert(cat3.constructor == Cat); //true

alert(cat4.constructor == Cat); //true 

   Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系：

      alert(cat3 instanceof Cat); //true

alert(cat4 instanceof Cat); //true 

但是，构造函数方法存在浪费内存的问题。

例如，若Cat对象内含有不变的属性type（种类），再添加一个方法eat（吃），