浅谈:javascript的面向对象编程之基础知识的介绍

在进入javascript的面对对象之前，我们先来介绍一下javascript的几个概念。

1、javascript的面向对象的基本概念

function aa(){

}

/*
 * 这里的aa，在我们以前看来他是一个函数，确实如此，但是从现在的角度来看
 * aa不仅仅是一个函数，他还是一个对象。在javascript中，一切都是对象，函数也不例外
 * 我们可以给对象的属性赋值，例如aa.b = 5,还可以获取对象的值，例如
 * 这种赋值可以直接赋值，不需要声明，直接aa.属性=xxx,即可为aa的某个属性直接赋值
 * alert(aa.5)。
 */
aa.b = 5;
alert(aa.b);

//你也可以这样

function bb(){
    alert("bb");
}

aa.d = bb;
aa.d();//在网页上显示bb
/*
 * 通过上面的例子我们可以发现，aa这个对象(函数)的属性不仅可以是普通的变量
 * 也可以是对象属性。bb也是一个对象，bb也可以成为aa对象的一个属性
 * 和java的属性类似，属性既可以是普通类型，也可以是引用类型
 */

//你还可以这样，创建一个json格式的对象，把json格式的对象放入对象aa中

var json ={//创建一个json格式的对象
        "name":"zhangSan"
};

aa.objectJson = json;//让aa中objectJson属性赋值为json
alert(aa.objectJson.name);//在网页上可以看到zhangSan

/*
 * 在aa对象(函数)中,aa里面的属性可以是普通变量，函数(对象类型)，也可以json格式的对象等等
 */

2、javascript的返回值

/*
 * js函数的返回值
 * 我们之前见到的js返回的都是一个变量
 */

function fun(){
    return 5;
}

alert(fun());

/*
 * 但是，由于我们明确了对象的概念，所以返回值当然也可以是对象
 * 在函数(对象)内部定义函数
 */

function cc(){
    var i=0;
    function dd(){
        i++;
        return i;
    }

    return dd;//返回值变成了一个对象
}

//调用函数
var cfun = cc();
alert(cfun());//显示1

/*
 * 下面我们来做一个练习来帮助我们理解js的返回值
 * 需求：调用一个Person函数，返回一个对象，该对象中有setPid,getPid,setPname,getPname方法
 *
 * 分析：可以这么去理解。返回一个json格式的对象，在json格式对象里面
 * 使用键值对的方式，只不过键是函数(对象)
 */

function person(){
    return{
        setPid:function(pid){
            this.pid = pid;
        },

        getPid:function(){
            return this.pid;
        },

        setPname:function(pname){
            this.pname = pname;
        },

        getPname:function(){
            return this.pname;
        }
    };
}

var p = person();

//使用对象的属性方法
p.setPid("2");
p.setPname("zhangSan");
alert(p.getPid());
alert(p.getPname());

3、javascript原型的概念

function person(){

}

function student(){

}

/*
 * 这个属性a只是person对象私有，但是student对象并没有该属性，
 * 如果想让student有person的属性，怎么办呢?
 *
 * 这个时候，就需要引入原型(prototype)的概念
 *
 * 原型是什么：原型是一个对象，其他对象可以通过它实现属性继承。
 * 任何一个对象都有原型吗?:是的
 *
 *
 * 哪些对象有原型
    所有的对象在默认的情况下都有一个原型，因为原型本身也是对象，
    所以每个原型自身又有一个原型(只有一种例外，默认的对象原型在原型链的顶端。更多关于原型链的将在后面介绍)
 */
person.a = 5;

/*
 * 如果student想要person对象的属性
 * 我们上面说过，一个函数，他是对象，
 * 在这里一个函数也是一个构造器函数，通过下面的例子可以看出，student也是一个构造器函数
 * var s = new student();
 *
 */

student.prototype = person;//把person的原型属性给了student的原型
var s = new student();
alert(s.a);//在创建student对象的时候，就可以使用原型里面的属性了

function man(){

}
/*
 * 我们可以打印出一下man这个对象的构造器,下面的就是man的构造器
 * function Function() {
        [native code]
    }
 */
alert(man.constructor);//上面注释中的结果

/*
 * 我们也可以给原型进行这样的赋值
 * 也就是说，man原型可以是一个json类型的对象
 */

man.prototype = {
        aa:function(){

        },

        bb:function(){

        }
};

/**
 * 对原型的总结：
 * 1、任何一个对象都有构造器
 * 2、所有的对象都有原型
 * 3、通过构造器函数.prototype.属性的方法可以给原型添加属性
 */

4、javascript闭包的概念

//还是来举个例子
function person(){

}

