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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Python处理session的方法整理
2019/08/29 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
css3教程之倾斜页面
2014/01/27 HTML / CSS
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
请用用Java代码写一个堆栈
2012/01/26 面试题
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
局域网标准
2016/09/10 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
实习生个人的自我评价
2013/12/08 职场文书
大型演出策划方案
2014/05/28 职场文书
禁止酒驾标语
2014/06/25 职场文书
与死神共舞观后感
2015/06/15 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android