自从有了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.Name = "johnson";

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

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: ,
    Name: "Johnson",
    showMessage: function()
    {
        alert("ID: " + this.ID + "Name: " + this.Name);
    }
}

这里定义了两个无类型的对象,obj1和obj2。其中obj1是一个空对象。obj2包括两个属性ID,
Name和一个方法showMessage。每个属性和方法用逗号分割。属性(方法)名和其值之间用分号分割。
      
用这种方式创建属性方法时,也可以用字符串定义属性方法的名字。如:

var obj2 = 
{
    ,
    "Name": "Johnson"
}

6. prototype
         
每个函数对象都具有一个子对象prototype,因为函数也可以表示类,所以prototype表示一个类的成员的集合。当new
一个对象时,prototype对象的成员都会被实例化成对象的成员。先看一个例子:

function myClass()
{ }

myClass.prototype.ID ;
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.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.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。

转自:http://www.cnblogs.com/johnson2008/archive/2008/05/15/1198252.html

JavaScript面向对象编程(1)-- 基础的更多相关文章

  1. 深入理解Javascript面向对象编程

    深入理解Javascript面向对象编程 阅读目录 一:理解构造函数原型(prototype)机制 二:理解原型域链的概念 三:理解原型继承机制 四:理解使用类继承(继承的更好的方案) 五:建议使用封 ...

  2. 转:javascript面向对象编程

    作者: 阮一峰 日期: 2010年5月17日 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学 ...

  3. 探讨javascript面向对象编程

    (个人blog迁移文章.) 前言: 下面将探讨javascript面向对象编程的知识. 请不要刻意把javascript想成面向对象编程是理所当然的. javascript里面,对象思想不可少,但是不 ...

  4. 再谈javascript面向对象编程

    前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...

  5. (三)Javascript面向对象编程:非构造函数的继承

    Javascript面向对象编程:非构造函数的继承   这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使 ...

  6. Javascript面向对象编程(三):非构造函数的继承(对象的深拷贝与浅拷贝)

    Javascript面向对象编程(三):非构造函数的继承   作者: 阮一峰 日期: 2010年5月24日 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现&quo ...

  7. JavaScript 面向对象开发知识基础总结

    JavaScript 面向对象开发知识基础总结 最近看了两本书,书中有些内容对自己还是很新的,有些内容是之前自己理解不够深的,所以拿出来总结一下,这两本书的名字如下: JavaScript 面向对象精 ...

  8. JavaScript 面向对象编程(三):非构造函数对象的继承

    JavaScript 面向对象编程(三):非构造函数对象的继承 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese ...

  9. JavaScript面向对象编程(2)-- 类的定义

    最近这一段时间事情太多了,没有时间再继续写,幸好这两天有点小闲,先小写一下JavaScript中面向对象一中推荐的方法.本文承接上一篇JavaScript面向对象编程(1) -- 基础. 上篇说过,J ...

  10. JavaScript面向对象编程学习笔记

    1  Javascript 面向对象编程 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例 ...

随机推荐

  1. nginx-博客阅读笔记记录-20190916

    Nginx 入门学习教程 Ng官网解释: nginx [engine x]是最初由Igor Sysoev编写的HTTP和反向代理服务器,邮件代理服务器和通用TCP / UDP代理服务器. 维基百科解释 ...

  2. [python 学习] lambda

    #!/usr/bin/python # -*- encoding:utf-8 -*- # lambda parameter_list: expression f = lambda x,y: x + y ...

  3. js格式化数字或者小数,加入千分符(此次为”,“)

    function npChangeNum(num) { var tag = (num || 0).toString().split("."); tag[0] = tag[0].re ...

  4. hdu 6143: Killer Names (2017 多校第八场 1011)

    题目链接 题意,有m种颜色,给2n个位置染色,使左边n个和右边n个没有共同的颜色. 可以先递推求出恰用i种颜色染n个位置的方案数,然后枚举两边的染色数就可以了,代码很简单. #include<b ...

  5. linux运维、架构之路-linux定时任务

    1.基础优化之开机启动服务优化 使用awk拼接的方式 [root@cache01 ~]# chkconfig |egrep -v "crond|network|sshd|rsyslog|sy ...

  6. 在Mac电脑上使用NTFS移动硬盘遇到问题

    1.sudo nano/etc/fstab 回车 输电脑密码 2.进入文本插入页面  编入: LABEL=硬盘名字 NONE ntfs rw,auto,nobrowse 3.ctrl + X 退出 选 ...

  7. p5341 [TJOI2019]甲苯先生和大中锋的字符串

    分析 TJOI白给题 建出sam,对于每个点如果它的子树siz和等于k 那么对于这个满足的点它有贡献的长度一定是一个连续区间 直接差分即可 代码 #include<bits/stdc++.h&g ...

  8. E:\Postgresql\pgAdmin4_binaryPath

    e Path to the directory containing the EDB Advanced Server utility programs (pg_dump, pg_restore etc ...

  9. RESTful_基础知识

    目录 目录 前言 RESTful REST原则 REST的Web原则 分层系统原则 RESTful的实现 SOA 面向服务的体系结构 RPC样式 Web服务 RPC的实现过程 SOAP 简单对象访问协 ...

  10. This service allows sftp connections only

    这是因为该用用户只开通了sftp,ssh被禁了 可以通过别的主机ssh登陆这台机器 app@home:/software>ssh mysftp@192.168.0.1 Authorized on ...