person.a=5;
/*
 * 我们知道，a是person对象的一个属性，但是这个person对象的属性a
 * 使用者都可以访问，而且还可以修改a的属性值
 * 但是如果我定义了一个对象，有一些属性很重要，我不想让外部去修改他，怎么办？
 * 这就需要使用到闭包。
 *
 * 对闭包的理解和说明
 *     1、在函数内部定义的函数或者变量无法在外面访问
 *  2、在外部访问函数内部函数或者变量的过程叫做闭包
 *  3、闭包很消耗内存，因为变量不会因为函数的销毁而销毁
 *  4、使用闭包使函数和变量具有了私有属性
 *  5、闭包有闭包的范式
 *
 *  闭包的范式：首先是两个大括号()() 前一个大括号里面放一个匿名函数，后一个大括号里面放一个实参
 *              形参和实参对应，在匿名函数中，都可以使用形参
 *  (function(形参){})(实参)，说白了，也就是函数里面放一个或者多个函数
 *
 *  下面来看具体的例子
 * */

(function(a){
    var i=0;
    function aa(){
        alert("aa");
    }
})(5);

//alert(aa());//无法访问aa

/*
 * 但是又会出现一个问题，如果对象里面我想提供一些方法，给外界使用，又可以怎么办呢
 * 比如，我想把bb和cc方法给外界访问，怎么办呢？
 * 可以把函数变成实参的一个属性，通过实参的属性来进行调用
 * 说白了，就是在形参中把私有属性添加成形参的属性
 * 在外界通过实参获取属性(私有方法)，进行调用
 *
 */

(function(a){
    function aa(){
        alert("aa");
    }

    function bb(){
        alert("bb");
    }

    function cc(){
        alert("cc");

    }

    /*
     * 在a(window)对象中，有一个openMethod的属性，
     * 在属性中返回了两个函数(对象)
     *
     */
    a.openMethod = function(){
        return {
            bb:bb,
            cc:cc
        };
    };

})(window);

var jsonMethods = window.openMethod();
jsonMethods.bb();//bb
jsonMethods.cc();//cc

/*
 * 闭包所解决的问题：
 * 1、解决了js面向对象过程中私有属性和私有对象的问题
 * 2、在函数内部定义的函数可以在函数外部使用
 */

如果你打开jQuery的代码，你会发现他使用的就是闭包

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAASQAAAA/CAIAAADG/SJXAAAGAklEQVR4nO2dy7WrIBSGrSsFUUPKoIxU4DBVOEsDd2V01i3gcgcK7M0bIhiP/7f2IIkoCPzyCFsm+XyrjeVx1zwW/aN6P+U99DsLfyeXifDz85MJsfGSt2maxFwWmp12k6/KswqZhZukWUya6qR+N1+V/2tiNroV76DynfSH91MaKS2PsHqWh5Xb+yltGPYlwm8S2yxsyfvldHK+J/9f8rYmZBadc3hM+U7BXyNqo5qiwnO/BSkWWyNdxZaMaRa/S21t7J//5ooveRtTsk68G7uVb43YePv1fkodKNYSMozY/EKhuRpqu1/yNonZNOzsbNLc0yO0+7FeKlAZcvWD9WFMkszzlgUTs04nSRm5uE0n+XE7QR9bj3jXp8/Zz0nlw5flv25UejVso8t3CmnEFY8ZnLmK0gcyjZpSiojNf1Dwm/BDrJmy3YTbxOuApORYdtG+SCbeBORkv4rog9HCoFHT9G+lbUW2fuIp5YUaS5xD4rbOlP9GDkXFVJcP3qndy3fylLJOiATl835KPmhb1bc8SmZIjNhMkk0S3eoUKuzATfJcsd8idScfbwKSJL+hyRUGjydWK0kcyaL/lNPlv1Fcx77kkPKdnMFWRjh2bOaP2TJys2O2LW2zuAlxo6UQuHOT/Ehh259jDYMNl403gVP9veubXlgknQ6kMIIpMAeK0lj5RD9b/q+9yJe85eS2X8vWp3ynR3gYFmHRwZ35x4LpSCu2NQkvKeRrFpOYvfHvh09W93T+YErEmyDWUVC0cIrSSYlXt+2cLlMDJ8t/Haz7dHP38p2MRvJKY+3X8iCdTfYlApmNnMUkpBTytX4U7vi3sLBprqwPNfolkHXJeLfnU+RRyJLEHrLk+uSZyIY53rMyfGNejDchukzDnSv/t+mRfaeJApH0L99Ji4v+Q03/wY7/p81OyU+RELHRm5mFk+hAcxyfBaLdedZzJj0KZ4osEC+9VInYYtendyBmlh5+a3QAHe3osCq7KyfJfyc5XWf/h5RveOq/B73/Z+uLP5VWNZm5V5QXpEtP2mNI+UJsCWZJp3CDHRz77N9ZF317TSdi7rd6ZHT5QmwpbOcgUu9pt2KvSLceDJTWn8HlC7EBMIgDxPbn7z8Y7IIGscFggwxig8EGGcQGgw2y6QNPbXKkYNk/xAa7uO3iqV3iqA2xwa5urZ7aVJuqzlP78HuGwQ6xVk9tR101q/4Pv2cY7BBr9tSmYdbBG8QGg6Ws3VObzI/I54KWDQbLWLOndtnvEBsMpq3VU7taaxAb7OrW7KnNf61xHj38nmGwQ6zdU9ueUPIiO4gNdnnDci0YbJBBbDDYIIPYYLBBBrHBYIMMr0UAYBAQGwCDgNgAGMQxYtNvCIu+azpOxc4zR9DxLYfg7OQ9tTWBpf32hPyW2oGWLfjK3+h70/XBYqmtiq6u+h/u35BMP7g0pZ7a76e8S0mX9pNA3BsgQqAbGW6lktsUVMjgGLFBbiBGofPougCZLkPmS5Kr9mczxLqEwfredcegfeMZlVRwLorEphf1E4Gxdf7b+sl021YhtlBt9X5KhSF7ivhbH5kNSrzdNmMbr7BLNaYtsG8LuBgFntq2g8nFZndFvD8W550kAQJiq9kl0BemP+SL7C/Ljo/ZGzq0AQrEdnWyntrOi0fYx8V65TSJTanYyKq0HfvWvaHRkQQ+OU9tNjRzupF3Z7pk55Yt2zH74r2hITbgk/HUDni5rRpzJiDzDVvVmM2vv6Ha+8V7Q3feJxGcklpP7QFT/6psEkJ96d7QscRul4YEr0vWU5vivIGk8fXjluqp/8A0xNftDR1Lf2bTbvD7OXRtZPxP7aAGT7LzbXy81m9LenAGjhRbdLlWVFEnWJyRnvQ5w8MC9AILkfclkn42FAQXBS42AAwCYgNgEBAbAIOA2AAYBMQGwCA+8tRO7i/lArGBi9Puqb2FehZsYKOUgtjA5fnEU/uxqLLdopRSEBu4PK2e2so9lgViAxen1VObhYXYAMjT6qltgNgAKKPVU5udALEBkKfVU5uFgNgAyNPuqW1/g9gAKOA/kF9IwT3xPdsAAAAASUVORK5CYII=" alt="" width="292" height="63" />

