转自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. 【POJ 3074】 Sudoku

    [题目链接] http://poj.org/problem?id=3074 [算法] 将数独问题转化为精确覆盖问题,用Dancing Links求解 转化方法如下 : 我们知道,在一个数独中 : 1. ...

  2. B1085 [SCOI2005]骑士精神 A*搜索

    其实就是一个爆搜加剪枝.直接爆搜肯定不行,而A*算法则是想假如剩下都是最优的话,我当前步数还是不足以达到这个状态,那么就直接返回,因为最优状态也无法做到显然不行. 这道题可以用A*最主要就是因为有15 ...

  3. C++_homework_StackSort

    顾名思义(?)类似于单调栈?维护一个单调递减的栈.一旦准备入栈的元素大于栈顶元素,栈一直弹出直到准备入栈的元素小于等于栈顶元素,弹出的元素压入另一个tmp栈中. #include <iostre ...

  4. 《疯狂Python讲义》重要笔记——Python简介

    简介 Python是一种面向对象.解释型.弱类型的脚本语言,同时也是一种功能强大的通过语言,它提供了高效的高级数据结构,还有简单有效的面向对象编程. 在大数据.人工智能(AI)领域应用广泛,因此变得流 ...

  5. 快速搭建ELK集中化日志管理平台

    由于我们的项目是分布式,服务分布于多个服务器上,每次查看日志都要登录不同服务器查看,而且查看起来还比较麻烦,老大让搭一个集中化日志管理的东西,然后就在网上找到了这个东西ELK ELK就是elastic ...

  6. golang 随机数/域名校验

    //随机数生成要用到的 const letterBytes = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ...

  7. 认识JDK、JRE、JVM

    JDK.JRE.JVM之间的关系: 首先看看JDK与JRE的区别与联系,如下图所示: 由图可知: JDK = JRE + Tools&Tool APIs JDK的核心是Java SE API. ...

  8. ES6 arrow function

    语法: () => { … } // 零个参数用 () 表示: x => { … } // 一个参数可以省略 (): (x, y) => { … } // 多参数不能省略 (): 当 ...

  9. ie8及其以下版本兼容性问题之响应式

    解决办法:引入Respond.js让IE6-8支持CSS3 Media Query 使用方式 参考官方demo:http://scottjehl.github.com/Respond/test/tes ...

  10. list用法(用到了再补充)

    之前学list吧,也知道很多,但是到用的时候却无从下手,还是不熟悉的缘故,看来基础知识应该再加强,要达到信手拈来的程度才行. 先说下list的特性:有序可重复,也可以存储多个空值. 我用到的方法: L ...