转自js面向对象 多种创建对象方法小结

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();

这里我们将属性放在构造函数中,更显得对象的具体性。

js面向对象 多种创建对象方法小结的更多相关文章

  1. 浅谈JS面向对象之创建对象

    hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...

  2. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  3. js面向对象,多种创建对象方法!

    1.对象字面量. var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(this.hour+":&quo ...

  4. js面向对象之创建对象

    工厂模式 function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = ...

  5. js生成随机数的方法小结

    js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任意随机数就好理解了.比如实际中 ...

  6. JS面向对象之创建对象模式

    虽然Object构造函数或对象字面量都可以用来创建单个对象,但都有一个缺点,使用同一个接口来创建对象,会产生大量重复的代码,为解决这个问题,引出下列方法 1.工厂模式 抽象了创建具体对象的过程,用函数 ...

  7. js面向对象编程——创建对象

    JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象. 当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找 ...

  8. JS面向对象设计-创建对象

    Object构造函数和对象字面量都可以用来创建单个对象,但是在创建多个对象时,会产生大量重复代码. 1.工厂模式 工厂模式抽象了创建具体对象的过程.由于ECMAScript无法创建类,我们用函数来封装 ...

  9. js面向对象的使用方法

    标准用法: function Sprite(){ //函数内容部设置属性 this.name='shimily'; } //原型上设置方法 Sprite.prototype.show=function ...

随机推荐

  1. python lmdb demo 这接口和BDB一样恶心啊!

    import lmdb lmdb_img_name = "test.lmdb" env = lmdb.open(lmdb_img_name, map_size=1e6) with ...

  2. leetcode二分查找相关

    目录 33/81搜索旋转排序数组 34在排序数组中查找元素的第一个和最后一个位置 35搜索插入位置 74搜索二维矩阵 300最长上升子序列,354俄罗斯套娃信封问题 33/81搜索旋转排序数组 假设按 ...

  3. 0605-类的继承、重写、parent、final

    定义一个子类(man) //定义一个类 class renlei{ var $name = '王五'; var $age = ''; var $sex = ''; var $todo = ''; fu ...

  4. java反射机制学习小结

    之前一直对java的反射机制理解得很模糊,今天因为学习spring,所以花了些时间总算把它理顺了,记录一下 另外,推荐读读这篇文章,写的挺好的http://blog.csdn.net/woshixuy ...

  5. php中curl的详细解说 【转载】

    这几天在帮一些同学处理问题的时候,突然发现这些同学是使用file_get_contents()函数来采集页面内容的,貌似都没有curl的概念亦或是对这种工具特别不敏感, 本文我来给大家详细介绍下cUR ...

  6. Spring 的优秀工具类盘点---转

    第 1 部分: 文件资源操作和 Web 相关工具类 http://www.ibm.com/developerworks/cn/java/j-lo-spring-utils1/ 文件资源操作 文件资源的 ...

  7. JavaScript 浏览器事件解读

    1. 事件基本概念 事件是指在文档或者浏览器中发生的一些特定交互瞬间,比如打开某一个网页,浏览器加载完成后会触发 load 事件,当鼠标悬浮于某一个元素上时会触发 hover 事件,当鼠标点击某一个元 ...

  8. 前端HTML中float学习笔记

    float元素原本的作用是用来使文字包裹图片,现在人们更多的是用来进行布局(ps:有没有点滥用的意思) 也就是说本来你排好的界面设计,但是因为浮动会导致元素脱离文档流,使得其他非浮动的块级元素会无视这 ...

  9. Android Activity has leaked window that was originally added

    今天调试程序时log中突然打印这样的错误,但是程序并没有crash,为了不放过一个错误,我决定调查一下. 当时是离开一个activity,然后提示是否退出此界面,接下来就打印此错误: - ::): A ...

  10. android黑科技系列——分析某直播App的协议加密原理以及调用加密方法进行协议参数构造

    一.前言 随着直播技术火爆之后,各家都出了直播app,早期直播app的各种请求协议的参数信息都没有做任何加密措施,但是慢慢的有人开始利用这个后门开始弄刷粉关注工具,可以让一个新生的小花旦分分钟变成网红 ...