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 修改URL参数(实现代码)
Jul 08 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
JS原型与继承操作示例
May 09 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
Python入门篇之条件、循环
2014/10/17 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
利用python开发app实战的方法
2019/07/09 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
详解Python中的文件操作
2021/01/14 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
新春寄语大全
2014/04/09 职场文书
综治宣传月活动总结
2014/04/28 职场文书
2014企业年终工作总结
2014/12/23 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
《打电话》教学反思
2016/02/22 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Oracle锁表解决方法的详细记录
2022/06/05 Oracle