`
flare
  • 浏览: 124697 次
  • 性别: Icon_minigender_1
  • 来自: 天尽头
社区版块
存档分类
最新评论

javaScript中定义类或对象的五种方式

阅读更多
看了《javaScript高级程序设计》做的笔记!
第一种方式: 工厂方法
能创建并返回特定类型的对象的工厂函数(factory function)。
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()版本,事实上,每个对象都共享了同一个函数。
有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法。从而避免这个问题:
function createCar(sColor){
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.showColor = showColor;
  return oTempCar;
}
function showColor(){
   alert(this.color);
}

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

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

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运算符)。
这种方式在管理函数方面与工厂方法一样都存在相同的问题。

第三种方式:原型方式
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真正的问题出现在属性指向的是对象,而不是函数时。函数共享不会造成任何问题,但是对象却很少被多个实例共享的。

第四种方式:混合的构造函数/原型方式(推荐)
联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。
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类:
function Car(sColor){
  this.color =sColor;
  this.drivers =new Array("Mike","Sue");

  if(typeof Car._initialized == "undefined"){
    Car.prototype.showColor = function(){
      alert(this.color);
    }
  }
  Car._initialized = true;
}
分享到:
评论
1 楼 bixiaoxue 2008-09-23  
少了一种方式

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


相关推荐

    JS定义类或对象

    下面我们将详细介绍如何在JavaScript中定义类或对象,并逐步展示其优势。 #### 二、定义对象的基本方法 ##### 2.1 使用函数创建对象 在JavaScript中,可以通过定义一个函数来创建对象。以下是一个简单的例子,...

    JavaScript定义类或函数的几种方式小结

    总结以上四种方式,在JavaScript中定义类或函数,可以根据实际的应用场景和需求,选择最合适的方式来实现对象的创建和管理。工厂方式适合创建不需要保持类型统一的对象;构造函数方式则更符合面向对象的原则;原型...

    JavaScript定义类的几种方式总结

    JavaScript定义类的几种方式包括工厂方式、构造函数和原型方式,每种方法都有其特点和适用场景,接下来我们将详细探讨。 工厂方式是最早期的面向对象编程在JavaScript中的实践之一。使用工厂方式定义类,本质上就是...

    JAVASCRIPT中定义对象的几种方式.pdf

    在讨论JavaScript中定义对象的几种方式之前,我们先理解一下JavaScript中的对象到底是什么。JavaScript是一种基于原型的编程语言,对象是其核心概念之一。对象可以被视为一个容器,存储各种键值对集合,键为属性名,...

    Javascript对象定义的几种方式

    Javascript对象定义的几种方式

    javaScript中定义类或对象的五种方式总结

    JavaScript 中定义类或对象的方式主要有以下五种,每种方式都有其特点和适用场景。 1. 工厂方法 工厂方法是一种创建对象的模式,它通过一个函数来创建并返回对象,而不是直接使用 new 关键字。使用工厂方法可以创建...

    javascript定义对象

    下面将详细介绍JavaScript定义对象的四种主要方式:字面量语法、构造函数、对象解构和Proxy。 1. **字面量语法** 字面量语法是定义JavaScript对象最简单、最常见的方法。通过大括号`{}`来创建一个空对象,然后通过...

    JavaScript对象定义

    JavaScript是一种基于原型的对象导向语言,它的对象定义方式具有独特的灵活性。在本文中,我们将深入探讨JavaScript对象的定义、创建方法以及相关的工具和技术。 首先,我们要了解JavaScript对象的本质。对象是由...

    javascript对象转换成json

    - 如果对象中有循环引用(即一个对象引用了另一个,而另一个又引用了第一个),`JSON.stringify()`会抛出一个错误。 - 当使用`replacer`函数时,可以通过返回undefined来排除某个属性不被包含在JSON字符串中。 ### ...

    面向对象JavaScript精要(英文原版pdf)

    - **类**:类是一种模板或蓝图,用于创建具有相似特性和行为的对象。 - **对象**:对象是类的实例,具有特定状态和行为。 - **继承**:继承允许一个类继承另一个类的属性和方法,从而支持代码重用。 - **封装**:...

    JavaScript定义类和对象的方法

    在JavaScript中定义类和对象的方法大致可以分为两类,一种是使用函数方式定义,另一种是先实例化Object类的方式定义。下面详细介绍这两种方法的实现和使用。 首先,函数方式定义类是最直观和常用的方法,它基于函数...

    javascript工厂方式定义对象.docx

    构造函数用于创建特定类型的对象,并使用`this`关键字来定义对象的属性。使用`new`关键字调用构造函数会创建一个新的对象实例。与工厂方式相比,构造函数更符合面向对象的思维,但同样存在方法复用的问题。 ```...

    js定义类 对象 构造函数,类的继承

    通过分析这个文件,我们可以看到实际应用中的类定义和继承实践,包括如何定义类,如何使用构造函数初始化对象,以及如何通过`extends`关键字实现类的继承和覆盖或扩展父类的方法。 总结一下,JavaScript的类、对象...

    关于JavaScript定义类和对象的几种方式

    在JavaScript中,定义对象的几种方式有直接量方式、工厂方式和原型方式。 直接量方式是最简单直接的定义对象的方法,即直接用花括号定义对象并填充属性和方法。例如: ```javascript var Obj = { name: 'sun', ...

    JavaScript学习之二 — JavaScript创建对象的8种方式

    本文将深入探讨JavaScript创建对象的8种常见方式,帮助你更好地理解和掌握这门动态类型的编程语言。 1. **字面量(Literal)方式** 这是最简单直接的创建对象的方式,通过大括号{}来定义一个对象,然后在内部用...

    在JavaScript中实现类的方式探讨

    在JavaScript中实现类的方式主要有几种,包括对象字面量(Object Literal)、构造函数(Constructor)、原型链(Prototype Chain)以及ES6引入的类语法。每种方式都有其适用的场景和特点,理解它们有助于我们更好地...

    Javascript 面向对象的JavaScript进阶

    在JavaScript中,可以通过构造函数或类来创建对象,并通过定义方法来隐藏具体的实现细节。此外,ES6引入了类的概念,进一步增强了抽象的能力。 **示例代码:** ```javascript class USBDevice { constructor(name)...

Global site tag (gtag.js) - Google Analytics