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 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 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生成图片验证码、点击切换实例
2014/06/25 PHP
php简单判断文本编码的方法
2015/07/30 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python爬取三国演义的实现方法
2016/09/12 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
python基于递归解决背包问题详解
2019/07/03 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python实现静态服务器
2019/09/05 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
市场营销专业推荐信
2013/11/03 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
中秋手机店促销方案
2014/06/16 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
高三复习计划
2015/01/19 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Python编程编写完善的命令行工具
2021/09/15 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers