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滑动门代码
Dec 19 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 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
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python自定义类并使用的方法
2015/05/07 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
简析Python的闭包和装饰器
2016/02/26 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python之时间和日期使用小结
2019/02/14 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
pandas apply多线程实现代码
2020/08/17 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
校园创业策划书
2014/01/14 职场文书
社会实践活动总结报告
2014/04/29 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
读群众路线的心得体会
2014/09/03 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
感恩主题班会教案
2015/08/12 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA