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 相关文章推荐
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
jquery实现弹出层效果实例
May 19 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php中rename函数用法分析
2014/11/15 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
js实现文字截断功能
2016/09/14 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
python getopt 参数处理小示例
2009/06/09 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python实现批量图片格式转换
2020/06/16 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python中栈的原理及实现方法示例
2019/11/27 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
实习求职信
2013/12/01 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
化工厂员工工作总结
2015/10/15 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL