JavaScript 面向对象编程(1) 基础

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。

(0)

相关推荐

  • 再谈javascript面向对象编程

    另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正 吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也来自Javascript这个悲催的名称,我在想网景公司的Javascript设计者在给他起名称那天一定是脑壳进水了,让Javascript这么多年来受了这么多不白之冤,人们都认为他是Java的

  • JavaScript 面向对象编程(2) 定义类

    本文承接上一篇JavaScript面向对象编程(1) 基础. 上篇说过,JavaScript没有类的概念,需要通过函数来实现类的定义.先通过一个例子说明: 复制代码 代码如下: function myClass() { var id = 1; var name = "johnson"; //properties this.ID = id; this.Name = name; //method this.showMessage = function() { alert("ID:

  • JavaScript面向对象编程实现模拟

    目录 前言 1. 构造函数 2. new的过程 2.1 基础使用 2.2 new.target 3. 手动实现一个构造函数 前言 每个对象都是一个功能中心,具有明确分工,可以处理信息,处理信息,发出信息.面向对象编程具有灵活性.可复用性.模块化等好处,适合更多合作完成的大型项目. 1. 构造函数 构造函数的功能是生成对象,生成具有相同结构对象的函数.Java语言通过类实现面向对象,对象是类的实例,而Javascript则是通过构造函数作为对象的模板,使用prototype实现继承. 构造函数的几

  • Javascript 面向对象编程(一) 封装

    学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd

  • 浅谈javascript 面向对象编程

    感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript面向对象编程",接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开. 封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装,所以首先我们先来简单介绍一下闭包,看下面这个例子: 复制代码 代码如下: <script type="text/javascript"> function myInfo(){ var name ="老鱼&quo

  • 老鱼 浅谈javascript面向对象编程

    感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript面向对象编程",接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开. 封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装,所以首先我们先来简单介绍一下闭包,看下面这个例子: 复制代码 代码如下: <script type="text/javascript">// <![CDATA[ function myInfo(){ var nam

  • JavaScript面向对象编程入门教程

    尽管面向对象JavaScript与其他语言相比之下存在差异,并由此引发了一些争论,但毋庸置疑,JavaScript具有强大的面向对象编程能力 本文先从介绍面向对象编程开始,然后回顾JavaScript对象模型,最后演示JavaScript中的面向对象编程概念. JavaScript回顾 如果你对诸如变量(variables).类型(types).函数(functions).以及作用域(scope)等JavaScript概念觉得心里没底,那么你可以阅读重新介绍JavaScript中的这些主题.你还

  • 深入剖析JavaScript面向对象编程

    二. Javascript 面向对象编程:构造函数的继承 本节主要介绍,如何生成一个"继承"多个对象的实例. 比如,现在有一个"动物"对象的构造函数, function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数, function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫&qu

  • javascript 面向对象编程基础 多态

    Javascript已经可以模拟出面向对象的封装和继承特性,但是不幸的是Javascript对多态特性的支持非常弱!其它面向对象语言的多态一般都由方法重载和虚方法来实现多态,Javascript也通过这两种途径来实现! 重载:由于Javascript是弱类型的语言,而且又支持可变参数,当我们定义重载方法的时候,解释器无法通过参数类型和参数个数来区分不同的重载方法,因此方法重载是不被支持的!当先后定义了同名的方法的时候,后定义的方法会覆盖先定义的方法! 既然解释器无法分辨重载方法,那就手动区分不同

  • JavaScript 面向对象编程(1) 基础

    1. 用JavaScript实现类 JavaScritpt没有专门的机制实现类,这里是借助它的函数允许嵌套的机制来实现类的.一个函数可以包含变量,又可以包含其它函数,这样,变量可以作为属性,内部的函数就可以作为成员方法了.因此外层函数本身就可以作为一个类了.如下: 复制代码 代码如下: function myClass() { //此处相当于构造函数 } 这里 myClass就是一个类.其实可以把它看成类的构造函数.至于非构造函数的部分,以后会详细描述. 2. 如何获得一个类的实例 实现了类就应

随机推荐