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 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
react 路由Link配置详解
Nov 11 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解析url的三个示例
2014/01/20 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php异常处理方法实例汇总
2015/06/24 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
什么是数据抽象
2016/11/26 面试题
syb养殖创业计划书
2014/01/09 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
环保项目建议书
2014/08/26 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
遗失证明范文
2015/06/19 职场文书
安全学习心得体会范文
2016/01/18 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB