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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
js 窗口抖动示例
Sep 04 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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判断字符以及字符串的包含方法属性
2008/08/30 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php模板原理讲解
2013/11/13 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
python查看zip包中文件及大小的方法
2015/07/09 Python
Python面向对象特殊成员
2017/04/24 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python3标准库总结
2019/02/19 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
小学生新学期寄语
2014/01/19 职场文书
保护环境建议书100字
2014/05/13 职场文书
助残日活动总结
2014/08/27 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技