【Javescript】封装
- 生成实例对象的原始模式
<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(吃),