基于JavaScript技术实现的面向对象编程方法

宋文瑞

辽宁锦州渤海大学信息科学与技术学院

基于JavaScript技术实现的面向对象编程方法

宋文瑞

辽宁锦州渤海大学信息科学与技术学院

本文针对JavaScript技术实现的面向对象的编程实现方法，JavaScript编程技术作为一种脚本式函数语言嵌入到网页的页面中，在多年来，JavaScript编程技术是否具备面向对象的相关特性和要素，这种软件编程技术长期处于具有面向对象特性的边缘性是非常模糊的，本文通过使用简单的程序示例，来讲述JavaScript编程技术回归面向对象编程的本意，本文将从编程技术语法角度讲述JavaScript技术是一种拥有面向对象特性。JavaScript编程技术同其他高级语言C++和Java语言在语法上相似，为了深入了解JavaScript对象与函数是学习JavaScript编程技术的基础。下面通过分析高级语言的面向对象的几种特性：封装性，继承性，多态性，基于JavaScript语言实现的高级语言特性。本文通过JavaScript代码片段实例，剖析JavaScript技术在网站开发中的编程与应用，在实际编程中使用JavaScript对象编程进行举例说明。本文基于JavaScript技术实现的面向对象方法的一些探索，并给出了相关分析实例，展示了JavaScript编程技术在网页编程中的优越性。

JavaScript 面向对象 编程语言 封装性 继承性 多态性

1 引言

目前，JavaScript编程技术是一种面向对象技术开发的高级编程语言，此高级编程语言可以被嵌入到网页的页面的文件里。通过JavaScript编程技术可以做到响应用户点击或者触发的事件空间（例如：form表单的输入情况、表单按钮控件点击情况），JavaScript编程技术和Java编程语言很类似，但也有本质上的区别，Java编程语言是一种比JavaScript技术更加复杂面向对象编程语言，而JavaScript则是相当简单而且容易了解的编程语言。JavaScript只是注重程序开发的相关技巧，所以，许多Java编程语言的很多特性在JavaScript编程技术中并不支持。

JavaScript编程技术也是面向对象进行编程的思想。但是，很多程序员并不理解这一点是如何实现面向对象编程的思想。在JavaScript编程技术中的面向对象分为两种情况：其一情况是可以称为面向“普通对象”编程的思想，在JavaScript中存在的普通对象，例如：数字对象、布尔对象、日期对象、Number对象和各种用户自定义的某个对象（如：方括号、花括号和圆括号）等等。其二情况是称为面向“方法对象”编程的思想，在编程中通常定义为function函数。令人奇怪的是：function被称为方法，它又怎么成为面向的对象编程呢？在JavaScript编程技术中，function方法确实被当成对象来看待。

在传统面向对象的编程中，存在非常重要的几个概念，本文将列出其中的两个概念分别问：类和实例两个概念。类则定义了相关事物存在公共的属性和方法的集合；而实例则表示该类的具体实例对象是如何实现。在高级编程语言中面向对象编程有三个重要的特性分别为：封装、继承和多态。在JavaScript的编程实践中，表面上并没有高级编程语言的全部特性，尤其是：封装、继承和多态三个特性并不存在，而这些优良的特性真的不在JS中存在吗？

由于JavaScript编程语言是基于对象编程OB（Object-Based）实现的，而非面向对象编程OO（Object-Oriented）实现的，虽然JavaScript编程技术并非基于面向对象编程的方法，但它完全实现一些面向对象编程的基本特征。下面通过分析高级编程语言的面向对象的几种特性：封装性、继承性、多态性是如何在JS中实现，下面着重介绍这几种特性实现过程。

2 通过JavaScript编程技术实现的对象封装性

2.1 实现类的声明过程

在JavaScript编程技术中，类的实现是基于函数方式来实现的过程，每个function直接被看成在Java编程中类的定义，这个类中可以定义相关的属性或者方法，可以是全局变量或者局部变量，也可以赋初值或者定义一个默认的初值，在JavaScript编程技术中局部变量视为函数的成员对象，函数内部定义的函数可以自身的方法，下面简单介绍关于类的声明方式。通过定义一个动物类，其中包括动物类的属性和相关方法，属性为动物名称、动物腿的数量、动物身体上颜色、动物生活区域等等，相关方法主要包括动物能够实现“跑”的动作、能够实现“吃肉”的动作。

Var 名称；//定义一个全局的动物名称变量

Var 腿数量； //定义一个全局的动物腿数量变量

Var 颜色； //定义一个全局的动物身上的颜色变量

Var 生活区域； //定义一个全局的动物生活区域的变量

Function 动物{//定义一个动物类，名称为动物

This.名称=”老虎”；//初始化动物名称变量值

This.腿数量 =”4”； //初始化动物腿数量变量值

This.颜色=”黄色”； //初始化动物动物身上颜色变量值

This.生活区域=”森林中”； //初始化动物动物生活区域变量值

This.eat=function（）{alert（”表示该动物能吃肉!”）；}//函数表示该动物能吃肉

}

