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对象链式操作代码(jquery)
Jul 04 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
文章推荐系统(二)
2006/10/09 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python 创建一维的0向量实例
2019/12/02 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Python魔术方法专题
2020/06/19 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
办理退休介绍信
2014/01/09 职场文书
校庆接待方案
2014/03/18 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers