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. 创建无类型对象。
注意属性用“，”间隔而不是“；”间隔！

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没有类的概念，需要通过函数来实现类的定义。先通过一个例子说明：

function myClass()
{
    var id = 1;
    var name = "johnson";

    //properties
    this.ID = id;
    this.Name = name;

    //method
    this.showMessage = function()
    {
        alert("ID: " + this.ID + ", Name: " + this.Name);
    }
}

var obj1 = new myClass();
var obj2 = new myClass();

function的定义实际上相当于类的构造函数，最后两句是创建这个类的实例。先分析第一句： var obj1 = new myClass(); 当用new创建类的实例时，解释器首先会创建一个空的对象。然后运行这个myClass函数，并将this指针指向这个类的实例。当碰到 this.ID = id;和 this.Name = name;及 this.showMessage = function(){...}时，便会创建这两个属性，和这个方法，并把变量id，name的值一级函数的定义赋给这两个属性及这个函数对象（shwoMessage）。这个过程相当于初始化这个对象，类似于C# 中的构造函数。最后new返回这个对象。再看第二句： var obj2 = new myClass(); 执行过程与上一句代码相同，即创建一个空对象，然后执行myClass这个函数，定义两个属性和一个方法。

    从上面的分析中可以看到，上面这种实现类的方式，即在函数的定义中定义类的属性方法。存在着弊端。如果需要创建两个或更多这个类的实例时，上文是两个，这些属性会被重复的创建多次。

    那么如何避免这种情况呢？上一篇中也曾提到过用prototype。prototype和它的名字一样是一个原型，每一个function都有一个子对象prototype，它其实表示这个function对象的成员的集合，由于这里我们使用function实现类的，所以可以说prototype其实就是便是类的成员的集合。prototype定义的属性和方法执行在函数的构造体执行之前，所以当new一个对象之前，其实prototype的成员已经执行过了。先看一个例子：

function myClass()
{
//构造函数
}

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

var obj1 = new myClass();

var obj2 = new myClass();

类的结构还是和前面的例子相同，只不过这里是利用了prototype来实现。还是先看最后两句，前面说过，prototype是执行在函数构造体之前，即执行到 var obj1 = new myClass();之前，这个类已经有了ID，Name属性和showMessage方法。执行者一句时执行过程如下，注意和前一个例子比较：首先还是创建一个空的对象，并把this指针指向这个对象。然后将函数的prototype对象的所有成员都赋给这个对象（注意没有再创建这些成员）。然后执行函数体。最后new返回这个对象。执行下一句时：同样执行此过程，不会重复创建这些成员。

上面的代码还只是一个例子，在实际的项目中，可能出现的是类中有大量的成员，同时可能需要创建大量的实例。这是prototype就会显示其优越性了。另外上面的代码中使用了大括号语法定义了prototype的成员，这样看起来代码更清晰。这是一种比较推荐的类的设计模式。当然在众多的项目中，可能还会发现更好的模式，我们也希望能有更优化的JavaScript的编程模式不断推陈出新，也希望随着时间的推移，各主流浏览器也对JavaScript的解析都标准，统一。

上面说过prototype定义的成员是发生在构造体之前，可以证明一下，在上面的例子中，构造体是空的，在构造函数中加入一句 alert( this .Name);，当执行到 var obj1 = new myClass();时，会看到弹出对话框，显示正确的属性值。

写了这段文字之后承蒙多为兄弟的点评，收获匪浅。对上面的例子进一步讨论，如下代码：

function subClass(){ }

subClass.prototype =
{
Name: "sub"
}

function myClass()
{
//构造函数
}

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

var obj1 = new myClass();

obj1.SubObj.Name = "XXX";

obj1.showMessage();

var obj2 = new myClass();

obj2.showMessage();

这里在myClass中定义了一个引用类型，其类型是我们自定义的一个subClass类，这个子类中有一个Name属性。由于prototype对象是共享的，按照我们上面的分析：在执行 var obj1 = new myClass();时，会把myClass的prototype中的成员复制给这个obj1实例。但这里SubObj是一个引用类型，在执行到 var obj2 = new myClass();时，prototype中的ID，Name成员会复制到obj2中，但SubObj这个属性不会复制过去，而是引用了prototype中的SubObj，所以因为上一句修改了obj1.Subobj.Name的值，所以在用new生成obj2实例时，引用到了修改后的值。

所以借用prototype定义类时，依然需要将属性定义在构造体中，而将方法定义在该构造体的原型上。如下：

function myClass(id, name)
{
this.ID = id;
this.Name = name;
}

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

var obj1 = new myClass(1, "johnson");

obj1.showMessage();

obj1.Name="John";

obj1.showMessage();

var obj2 = new myClass(2, "Amanda");

obj2.showMessage();

JavaScript面向对象编程相关推荐

《JavaScript面向对象编程指南》——第1章引言1.1 回顾历史
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.1节,作者: [加]Stoyan Stefanov 译者: 凌杰更多章节内容可以访问云栖社区" ...
《JavaScript面向对象编程指南》——1.3 分析现状
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.3节,作者: [加]Stoyan Stefanov 译者: 凌杰更多章节内容可以访问云栖社区" ...
（二）Javascript面向对象编程：构造函数的继承
Javascript面向对象编程:构造函数的继承这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...
javascript 面向对象编程（工厂模式、构造函数模式、原型模式）
javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /*** 工厂模式*/ ...
JavaScript面向对象编程深入分析
JavaScript面向对象编程深入分析一. Javascript 面向对象编程:封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又 ...
《javascript面向对象编程指南》读书笔记
<javascript面向对象编程指南>读书笔记 <javascript面向对象编程指南>读书笔记第一章面向对象的JavaScript 第二章基本数据类型与流程控制变量 ...
(转)Javascript 面向对象编程（一）：封装
它们都是非常优秀的Javascript读物,推荐阅读. 笔记分成三部分.今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分和第三部分讨论"继承&q ...
《JavaScript面向对象编程指南》——1.7 训练环境设置
本节书摘来自异步社区<JavaScript面向对象编程指南>一书中的第1章,第1.7节,作者: [加]Stoyan Stefanov 译者: 凌杰更多章节内容可以访问云栖社区" ...
《JavaScript面向对象编程指南》—第128页错误指正
最近在阅读<JavaScript面向对象编程指南第2版>,感觉很有帮助.今晚发现一个小错误,想指正一下. 如图,书中第128页: 书中的第三个例子代码如下: "potato&qu ...
浅谈JavaScript 面向对象编程[转]
这周心血来潮,翻看了现在比较流行的几个 JS 脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大-- 感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript 面 ...

JavaScript面向对象编程

JavaScript面向对象编程相关推荐

最新文章

热门文章