js面向对象 多种创建对象方法小结


Posted in Javascript onMay 21, 2012

开始创建对象:

 1.对象字面量。

var clock={ 
hour:12, 
minute:10, 
second:10, 
showTime:function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
} 
} 
clock.showTime();//调用

2.创建Object实例
var clock = new Object(); 
clock.hour=12; 
clock.minute=10; 
clock.showHour=function(){alert(clock.hour);}; clock.showHour();//调用

由此可见 属性是可以动态添加,修改的

对象创建模式:

1.工厂模式:就是一个函数,然后放入参数,返回对象,流水线工作

function createClock(hour,minute,second){ 
var clock = new Object(); 
clock.hour=hour; 
clock.minute=minute; 
clock.second=second; 
clock.showHour=function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
}; 
return clock; 
}; 
var newClock = createClock(12,12,12);//实例化 
newClock.showHour();//调用

优点:总算优点抽象的概念了。但是不能识别对象的类型呢!

2.构造函数模式

function clock(hour,minute,second){ 
this.hour = hour; 
this.minute = minute; 
this.second = second; 
this.showTime = function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
} 
} 
var newClock =new clock(12,12,12); 
alert(newClock.hour);

注意:这个new关键字是必须,如果不加,clock就不会当成构造函数调用,而只是一个普通的函数。同时,还会意外地给他的外部作用域即window添加属性,因为此时构造函数内部的this已经映射到了外部作用域了。所以为了安全起见,可以这样创建
function clock(hour,minute,second){ 
if(this instanceof clock){ 
this.hour = hour; 
this.minute = minute; 
this.second = second; 
this.showTime = function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
} 
} 
else{ 
throw new Error("please add 'new' to make a instance"); 
} 
}

构造函数的缺点:由于this指针在对象实例的时候发生改变指向新的实例。这时新实例的方法也要重新创建,如果n个实例就要n次重建相同的方法。于是让我们来揭开原型模式吧

3.原型模式

function clock(hour,minute,second){ 
} 
clock.prototype.hour=12; 
clock.prototype.minute=12; 
clock.prototype.second=12; 
clock.prototype.showTime=function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
} 
var newClock = new clock(); 
newClock.showTime();

深度理解原型模型很重要,

首先,每个函数都有一个prototype(原型)属性,这个指针指向的就是clock.prototype对象。而这个原型对象在默认的时候有一个属性constructor,指向clock,这个属性可读可写。而当我们在实例化一个对象的时候,实例newClock除了具有构造函数定义的属性和方法外(注意,只是构造函数中的),还有一个指向构造函数的原型的指针,ECMAScript管他叫[[prototype]],这样实例化对象的时候,原型对象的方法并没有在某个具体的实例中,因为原型没有被实例。(废话有点多,没有误导您吧。别晕)

所以这种模式定义的对象,在调用方法的时候过程:调用newClock.showTime();先看实例中有没有,有调之,无追踪到原型,有调之,无出错,调用失败。

当然可以这样写:

function clock(hour,minute,second){ 
} 
clock.prototype={ 
constructor:clock, //必须手动设置这个属性,不然就断了与构造函数的联系了。没有实例共享原型的意义了。 
hour:12, 
minute:12, 
second:12, 
showTime:function(){ 
alert(this.hour+":"+this.minute+":"+this.second) 
} 
} 
var newClock = new clock(); 
newClock.showTime();

注意:实例与构造函数原型的联系也是通过指针来联系的,故可以动态添加修改原型的方法。

这种纯原型的模式问题也很明显,所有的属性,方法都是共享的,不能让对象具体化。常常我们想每个对象有自己的属性。于是,结合前两种,产生新的模式

4.构造-原型组合模式。

function clock(hour,minute,second){ 
this.hour = hour; 
this.minute = minute; 
this.second = second; 
} clock.prototype.showTime=function(){alert(this.hour+":"+this.minute+":"+this.second);} 
var newClock = new clock(12,12,12); 
newClock.showTime();

这里我们将属性放在构造函数中,更显得对象的具体性。
Javascript 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
jquery 插件学习(一)
Aug 06 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 #Javascript
游览器中javascript的执行过程(图文)
May 20 #Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 #Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 #Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 #Javascript
JQuery选择器特辑 详细小结
May 14 #Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 #Javascript
You might like
php cookie的操作实现代码(登录)
2010/12/29 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
javascript各种复制代码收集
2008/09/20 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
python多线程http下载实现示例
2013/12/30 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
pandas 时间格式转换的实现
2019/07/06 Python
python3实现高效的端口扫描
2019/08/31 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python 使用type来定义类的实现
2019/11/19 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
新三好学生主要事迹
2014/01/23 职场文书
小学生学习保证书
2015/02/26 职场文书
面试复试通知单
2015/04/24 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android