`
韶音韶乐
  • 浏览: 86410 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

javascript创建对象

阅读更多

    自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升。JavaScript最基本的使用,以及语法、浏览器对象等等东东在这里就不累赘了。把主要篇幅放在如何实现JavaScript的面向对象编程方面。

    1. 用JavaScript实现类
       JavaScritpt没有专门的机制实现类,这里是借助它的函数允许嵌套的机制来实现类的。一个函数可以包含变量,又可以包含其它函数,这样,变量可以作为属性,内部的函数就可以作为成员方法了。因此外层函数本身就可以作为一个类了。如下:

function myClass()
{
    
//此处相当于构造函数
}
这里 myClass就是一个类。其实可以把它看成类的构造函数。至于非构造函数的部分,以后会详细描述。

    2. 如何获得一个类的实例
      实现了类就应该可以获得类的实例,JavaScript提供了一个方法可以获得对象实例。即 new操作符。 其实JavaScript中,类和函数是同一个概念,当用new操作一个函数时就返回一个对象。如下:
var obj1 = new myClass();

    3. 对象的成员的引用
       在JavaScript中引用一个类的属性或方法的方法有以下三种。
       1>  点号操作符
            这是一种最普遍的引用方式,就不累赘。即如下形式:
对象名.属性名;
对象名.方法名;

      2>  方括号引用
           JavaScript中允许用方括号引用对象的成员。如下:
对象名["属性名"];
对象名[
"方法名"];
            这里方括号内是代表属性或方法名的字符串,不一定是字符串常量。也可以使用变量。这样就可以使用变量传递属性或方法名。为编程带来了方便。在某些情况下,代码中不能确定要调用那个属性或方法时,就可以采用这种方式。否则,如果使用点号操作符,还需要使用条件判断来调用属性或方法。
       另外,使用方括号引用的属性和方法名还可以以数字开头,或者出现空格,而使用点号引用的属性和方法名则遵循标示符的规则。但一般不提倡使用非标示符的命名方法。
 
      3>  使用eval函数
           如果不希望使用变量传递变量或方法名,又不想使用条件判断,那么eval函数是一个好的选择。eval接收一个字符串类型的参数,然后将这个字符串作为代码在上下文中执行,返回执行的结果。这里正是利用了eval的这一功能。如下:
alert(eval("对象名." + element.value));
         
     4. 对对象属性,方法的添加、修改和删除操作
         JavaScript中,在生成对象之后还可以为对象动态添加、修改和删除属性和方法,这与其它面向对象的语言是不同的。
        1>  添加属性和方法
              先创建一个对象,空对象创建后没有任何属性和方法,然而我们可以在代码中创建。
var obj1 = new Object();
//添加属性
obj1.ID = 1;
obj1.Name 
= "johnson";

//添加方法
obj1.showMessage = function()
{
    alert(
"ID: " + this.ID + ", Name: " + this.Name);
}

      2>  修改属性与方法
            与添加属性和方法类似,例如接着上面的例子:
// 修改属性
obj1.ID = 2;
obj1.Name 
= "Amanda";

// 修改方法
obj1.showMessage = function()
{
    alert(
"ID: " + this.ID");
}
     
      3>  删除属性与方法
            直接将要删除的属性或方法赋值为undefined即可:
obj1.ID = 1;
obj1.Name 
= undefined;

obj1.showMessage 
= undefined;

     5. 创建无类型对象。
        类似于C#3.0里的Anonymous Types,JavaScript 也可以创建无类型的对象。形式如下:
var obj1 = {};
var obj2 = 
{
    ID: 
1,
    Name: 
"Johnson",
    showMessage: 
function()
    
{
        alert(
"ID: " + this.ID + "Name: " + this.Name);
    }

}
       这里定义了两个无类型的对象,obj1和obj2。其中obj1是一个空对象。obj2包括两个属性ID, Name和一个方法showMessage。每个属性和方法用逗号分割。属性(方法)名和其值之间用分号分割。
       用这种方式创建属性方法时,也可以用字符串定义属性方法的名字。如:
var obj2 = 
{
    
"ID" : 1,
    
"Name""Johnson"
}
 
      6. prototype
          每个函数对象都具有一个子对象prototype,因为函数也可以表示类,所以prototype表示一个类的成员的集合。当new 一个对象时,prototype对象的成员都会被实例化成对象的成员。先看一个例子:
function myClass()
{ }

myClass.prototype.ID 
= 1;
myClass.prototype.Name 
= "johnson";
myClass.prototype.showMessage 
= function()
{
    alert(
"ID: " + this.ID + "Name: " + this.Name);
}


var obj1 = new myClass();
obj1.showMessage();
      使用prototype对象创建类有一个好处。如果将所有的成员直接写在类的声明中,如下:
function myClass()
{
    
//添加属性
    this.ID = 1;
    
this.Name = "johnson";

    
//添加方法
    this.showMessage = function()
    
{
        alert(
"ID: " + this.ID + ", Name: " + this.Name);
    }

}


var obj1 = new myClass();
var obj2 = new myClass();
        在上面的代码中,定义了一个类myClass,在类中直接定义了两个属性和一个方法。然后实例化了两个对象,这里的两个属性和一个方法,每创建一次myClass对象都会被创建一次,浪费了内存空间。而用prototype以后就可以解决这个问题,每new一个函数时,其prototype对象的成员都会自动赋给这个对象,当new多个对象时不会重复创建。
        由于prototype的初始化发生在函数体执行之前,用以下代码可以证明:
function myClass()
{
    
//此处相当于构造函数
    this.ID = 1;
    
this.Name1 = this.Name;
    
this.showMessage();
}

myClass.prototype.Name 
= "johnson";
myClass.prototype.showMessage 
= function()
{
    alert(
"ID: " + this.ID + ", Name: " + this.Name);
}


var obj1 = new myClass();
        执行以上代码可以发现当new这个类型的对象时,即弹出了对话框。
        最后只得一提的是,prototype有一个方法,在面向对象的设计中用得到。即:constructor属性,是对构造函数的调用,这里的构造函数即上文提到的类的声明里的代码。 如:
function myClass()
{
    
//此处相当于构造函数
    alert("this is in constructor");
}

myClass.prototype.constructor();

var obj1 = new myClass();
   执行以上代码你会发现对话框弹出了两次。由此可见,prototype可专门用于设计类的成员,实际上在JavaScript面向对象的设计中,很多时候都会用到prototype。
分享到:
评论

相关推荐

    javascript创建对象的方式(二)

    这篇博客“javascript创建对象的方式(二)”可能详细介绍了在JavaScript中除了最基础的字面量语法之外的其他创建对象的方法。这里我们将深入探讨几种常见的创建对象的方式。 1. **构造函数**: JavaScript中的...

    javascript创建对象的方式(一)

    这篇博文主要探讨了JavaScript创建对象的几种常见方式,这对于理解和掌握JavaScript面向对象编程至关重要。在实际开发中,了解并灵活运用这些方法能够提高代码的可读性和可维护性。下面,我们将详细讲解标题中提到的...

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

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

    JavaScript创建对象的七种方式(推荐)

    JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点。 ...

    javascript创建对象的方式(四)

    本文将深入探讨四种主要的JavaScript创建对象的方法,帮助你更好地理解和运用这些技巧。 1. **字面量语法(Literal Notation)** 字面量语法是最简单直接的创建对象的方式。它允许你在一行代码中创建一个对象,...

    javascript创建对象、对象继承的有用方式详解_.docx

    ### JavaScript 创建对象与对象继承的有效方法 #### 一、引言 JavaScript 是一种基于原型的语言,这使得其处理对象和继承的方式与传统的面向对象编程语言有所不同。本文将深入探讨 JavaScript 中创建对象及对象继承...

    javascript创建对象的方式(三)

    在JavaScript这门动态类型的编程语言中,创建对象是其核心特性之一。本文将详细探讨三种主要的创建JavaScript对象的方法,并结合“源码”与“工具”的概念,来深入理解这些方式在实际开发中的应用。 一、字面量...

    一、JavaScript 创建对象

    在JavaScript中,创建对象是编程的基本操作之一。它主要用于构建复杂的数据结构,实现面向对象编程。JavaScript提供了多种创建对象的方法,包括字面量语法、构造函数、对象原型、工厂函数、模块模式以及近年来引入的...

    javascript创建对象的3种方法

    总结来说,JavaScript创建对象的方法有多种,每种都有其适用的场景。JSON对象适合临时使用,`Object`实例适合简单场景,而构造函数及原型链则更适合构建复杂的、可复用的对象模型。在实际开发中,应根据项目需求选择...

    javascript如何创建对象

    JavaScript创建对象的方法主要有以下几种: 一、直接创建 直接创建是通过new Object()来创建一个新的空对象,然后逐步给这个对象添加属性和方法。例如,创建一个名为person1的对象,并添加name、gender属性,以及一...

    JavaScript创建对象方法实例小结

    下面将详细介绍JavaScript创建对象的基本原理,以及工厂模式、构造函数模式和原型模式这三种主要方法的实现技巧。 1. 对象字面量方式 最直观的方法是使用对象字面量直接创建对象,这种方式下,对象和其属性方法都...

    JavaScript 创建对象

    以下将详细介绍几种常见的JavaScript创建对象的方法。 1. JSON方式/对象直接量 这是最直观且最常用的方法,通过大括号{}直接创建对象。例如: ```javascript var person = { name: "张三", age: 30, sayHello: ...

    JavaScript 创建对象和构造类实现代码

    ### JavaScript 创建对象和构造类实现代码 在JavaScript中,创建对象和定义类是进行面向对象编程的基础。本文将深入探讨几种不同的创建对象的方法以及如何通过构造函数和原型链来实现类的概念。 #### 1. 使用对象...

    跟我学习javascript创建对象(类)的8种方法

    下面介绍使用JavaScript创建对象(类)的八种常用方法,每种方法都有其特点和适用场景。 1. 使用Object构造函数创建对象 这是最基本的创建对象的方法,通过Object构造函数可以创建一个空对象,然后可以为它添加属性...

    JavaScript创建对象的四种常用模式实例分析

    以下是JavaScript创建对象的四种常用模式的分析。 一、工厂模式 工厂模式是创建对象的一种简单方式,它将对象的创建和初始化委托给一个函数。工厂模式的好处是能够在创建对象时,通过传入不同的参数得到不同的对象...

Global site tag (gtag.js) - Google Analytics