从上面的这段代码片段可以看出，动物类已经定义了名称、腿数量、颜色和生活区域四个与之相关的属性，并在此类中定义了一个属于该类的成员方法eat（），在函数外部的调用某个类的属性时使用点”.”操作符，上面的代码中名称、腿数量、颜色和生活区域四个变量是公有的成员变量，那么在在JavaScript中能否定义私有成员变量呢？下面看这段代码片段。

Function 动物{

Var 动物昵称=”私有变量”； //这里定义很多的私有变量

This.名称=”老虎”； //定义一个局部的动物名称变量

This.腿数量 =”4”； //定义一个局部的动物腿数量变量

This.颜色=”黄色”； //定义一个局部的动物身上的颜色变量

This.生活区域=”森林中”； //初始化动物动物生活区域变量值

This.eat=function（）{alert（”表示该动物能吃肉!”）；} //函数表示该动物能吃肉

}

在上面的代码中，Var动物昵称=“私有变量”；则表示为该类中的私有成员变量，并且只在动物类中起到引用的作用，并不被外部的程序或者类所使用，仅仅属于该类自己的变量。因此，在JavaScript中可以通过定义类中局部变量成为私有变量。

2.2 JavaScript中实现的构造函数

在JavaScript编程技术中，构造函数是为了实现对象的变量值初始化操作的功能，通过this变量和点“·”操作符实现构造函数的变量初始化操作，并且将变量值赋给某个对象的某个属性，在编程语言中我们可以通过参考下面的代码片段实现构造函数，使对象的变量进行初始化操作。

Function 动物（名称，腿数量，颜色）{//定义一个动物类构造函数，含有三个参数分别是动物名称、动物腿数量、动物身上颜色

This.名称= 名称； //通过动物类构造函数对动物名称的变量赋初值

This.腿数量 =腿数量； //通过动物类构造函数对动物腿数量的变量赋初值

This.颜色=颜色； //通过动物类构造函数对动物身上颜色的变量赋初值

}

上面的这个代码片段实现了在高级语言中的构造函数，为了某个类中的部分变量的初始化操作。

2.3 JavaScript中创建实例对象

通过JavaScript编程技术中创建某个类的实例化对象，下面通过创建几个不同的动物类对象的实例化，下面的定义方式为创建某个类的实例化对象：

Var 老虎=new 动物（”老虎”，”4”，”黄色”）；

Var 华南老虎 =new 动物（”华南老虎”，”4”，”黄白相间”）；

上面的代码是通过函数方式实现对象的实例化和封装，通过JavaScript编程技术中创建某个类的实例化对象。

3 JavaScript中继承性的实现

本节中讲述的继承性是指子类继承父类的属性或者方法，在子类中无需编写与父类相同的代码，在JavaScript中并没有支持继承的语法作支持，但是有一种方式可以通过隐式方式实现继承，如果要实现继承，简单的方式是通过apply方法实现类之间的继承性，将父类对象赋给子类对象上，即可实现子类对象中增加一处代码即可实现，如下面的所示代码片段实现类与类之间的继承性。

Function 狗类（名称，腿数量）{

动物.apply（this，颜色）；//将父类对象赋给子类对象中；

This.名称= 名称；//子类对象通过继承父类参数对子类进行赋值

This.腿数量 =腿数量；

}

4 JavaScript中多态性的实现

本节中讲述的多态性是在类中允许出现多个相同或者相似的函数名称，构造成几个表面上十分相似的函数名称，但是，存在某些细微的差别之处，差别在于函数的参数个数、参数类型、函数的实现功能是不同的，如何在JavaScript编程技术中实现多态，有下面的几种实现方式：重载和覆盖。重载是根据在类中允许存在多个相似名称的函数，而这些函数参数类型、个数或者返回值不同而已，或者参数和返回值都不同，只是看是相似而本质上并不相似。通过下面的代码片段认识一下如何在JavaScript中实现多态性。

Function 动物（名称）{This.名称= 名称；}

//含有一个参数动物类的构造函数，并通过动物类构造函数对动物名称的变量赋初值

Function 动物（名称，腿数量）{This.名称= 名称；This.腿数量 =腿数量；}

//含有两个参数动物类的构造函数，并通过动物类构造函数对动物名称的变量和动物腿数变量的初值

Function 动物（名称，腿数量，颜色）{This.名称= 名称；

This.腿数量 =腿数量；This.颜色=颜色；}

//含有三个参数动物类的构造函数，并通过动物类构造函数对动物名称的变量、动物腿数变量、动物身上颜色变量的初值

Function 主函数（）{

动物（“老虎”）； //此处调用带有一个参数的动物类的构造函数，参数为“老虎”

动物（“老虎”，”4”）； //此处调用带有两个参数的动物类的构造函数，参数为“老虎”，“4”

动物（“老虎”，”4”，”黄色”） //此处调用带有三个参数的动物类的构造函数，参数为“老虎”，“4”，“黄色”

}

上述的伪代码片段显示，实现了多个参数不同的函数动物类（名称）、动物类（名称，腿数量）、动物类（名称，腿数量，颜色），动物类则是需要函数重载方式，总之，在JavaScript编程技术中实现函数重载是根据程序员自身定义形成一种重载方式，下面通过覆盖的方式实现某类对象的多态性的具体实例，对于在网页的网页中重写关闭当前网页函数的代码片段如下所示：