今天学习了js中的对象,现在还是初学,写的不好,只是自己做做笔记,以后要用方便翻阅。下面是对js中对象创建的一些总结:
1.基本模式
(1)用new操作符后面跟Object构造函数,如下所示:
<span style="font-family:Microsoft YaHei;font-size:14px;">var phone=new Object();
phone.name='手机';
phone.size=5.5;</span>
(2)对象字面量表示法,是对含有大量属性的对象的一种简写方式,如下:
<span style="font-size:14px;">var phone={
// 属性/值中间用分号隔开,每一对之间用逗号隔开
name:'手机',
size:'5.5',
}</span>
注意:属性名可以添加引号,属性名中有空格、- 等连接必须加引号
缺陷:(1)创建多个对象时比较繁琐,效率低,比较适合创建单个临时的对象;(2)实例与原型之间看不出什么联系;
2.工厂模式
其实就是把基本模式中创建对象的过程封装到一个函数中,如下所示:
<span style="font-family:Microsoft YaHei;font-size:14px;">function createPhone(name,size){
var phone=new Object();
phone.name=name;
phone.size=size;
phone.run=function (){
alert('具有打电话的功能');
}
return phone;
}
var phone1=createPhone('手机',5.5);</span>
问题:(1)实例之间没有内在联系,不能反映出它们是同一个原型对象的实例;(2)没有使用new关键字创建函数;(3)浪费资源,生成一个实例就开辟一个内存。
3.构造函数模式
构造函数跟创建函数类似,它将属性和方法赋给了this对象,没有return语句,如下所示:<span style="font-family:Microsoft YaHei;font-size:14px;">function Phone(name,size){
// 按照惯例,构造函数名第一个字母要大写
this.name=name;
this.size=size;
this.run=function (){
alert('具有打电话的功能');
}
}
var phone1=new Phone('手机',5.5);
// 用new关键字生成实例,不用new关键字调用就跟普通函数没有区别</span>
问题:每实例化一次都要把里面的内容重新加载一次,占用内存,缺乏效率
4.原型模式
用prototype(原型)属性创建实例的原型对象,实例可以共享它包含的属性和方法,如下所示:
<pre name="code" class="javascript"><span style="font-family:Microsoft YaHei;font-size:14px;">function Phone(){}
Phone.prototype.name='手机';
Phone.prototype.size=5.5;
Phone.prototype.run=function (){
alert('具有打电话的功能');
}
var phone1=new Phone();</span>
问题:不能传递函数初始化属性的值,不能共享对象
4.组合模式
就是构造函数模式跟原型模式的组合,用构造函数定义非函数属性,原型方式定义方法,这种方法最为常见,如下:
<span style="font-family:Microsoft YaHei;font-size:14px;">function Phone(name,size){
Phone.name=name;
Phone.size=size;
}
Phone.prototype.run=function (){
alert('具有打电话的功能');
}
var phone1=new Phone('手机',5.5);</span>
问题:解决了每次实例化的都要初始化,不能传参的问题,不够也不是完美,没有体现良好的封装性
4.动态原型模式
为解决组合模式的封装性,把原型定义的方法放到构造函数中,如下所示:
<span style="font-family:Microsoft YaHei;">function Phone(name,size){
Phone.name=name;
Phone.size=size;
// 方法初始化一次即可,用if语句判断,如果方法undefined,执行一次
if(typeof this.run=='undefined'){
Phone.prototype.run=function (){
alert('具有打电话的功能');
}
}
}
var phone1=new Phone('手机',5.5);</span>