日期:2014-05-16  浏览次数:20458 次

探讨在 JavaScript 实现类的方式

原文信息

JavaScript Objects

http://www.codeproject.com/Articles/637892/JavaScript-Objects  

探讨在 JavaScript 实现类的方式

在 javascript 中有很多方式来创建对象,所以创建对象的方式使用起来非常灵活。那么,到底哪一种方式是最恰当的对象创建方式呢?构造模式,原型模式还是对象原意模式(Object literal)呢?

但这些模式具体是怎么回事呢?

在开始讲解之前,让我们先清楚地介绍一下关于 javascript 基本知识。

有没有可能在 javascript 中实现面向对象编程的方式呢?

答案是可能的,javascript 是可以创建对象的!这种对象可以包含数据及能够操作数据的方法,甚至可以包含其他对象。它没有类但拥有构造函数;它没有类继承机制,但是可以通过原型(prototype)实现继承。

现在看起来,我们已经了解了在 javascript 中创建对象及实现基于对象编程时所必须的组成部分。

我们都知道 javascript 拥有私有变量。一个通过“var”关键字定义的变量,只能在函数体中被访问,而不能在函数外被访问。那么,如果我们不通过使用“var”关键字来定义变量会怎样呢?我们现在不对这个问题进行深入探讨,可能是通过“this”进行访问的,我会在另外的时间来详细讲述这个问题。

现在回到之前的问题。到底哪一种方式是最恰当的对象创建方式呢?
让我们用已经知晓的知识,通过创建Person的对象是来试验一下。

var Person = {
   firstName : 'John',
   lastName : 'Cody',
   fullName : '',
   message : '',

    createFullName : function () {
        fullName = this.firstName + ' ' + this.lastName;
    },

    changeMessage : function (msg) {
       this.message = msg;
    },

    getMessage : function () {
        this.createFullName();
        return this.message + ' ' + fullName;
    }
}

Person.firstName = 'Eli';
Person.lastName = 'Flowers'
Person.changeMessage('welcome');
var message = Person.getMessage(); // welcome Eli Flowers
alert(message);  

这是对象原意模式(literal pattern)。这非常接近我们常创建对象的方式。如果你不需要关心私有/包装的成员,并且你知道不将创建这个对象的实例。那么,这种方式将会很适合你。公有的成员可以做所有私有成员的事情,不是吗?但是,这不是一个类,而是一个对象而已,不能被创建实例并且不能被继承。

让我们尝试下其他的方面:

var Person = function() {
    this.firstName = 'John';
    this.lastName = 'Cody';
    var fullName = '';
    this.message = '';

    var _that = this;

    var createFullName = function () {
        fullName = _that.firstName + ' ' + _that.lastName;
    }

    this.changeMessage = function (msg) {
       this.message = msg;
    }

    this.getMessage = function () {
        createFullName();
        return this.message + ' ' + fullName;
    }

}

var person1 = new Person();
person1.firstName = 'Eli';
person1.lastName = 'Flowers'
person1.changeMessage('welcome');
var message = person1.getMessage(); // welcome Eli Flowers
alert(message);


这是一种构造模式的实例(Constructor Pattern)。那么,这是类还是对象呢?应该 两种都算是吧。我们能够在当请求时把它当做对象Person来使用。它毕竟也只是一个函数而已。然而,它可以通过使用“new”关键字来实现创建新的实例功能。

在使用这种方式时,我们需要时刻记住如下要点:

1. 无论什么时候这个函数被调用时,它拥有一个特别的变量叫做“this”并且可以在全局范围内使用。全局范围依赖于这个函数自身的作用范围。

2. 无论什么时候通过“new”关键字创建这个函数的实例,“this”变量指向这个函数本身,并且这个“new”操作将会影响到函数体中的代码被执行。这也正是构造模式。

3. 任何附加到“this”变量下的变量都会成为公有属性并且任何通过“var”关键字定义的变量都将是属于私有属性。

4. 一个附加到“this”下的函数叫做特权函数,它可以访问所有的私有变量以及被附加到“this”下的函数及变量。

5. 私有函数可以访问到其他私有变量及私有函数。

6. 私有函数不能直接访问被附加到“this”变量和函数。我们可以通过创建一个私有变量“_that”并且将它赋值为“this”的方式实现。

7. 任何私有变量及函数对于其他私有函数及其他被附加到“this”的函数是可用的。这完全是可能的再javascript的作用范围下。

8. 一个变量:不是通过“var”关键字,也不是附加到“this”变量上以获得全局作用范围的。例如,对于一个自定义函数的作用范围。需要再一次地了解作用域及集群的知识。

这已经实现了我们想要的大部分要求了,但是,有时候“this”和“that”这两个入口变量很容易造成给人们带来疑惑。尤其对于那些一直坚持要求纯粹私有的人来说,更容易迷惑。

让我们再稍微修改下试试吧。

var Person = function () {

    //private 
    var firstName = 'John';
    var lastName = 'Cody';
    var fullName = '';
    var message = '';


    var createFullName = function () {
        fullName = firstName + ' ' + lastName;
    }

    //public setters 
    var setMessage = function (msg) {
        message = msg;
    }

    var setFirstName = function (fName) {
        firstName = fName;
    }

    var setLastName = function (lName) {
        lastName = lName;
    }

    var getMessage = function () {
        createFullName();
        return message + ' ' + fullName;
    }

    //functions exposed public
    return {
        setFirstName: setFirstName,
        setLastName: setLastName,
        setMessage: setMessage,
        getMessage: getMessage
    };

};


var person1 = new Person