5、jQuery插件的制作

说到jQuery，是一个功能很强大的插件，而且使用的方法也很简单，但是有些时候，他提供的方法或许并不能使我们满意

那我们能不能在jQuery基础上，定义自己的插件，用来针对我们自己的项目，答案是可以的。

在制作插件之前，我们先来解析一下jQuery

在jQuery的最外层，是一个闭包。

//jQuery最外层是一个闭包
(function( window, undefined ) {

　　var jQuery = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
　　　　.....
　　　　//相当于把jQuery当做一个window对象的属性，在外部通过window.Jquery来访问,可以推出$=jQuery
　　　　......
　　　　window.jQuery = window.$ = jQuery;
　　　　　　　　
    },

})(window);

//jQuery 就是一个很普通的函数，也是一个对象，还是一个构造函数

现在大家终于明白闭包的重要性了吧，jQuery都使用闭包，想想看闭包是有多重要

我们以前使用jQuery大概有这么两种使用方法

$("#xx").val()

或者是

$.post();

对于第一种使用方法，首先获取到一个对象，然后使用对象.val()来使用具体方法

对于第二种方法，直接$.post(),并没有依赖域任何对象，直接使用

所以就产生了两种不同类型的方法，原型方法和全局方法

原型方法就是针对某写对象设计的，首先需要获取到jQuery对象，然后对象.xx方法

全局方法就是不依赖于任何对象，直接可以调用。

所以我们制作jQuery插件就有了两种方法，一是制作原型方法，而是制作全局方法

原型方法定义的规则：

$.fn.aa = function(){}  说明：$.fn = $.prototype

这里的aa就是原型方法（在jQuery原型上定义的方法）

其实在jQuery内部也是这么定义方法的

附：jQuery内部的部分代码，可以看出jQuery内部也是这么定义原型方法

aaarticlea/png;base64,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" alt="" />

全局方法定义规则：

$.alert =function(msg){window.alert(msg)}

全局方法不需要经过对象，直接定义即可。

上面就是定义jQuery插件的方法，其实很简单，就把jQuery当做一个对象，并且把定义在原型上面的方法称为原型方法，属性方法称为全局方法

上面介绍的几个概念我也只是简单的说了一下，如果说的不够详细，大家可以去网上看看视频或者参考书或者搜一搜资料

上面的几个概念对javascript面向对象编程很重要，希望大家可以花点心思去弄懂。