我所理解的jQuery(1)--jQuery前传JavaScript101

jQuery是什么,能干什么,网络上的文章可谓多如牛毛,笔者不再讨论这些问题.笔者只是想说一下jQuery是如何实现的,(探讨一下他的代码,学习一下别人的思维).

jQuery代码写得非常优雅,这个毋庸置疑.jQuery里面使用了很多JavaScript语言的技巧,但如果我们对JavaScript本身不是很了解,那么去解读jQuery,那就相当的困难.因此笔者在介绍jquery实现的方式前,还是想说一下JavaScript.

对JavaScript介绍非常不错的文章网络上,也是很多,不过我还是非常推荐 博客园 李战 的文章,尤其是其前半部分(当然后半部发更精彩,不过其已经不是JavaScript的基础知识了) ,其对JavaScript基础和理论 的讨论可谓高屋建瓴.

有如此优秀的文章摆在面前,如果笔者继续讨论相同的问题,未免有点 班门弄斧,小丑跳梁.但笔者针对李战没有提到的几个JavaScript问题,还是想补充表述一下,就算是"狗尾续貂"吧.

1.JavaScript中function的用途

大体来说function在JavaScript中有两种用途,a.表示一个 普通方法和 b.表示一个 "类型".如果表示普通方法的时候,其可以通过function的名字,在其他对象中被调用;如果 表示是一个类型的时候,那么要调用它就需要 通过new操作符,获取到一个实例(当然如果是使用这个类型的"静态方法"的时候,其需要直接使用这个类型的名字的).  如果能明白function的这两种用途,那么大家就不会迷惑 JavaScript的function中的 "this",究竟是指谁了: a.如果其表示一个普通方法,那么function中的this就指 调用这个function的对象(即调用者);b.如果其表示一个类型,那么function中的this,就表示当前这个function通过new 实例化后的对象.

2.JavaScript中 类型的 "静态成员"和"实例成员"

如果function表示一个"类型"的时候,那么其可以拥有 "静态成员"和"实例成员"的.

我们首先来看一下代码

var xieRan = function() {
            this.userName = "xieran";
            this.getName = function() {
                return "my name is " + this.userName;
            };
        }

这段代码我通过function定义了一个"类型"--xieRan,这个类型内部我们定义了一个属性(userName)和一个方法(getName),那么这两个成员,我们说其就是"实例成员",因为我们可以通过 new 一个类型获取实例后,在其上进行调用,如下:

var myInstance = new xieRan();
        myInstance.getName();
        myInstance.userName;

这个说的"实例成员",接下来我们在说一说"静态成员",我们知道 JavaScript语言相当的灵活,其可以在类型的"外部",将相应的成员"附加"到类型上,如下(注意:此处的"外部"二字)

var xieRan = function() {
            this.userName = "xieran";
            this.getName = function() {
                return "my name is " + this.userName;
            };
        };

xieRan.location = "qindao";
xieRan.getLoacation = function() {
      return "qingdao City";
};

这样,我们使用loacation和getLoacation()的时候,就可以通过类型的名称直接调用(而不用,同时也不能new一个实例去调用这些成员)这些成员,如下:

xieRan.location;
xieRan.getLoacation();

另外:当我们给某个类型 设置原型对象,或设置原型对象的成员时, 需要几点:

a.原型对象是一个"实例",这个"对象实例" 要 赋给 我定义的"类型"的静态属性 prototype,如下

xieRan.prototype = {
            nation: "China",
            getNation: function() {
                return "China";
            }
        }

或者直接给原型对象的成员赋值

xieRan.prototype.mail = "xier@tunynet.com";

b.原型的成员 都是 我们定义类型的实例成员

正像上面提到的,无论是给 prototype 直接赋值,还是给prototype 的成员赋值,我们操作的都是 原型对象. 那么我们就可以通过实例化后的对象,使用上面在prototype 里面定义的成员,如下:

var xieRan = function() {
            this.userName = "xieran";
            this.getName = function() {
                return "my name is " + this.userName;
            };
        };

        xieRan.location = "qindao";
        xieRan.getLoacation = function() {
            return "qingdao City";
        };

        xieRan.prototype = {
            nation: "China",
            getNation: function() {
                return "China";
            }
        };
        xieRan.prototype.mail = "xier@tunynet.com";

        var myInstance = new xieRan();
        myInstance.getName();
        myInstance.userName;

        xieRan.location;
        xieRan.getLoacation();

        alert(myInstance.mail);
        alert(myInstance.getNation());

3.JavaScript中 类型的"公用成员"和"私有成员"

如果function表示一个"类型"的时候,那么其成员是有 "公用"和"私有"之分的.刚才我们给xieRan这个类型定义实例成员(userName ,getUserName())的时候,我们都使用一个关键字"this",这样我们就能保证,这两个成员能够在类型实例的外部对访问到,那么我们称这种能被类型的实例外部访问的成员为"公用"成员,与之对应的就是"私有"成员,那么我们如何定义一个私有成员呢?--在类型内部我们不使用关键字"this",而直接通过var声明一个变量,那么这个变量就是 "私有"成员.如下:

var xieRan = function() {
            var _userName = "_xieran";
            this.userName = _userName;
            this.getName = function() {
                return "my name is " + this.userName;
            };
        };

其中的_userName就是一个私有成员,那么当我们new一个xieRan形成 实例对象的时候,我们就不能通过 实例对象 访问到这个 _userName成员(可以理解为私有字段)了,如果要使用其数据,那么就必须通过 "公开"的 "属性"userName.

说明:由于大家都知道的原因:"JavaScript是一个弱类型的语言",因此本文中,针对JavaScript提到的 "类","类型","实例","静态方法","实例方法","私有"成员,"公开"成员 都加了引号(如果没有加的话,那就是笔者的笔误),以此来模拟 "强类型"语言中的各种语言特性.