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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
node.js的事件机制
Feb 08 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
JS随机数产生代码分享
Feb 24 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
el-table树形表格表单验证(列表生成序号)
May 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通用检测函数集合
2006/11/25 PHP
php 缓存函数代码
2008/08/27 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
详解Angular如何正确的操作DOM
2018/07/06 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
django使用graphql的实例
2020/09/02 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
爱国口号
2014/06/19 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
Python图片检索之以图搜图
2021/05/31 Python