在进入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的代码，你会发现他使用的就是闭包
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内部也是这么定义原型方法
全局方法定义规则：
$.alert =function(msg){window.alert(msg)}
全局方法不需要经过对象，直接定义即可。
上面就是定义jQuery插件的方法，其实很简单，就把jQuery当做一个对象，并且把定义在原型上面的方法称为原型方法，属性方法称为全局方法
上面介绍的几个概念我也只是简单的说了一下，如果说的不够详细，大家可以去网上看看视频或者参考书或者搜一搜资料
上面的几个概念对javascript面向对象编程很重要，希望大家可以花点心思去弄懂。