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 document.execCommand() 常用解析
Dec 14 Javascript
javascript 闭包
Sep 15 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
JS模板实现方法
2013/04/03 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
React diff算法的实现示例
2018/04/20 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
深入理解Python装饰器
2016/07/27 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python程序 创建多线程过程详解
2019/09/23 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
求网格中的黑点分布
2013/11/06 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
公司委托书范本
2014/04/04 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
班级标语大全
2014/06/21 职场文书
银行授权委托书范本
2014/10/04 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
解决vue中provide inject的响应式监听
2022/04/19 Vue.js