`
zgz1000
  • 浏览: 4971 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

javascript定义类或者对象

阅读更多

1.工厂方式

 

 

function createObj(sColor,iSize){
   var oTempObj = new Object;
   oTempObj.color = sColor;
   oTempObj.size = iSize;
   oTempObj.tellSize = function () {
         alert(this.color)
   };
   return oTempObj;
}

var oObj1 = createObj("red",10);
var oObj2 = createObj("white",14);

 

   在这个列子中,每次调用函数createObj(),都要创建新函数tellSize(),意味着每个对象都有自己的tellSize()版本,而实际上,我们需要的仅仅是同一个tellSize()函数,这样就造成了浪费。可以如下方式写:

 

  

function tellSize(){
   alert(this.size);
}

function createObj(sColor,iSize){
   var oTempObj = new Object;
   oTempObj.color = sColor;
   oTempObj.size = iSize;
   oTempObj.tellSize = tellSize;
   return oTempObj;
}

var oObj1 = createObj("red",10);
var oObj2 = createObj("white",11);

 

   工厂方式创建函数对象,这样从功能上是可以的,但是给人的感觉是不像是创建对象的方法。

 

2. 构造函数方式

 

function Obj(sColor, iSize){          //根据惯例,构造函数的名字要首字母大写
     this.color = sColor;
     this.size = iSize;
     this.tellSize = function(){
           alert(this.size)
     };
}

var obj1 = new Obj("red",10);
var obj2 = new Obj("white",11);

 

这里需要说明的是,采取前两种方法创建对象,从语义上看,不能明确的看出所有的属性都属于一个对象,那么下面的方式可以解决这个语义问题。   

 

3.原型方式

  

  

function Obj(){

}

Obj.prototype.color = "red";
Obj.prototype.size = 10;
Obj.prototype.tellSize = function(){
     alert(this.size);
};
Obj.prototype.drivers = new Array("zhang","wang");

var oObj1 = new Obj();
var oObj2 = new Obj();

 

这样似乎是完美的,首先这样不能通过构造函数传递参数,必须创建完对象后才能改变属性的默认值,另外一个比较恶心的问题是,当有属性指向的是对象而不是函数的时候,函数共享不会出现问题,但是对象共享就会有问题啦。看下面接着上面的写:

 

oObj1.drivers.push("li");

alert(oObj1.drivers);  //output "zhang wang li"
alert(oObj2.drivers);  //output "zhang wang li"

 

这里发生的问题就是两个不同的指针指向了同一个对象。

 

下面一种方式比较合理了,联合使用构造函数和原型方式

 

4.混合的构造函数/原型方式

 

这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。

 

function Obj(sColor, iSize){
     this.color = sColor;
     this.size = iSize;
     this.drivers = new Array("zhang","wang");
}

Obj.prototype.tellSize = function() {
     alert(this.size);
};

var oObj1 = new Obj("red",14);
var oObj2 = new Obj("white",10);

oObj1.drivers.push("li");

alert(oObj1.drivers);     //output "zhang wang li"
alert(oObj2.drivers);     //output "zhang wang"

 

  这样就完美了,但是思想无止境,有些人追求更完美,他们认为这种构造函数内寻找属性,外部找方法的做法不合逻辑。于是就有:

 

5.动态原型方法

 

function Obj(sColor, iSize){
     this.color = sColor;
     this.size = iSize;
     this.drivers = new Array("zhang","wang");
     
     if(typeof Obj._initialized == "undefined"){
          Obj.prototype.tellSize = function() {
              alert(this.size);
           };
           Obj._initialized = true;
      }

}

var oObj1 = new Obj("red",14);
var oObj2 = new Obj("white",10);

oObj1.drivers.push("li");

alert(oObj1.drivers);     //output "zhang wang li"
alert(oObj2.drivers);     //output "zhang wang"

 

 

  

分享到:
评论

相关推荐

    JavaScript面向对象程序设计中对象的定义和继承详解

    javascript中不存在类的概念,只有对象。要想把Javascript代码写的像java 或者C++一样优雅,就得考虑如何去实现,同时也要考虑性能和高效。定义javascript对象的方式有很多,继承的方式也很多。通过不断地实践,推荐...

    JavaScript 对象与数组参考大全

     anchor对象是document对象的一个属性,它本身没有属性方法或者事件处理程序。  B.2 anchors数组  anchors数组是document对象的一个属性,是文档内所有anchor对象的一个列表如果anchor也是一个link(链接),则它会...

    详解JavaScript的内置对象

    JavaScript 提供多个内建对象,比如 String、Date、Array 等等,使用对象前先定义,如下使用数组对象: var objectName =new Array();//使用new关键字定义对象 或者  var objectName =[]; 访问对象属性的语法: ...

    3-JavaScript高级教程-面相对象程序设计.pptx

    ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数。”严格来讲, 这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射 到一个值。正因为这样...

    JavaScript面向对象程序设计创建对象的方法分析

    面向对象的语言具有一个共同的标志,那就是具有“类”的概念,但是在javascript中没有类的概念,在js中将对象定义为“无序属性的集合,其属性可以包含基本值,对象或者函数”,即其将对象看作是一组名值对的散列表。...

    javaScript对象

    3. 使用定义函数与Dote()对象可以制作时钟特效 4. 使用history和location对象的相关属性和方法可以轻松的实现游览器中“后退”、“前进”和“刷新”按钮的功能 5. Document对象的getElementById()方法用于访问唯一的...

    JavaScript中对象的prototype属性代码实例

    我猜一般用过JavaScript的人都看见过或者用过对象的prototype属性。这是个好东西,它可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。详细介绍:...

    javascript学习笔记.docx

    2) 一个应用程序出现的每个窗口或框架都对应一个Window对象,而且都为客户端JavaScript代码定义了一个唯一的执行环境。 3) 脚本执行过程是Web浏览器的HTML解析过程的一部分。脚本按照它们的出现顺序执行。 4) 简单的...

    JavaScript集锦

    (1)For...In 声明用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 - 2 - (2). 事件是可以被 JavaScript 侦测到的行为。 - 4 - (3)try...catch 的作用是测试代码中的错误。 - 5 - (4)。...

    JavaScript你一定要搞懂的原型链

    当访问一个对象的属性或方法时,如果对象本身没有定义该属性或方法,JavaScript 就会沿着原型链向上查找,直到找到该属性或方法或者到达原型链的末尾(null)为止。 原型链图是用于表示 JavaScript 中对象之间原型...

    javascript脚本化文档

    一个文档对象模型或者说DOM就是一个API,它定义了如何访问组成一个文档的对象。W3C定义了一个标准的DOM,它理所当然地在所有现代Web浏览器中得到了很好的支持。不幸的是,情况并非总是如此。客户端JavaScript编程的...

    javascript函数

    另外还有一点比较重要,即JavaScript支持很多内部的函数,诸如类Array的方法eval()、parseInt()和sort()等。客户端JavaScript还定义了其他函数,如document.write()和alert()。在JavaScript中,完全可以像使用用户...

    javascript 对象数组根据对象object key的值排序

    有个js对象数组 var ary=[{id:1,name:”b”},{id:2,name:”b”}] 需求是根据name 或者 id的值来排序,这里有个风骚的函数 函数定义: 代码如下: function keysrt(key,desc) {  return function(a,b){  return desc ...

    JavaScript完全自学宝典 源代码

    示例描述:介绍JavaScript的面向对象特性。 4.1.html 对象的创建。 4.2.html 作为关联数组的对象与数组对象实现方式比较。 4.3.html prototype的用法。 4.4.html prototype实现继承机制。 4.5....

    面向对象的程序设计(01)

    面向对象的程序设计:ECMA-262 对对象的定义为:无序的属性集合,其属性包含 ECMAScript 中的基本类型、对象及函数。 简单来讲,对象就是一组没有顺序的值。 对象的每个属性或者方法都有一个标识名,而每个标识名都...

    在JavaScript中调用Java类和接口的方法

    为了在 JavaScript 中访问原生类型或者引用 Java 类型,可以调用 Java.type() 函数,该函数根据传入的完整类名返回对应对象的类型。下面代码显示如何获取不同的对象类型: var ArrayList = Java.type("java.util....

    学习javascript面向对象 理解javascript对象

    一、编程思想 面向过程:以过程为中心,自顶向下逐步...四、对象定义:无序属性的集合,其属性可以包含基本值、对象或者函数 //简单的对象实例 var person = new Object(); person.name = "Nicholas"; person.age

    JavaScript OOP面向对象介绍

    面向对象编程 JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。对象拥有属性和方法。 属性 属性指与对象有关的值。 举例: 代码如下: [removed] var txt=”Hello World!” ...

    proactjs, 反应性JavaScript对象属性.zip

    proactjs, 反应性JavaScript对象属性 proact.js 下载开发工具生产产品关于 ProAct.js针对对象属性,即面向对象的反应性范例在编程语言中的应用。 在人类语言中,反应性思想如下: 如果定义sum=a b并更改'a'或者'b',...

Global site tag (gtag.js) - Google Analytics