你的位置:首页 > Java教程

[Java教程]浅谈: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属性赋值为jsonalert(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();//bbjsonMethods.cc();//cc/* * 闭包所解决的问题: * 1、解决了js面向对象过程中私有属性和私有对象的问题 * 2、在函数内部定义的函数可以在函数外部使用 */

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

 

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

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