第一种方式: 工厂方法
能创建并返回特定类型的对象的工厂函数(factory function)。

  1. function createCar(sColor){
  2. var oTempCar = new Object;
  3. oTempCar.color = sColor;
  4. oTempCar.showColor = function (){
  5. alert(this.color);
  6. };
  7. return oTempCar;
  8. }
  9. var oCar1 = createCar();
  10. var oCar2 = createCar();
function createCar(sColor){
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.showColor = function (){
alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();

调用此函数时,将创建新对象,并赋予它所有必要的属性。使用此方法将创建car对象的两个版本(oCar1和oCar2),他们的属性完全一样。
使用此方法存在的问题:
1语义上看起来不像使用带有构造函数的new运算符那么正规。
2使用这种方式必须创建对象的方法。每次调用createCar(),都要创建showColor(),意味着每个对象都有自己的showColor()版本,事实上,每个对象都共享了同一个函数。
有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法。从而避免这个问题:

  1. function createCar(sColor){
  2. var oTempCar = new Object;
  3. oTempCar.color = sColor;
  4. oTempCar.showColor = showColor;
  5. return oTempCar;
  6. }
  7. function showColor(){
  8. alert(this.color);
  9. }
function createCar(sColor){
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.showColor = showColor;
return oTempCar;
}
function showColor(){
alert(this.color);
}

在这段重写的代码中,在函数createCar()前定义了函数showColor().在createCar()内部,赋予对象一个已经指向已经存在的showColor()函数的指针。从功能上来讲,这样解决了重复创建对象的问题,但该函数看起来不像对象的方法。
所有这些问题引发了开发者定义的构造函数的出现。

第二种方式:构造函数方式

  1. function Car(sColor){
  2. this.color = sColor;
  3. this.showColor = function (){
  4. alert(this.color);
  5. };
  6. }
  7. var oCar1 = new Car("red");
  8. var oCar2 = new Car("blue");
function Car(sColor){
this.color = sColor;
this.showColor = function (){
alert(this.color);
};
}
var oCar1 = new Car("red");
var oCar2 = new Car("blue");

你可能已经注意到第一个差别了,在构造函数内部无创建对象,而是使用this关键字。使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用return运算符)。
这种方式在管理函数方面与工厂方法一样都存在相同的问题。

第三种方式:原型方式

  1. function Car(){
  2. }
  3. Car.prototype.color = "blue";
  4. var oCar1 = new Car();
  5. var oCar2 = new Car();
function Car(){
}
Car.prototype.color = "blue";
var oCar1 = new Car();
var oCar2 = new Car();

调用new Car()时,原型的所有属性都被立即赋予要创建的对象,意味着所有的Car实例存放的都是指向showColor()函数的指针。从语义上看起来都属于一个对象,因此解决了前面两种方式存在的两个问题。此外使用该方法,还能用instanceof运算符检查给定变量指向的对象类型。因此,下面的代码将输出true:
alert(oCar instanceof Car); //outputs "true"
这个方式看起来很不错,遗憾的是,它并不尽如人意。
1首先这个构造函数没有参数。使用原型方式时,不能给构造函数传递参数初始化属性的值,因为car1和car2的属性都等于“red”。
2真正的问题出现在属性指向的是对象,而不是函数时。函数共享不会造成任何问题,但是对象却很少被多个实例共享的。

第四种方式:混合的构造函数/原型方式(推荐)
联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。

  1. function Car(sColor){
  2. this.color =sColor;
  3. this.drivers =new Array("Mike","Sue");
  4. }
  5. Car.prototype.showColor = function(){
  6. alert(this.color);
  7. }
  8. var oCar1 =new Car("red");
  9. var oCar2 =new Car("blue");
  10. oCar1.drivers.push("Matt");
  11. alert(oCar1.drivers);   //outputs "Mike,Sue,Matt"
  12. alert(oCar1.drivers);   //outputs "Mike,Sue"
function Car(sColor){
this.color =sColor;
this.drivers =new Array("Mike","Sue");
}
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 =new Car("red");
var oCar2 =new Car("blue");
oCar1.drivers.push("Matt");
alert(oCar1.drivers); //outputs "Mike,Sue,Matt"
alert(oCar1.drivers); //outputs "Mike,Sue"

第五种方式:动态原型方式(推荐)
对于习惯使用其他语言的开发者来说,使用混合的构造函数/原型方式感觉不那么和谐。批评混合的构造函数/原型方式的人认为,在构造函数内找属性,在外部找方法的做法很不合理。所以他们设计了动态原型方式,以提供更友好的编码风格。
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是使用动态原型方法重写的Car类:

  1. function Car(sColor){
  2. this.color =sColor;
  3. this.drivers =new Array("Mike","Sue");
  4. if(typeof Car._initialized == "undefined"){
  5. Car.prototype.showColor = function(){
  6. alert(this.color);
  7. }
  8. }
  9. Car._initialized = true;
  10. }

var object = {
    name:"name",
    sex:"sex",
    age:12
}

javaScript中定义类或对象的五种方式的更多相关文章

  1. 我所了解的关于JavaScript定义类和对象的几种方式

    原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...

  2. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  3. Java中创建(实例化)对象的五种方式

    Java中创建(实例化)对象的五种方式1.用new语句创建对象,这是最常见的创建对象的方法. 2.通过工厂方法返回对象,如:String str = String.valueOf(23); 3.运用反 ...

  4. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  5. FAQ: C++中定义类的对象:用new和不用new有何区别?

    C++用new创建对象和不用new创建对象的区别解析 作者: 字体:[增加 减小] 类型:转载 时间:2013-07-26 我要评论 在C++用new创建对象和不用new创建对象是有区别的,不知你是否 ...

  6. Activity启动过程中获取组件宽高的五种方式

    第一种:(重写Activity的onWindowFocusChanged方法) /** * 重写Acitivty的onWindowFocusChanged方法 */ @Override public ...

  7. ASP.NET Core中配置监听URLs的五种方式

    原文: 5 ways to set the URLs for an ASP.NET Core app 作者: Andrew Lock 译者: Lamond Lu 默认情况下,ASP. NET Core ...

  8. WebKit JavaScript Binding添加新DOM对象的三种方式

    一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...

  9. TP6.0 获取请求对象的五种方式

    目录 1. 门面类 2. 依赖注入 3. 框架提供的基础控制器的 request 属性 4. request() 助手函数 5. app() 超级助手函数 think\Request.think\fa ...

随机推荐

  1. 在火狐、360等浏览器中,用jquery创建表单并发送的问题

    某些浏览器无法使用js或者jquery直接创建表单并发送,这是由于这些浏览器在提交页面表单时要求页面有完整的标签项即<html><head><title></ ...

  2. 设计模式之六大原则——迪米特法则(LoD,LKP)

    转载于:http://www.cnblogs.com/muzongyan/archive/2010/08/05/1793000.html  定义: 迪米特法则(Law of Demeter,LoD)也 ...

  3. SQL PRIMARY KEY 约束\SQL FOREIGN KEY 约束\SQL CHECK 约束

    SQL PRIMARY KEY 约束 PRIMARY KEY 约束唯一标识数据库表中的每条记录. 主键必须包含唯一的值. 主键列不能包含 NULL 值. 每个表都应该有一个主键,并且每个表只能有一个主 ...

  4. 键盘事件触发的兼容tips

    在firefox中 退格键 enter del tab 这些非字符触发编码为0 然而在Safari3以下 是8

  5. hive --service metastore 出现的问题

    Could not create ServerSocket on address 0.0.0.0/0.0.0.0:9083 执行命令jps root@hadoopm:/usr# jps1763 Res ...

  6. XDebug 自动开启PHP Stack Trace, 导致PHP Log 超1G

    昨天早上突然发现测试服务器空间满了,用du挨个文件夹查看,发现是php debug log占地极大,有的log直接有1G,打开后发现极其多的php stack trace. 立刻到主服务器查看,主服务 ...

  7. UWP&WP8.1 重新绘制图片 WriteableBitmap用法 图片转byte[]数组,byte[]数组转图片

    ---恢复内容开始--- WriteableBitmap 是UWP和WP8.1绘制图片的,重组图片的最重要方法.方法较为简单,方法多样性. 通过查看文档,WriteableBitmap的继承性是    ...

  8. log4j+mongodb

    maven 配置: <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java ...

  9. sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO

    sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO 今天在弄一个 sqlalchemy 的数据库基类的时候,遇到了跟多继承相关的一个小问题,因此顺便看了一 ...

  10. java 性能优化:35 个小细节,让你提升 java 代码的运行效率

    前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...