JavaScript面向对象

关注

翻译最新推荐文章于 2026-02-23 20:04:52 发布 653 阅读 AI 写同款· GEO 优化 ›

js面向对象的基本概念和使用方法 1、什么是面向对象？ OO(Object Oriented，面向对象)是当前计算机界关心的重点，它是90年代软件开发方法的主流。面向对象的概念和应用已超越了程序设计和软件开发，扩展到很宽的范围。如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。 OO方法(Object-Oriented Method，面向对象方法) 面向对象的方阅读详情

面向对象目标

我假设读者对JavaScript有基本的了解，包括事件回调，并且了解面向对象编程。

我认为面向对象编程的三个主要的目标是：

² 封装提供一个方法，去调用JavaScript对象里边的成员

² 多态两个类响应同样一个方法

² 继承定义一个类的子类

通过以下例子，我将演示如下技术：

定义一个类

定义类里边的回调方法

定义一个子类

从子类调用基类的构造函数

在子类中重写基类的方法

在子类中调用基类的方法

简单对象

在JavaScript中，最简单的对象就是构建一个Object的数据类型。在JavaScript中，可以把一组命名后的属性集合放在一块儿执行。作为一种解释型语言，JavaScript允许你在任何地方任何时间去创建属性。

下面，我们举一个例子，首先创建一个对象，然后添加多个属性给这个对象：

obj = new Object;
obj.x = 1;
obj.y = 2;

我用如下的图形表示JavaScript对象：

obj
x	1
y	2
*Object.prototype*
constructor	Object

其中，左列显示的是对象的每个可用的属性，右列显示的值。在这个里边，其实我们定义了一个JavaScript内置的构造函数，包含两个属性。在后边，我会解释prototype这个属性的。

定义一个类

一个方法可以很容易定义出一个JavaScript类。下面的代码片段定义了一个类 foo，然后，创建了这个类的对象。

function Foo()
{
this.x = 1;
this.y = 2;
}

obj = new Foo;

obj
x	1
y	2
*Foo.prototype*
constructor	Foo
*Object.prototype*
(constructor)	Object

只要你愿意，你可以创建很多个Foo类型的对象，它们分别会初始化各自的属性，将x 与 y赋值为1和2.

解释prototypes

在JavaScript中，每一个对象都可以从其它的对象进行继承，我们称之为prototype。当执行到某属性时，JavaScript会首先直接从该对象中寻找是否具有，如果没有，那么就在对象的object prototype中寻找该属性，像一条锁链一样，一直追溯到根原型（root prototype）.

例如，我们希望创建一个对象object，X来自于方法B，B的原型是B.prototype, A.prototype, Object.prototype:

我们可以用下面的代码表示：

Object.prototype.inObj = 1;

function A()
{
    this.inA = 2;
}

A.prototype.inAProto = 3;

B.prototype = new A;            // Hook up A into B's prototype chain
B.prototype.constructor = B;
function B()
{
    this.inB = 4;
}

B.prototype.inBProto = 5;

x = new B;
document.write(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto);

1, 2, 3, 4, 5

x
inB	4
*B.prototype*
constructor	B
inA	2
inBProto	5
*A.prototype*
(constructor)	A
inAProto	3
*Object.prototype*
(constructor)	Object
inObj	1

定义并且调用类的方法

function Foo()
{
    this.x = 1;
}

Foo.prototype.AddX = function(y)    // Define Method
{
    this.x += y;
}

obj = new Foo;

obj.AddX(5);                        // Call Method

obj
x	6
*Foo.prototype*
constructor	Foo
AddX	function ...
*Object.prototype*
(constructor)	Object

多态

2, 3

a
x	2
*A.prototype*
constructor	A
DoIt	function ...
*Object.prototype*
(constructor)	Object

b
x	3
*B.prototype*
constructor	B
DoIt	function ...
*Object.prototype*
(constructor)	Object

定义一个子类

true, true
2, 3

b
x	2
y	3
*B.prototype*
constructor	B
(x)	1
DoIt	function ...
*A.prototype*
(constructor)	A
(DoIt)	function ...
*Object.prototype*
(constructor)	Object

An Alternate Sub-Classing Paradigm

Function.prototype.DeriveFrom = function(fnSuper)
{
    var prop
    if (this == fnSuper)
        {
        alert("Error - cannot derive from self");
        return;
        }
    for (prop in fnSuper.prototype)
        {
        if (typeof(fnSuper.prototype[prop]) == "function" && !this.prototype[prop])
            {
            this.prototype[prop] = fnSuper.prototype[prop];
            }
        }

    this.prototype[fnSuper.StName()] = fnSuper;
}

Function.prototype.StName = function()
{
    var st;
    st = this.toString();
    st = st.substring(st.indexOf(" ")+1, st.indexOf("("));
    if (st.charAt(0) == "(")
        st = "function ...";
    return st;
}

Function.prototype.Override = function(fnSuper, stMethod)
{
this.prototype[fnSuper.StName() + "_" + stMethod] = fnSuper.prototype[stMethod];
}

Repeating the sub-classing example using this new paradigm: