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中复制行和删除行的操作实例
Jun 25 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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/07/12 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
vue的基本用法与常见指令
2017/08/15 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
python中的常量和变量代码详解
2018/07/25 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Django中提示消息messages的设置方式
2019/11/15 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
电信专业应届生自荐信
2013/09/28 职场文书
医疗纠纷协议书
2014/04/16 职场文书
广播体操口号
2014/06/18 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
新郎新娘答谢词
2015/01/04 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书