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学习之prop和attr的区别示例介绍
Nov 15 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
详解Layer弹出层样式
Aug 21 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
Vue-Router的使用方法
Sep 05 Javascript
微信小程序实现搜索历史功能
Mar 26 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微信分享开发详解
2017/01/14 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
详解redux异步操作实践
2018/08/15 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
ES6小技巧之代替lodash
2019/06/07 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
Vue实现简易计算器
2020/02/25 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
Python中函数参数调用方式分析
2018/08/09 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
2014银行授权委托书样本
2014/10/04 职场文书
小学端午节活动总结
2015/02/11 职场文书
《鲸》教学反思
2016/02/23 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python