AJAX——JavaScript面向对象
都说AJAX是很多旧知识的重新融合,大大提高了用户体验度。而除了上篇讲到了XMLHttpRequest对象为其核心外,JavaScript脚本语言,在其中也占据着非同小可的地位。这篇博客就主要写一下JavaScript在当今流行的开发方式面向对象的基础运用。
首先看一下,JavaScript之对象:
对象也就是我们面向对象中类的实例化,我们在三层开发中通过编写类,并将其实例化成对象,来完成各种工作的。下边通过几个例子来看看JavaScript中对象的创建,以及添加属性和方法。大家注意看注释的内容:
- <span style="font-size:18px;"><script language="javascript" type="text/javascript">
- //一,创建简单对象
- //1,通过new Object()
- var obj1=new Object();
- //2,通过{}
- var obj2={};
- //二,简单对象属性的添加
- obj1.num=1;
- obj1.str="String";
- obj1.hello=function(){
- alert("hello");
- }
- obj2.obj=obj1;
- //三,属性的访问,1,使用操作符
- alert(obj2.obj.num);
- alert(obj2.obj.str);
- obj1.hello();
- //四,属性的访问:2,使用{}操作
- alert(obj2["obj"]["num"]);
- alert(obj2["obj"]["str"]);
- obj1["hello"]();
- //五,通过对象直接量的方式定义包含属性的对象,利用{}
- var obj3={
- num:1,
- str:"String",
- hello:function(){
- alert("hello");
- }
- }
- </script>
- </span>
二,当然,面向对象中,用的更多还是类的各种属性,方法,各种性质等。
1,先看一下简单类的创建:
- <span style="font-size:18px;"> //类的定义方法1,
- var Teacher1=function(){
- }
- //类的定义方法2,
- function Teacher2(){
- }
- function ooTest(){
- //实例化类
- var teacher=new Teacher1();
- }
- </span>
2,类的公有属性和公有方法的简单添加:
- <span style="font-size:18px;"> //定义公有的属性和方法
- var Book=function(name){
- //定义公有属性
- this.name=name;
- //定义公有方法
- this.getName=function(){
- return this.name;
- },
- this.setName=function(nname){
- this.name=nname;
- }
- }
- </span>
3,这里再看一下在原型对象上定义公有方法:
原型对象:在JavaScript定义的每个类上都有一个Prototype(原型)对象,这个对象类似母体,其他此类的实例化对象可以继承来自原型对象上的方法和属性。更加详细的理解还得看后边:
定义原型对象,并添加属性和方法:
- <span style="font-size:18px;">//function上边都有一个原型对象 var proto = Book.prototype;
- proto.str = "原型的属性";
- proto.hello = function () {
- alert("hello");
- }
- var book1 = new Book();
- alert(book1.str);
- </span>
但是一些公有属性都是各自对象有自己的,例如,你有你的名字,我有我的名字。但是方法可以是相同的,例如,我们同学都有获得名字的方法,设置名字的方法。所以一般我们在原型对象上设置公有方法,而不设置公有属性,防止出错,例如:
- <span style="font-size:18px;"> //更好的定义方法,不再原型对象上定义公有属性 //原因:同一个类的不同对象的属性可以是不同的值,不能集中在原型对象上
- //优先访问对象上的属性,如果没有则访问原型对象上的属性
- var Book = function () {
- this.name = name;
- //只在原型对象定义一次,提高效率
- if(typeof Book. _init == "undefined"){
- Book.prototype.setName = function (nname) {
- Book.prototype.name = nname;
- }
- Book.prototype.getName = function () {
- return this.name;
- }
- }
- Book._init=true;
- }
- </span>
而这种方法相对于上边哪种也是非常高效的,主要体现在空间的利用率上:看这张图非常形象生动:
三,好,类的最基本的操作时完成了,下边看看一些私有属性,方法,静态属性、方法的定义:
私有属性,方法的定义:
- <span style="font-size:18px;"> //一,私有方法的定义,利用了局部变量和方法 Book.prototype.getCount = function () {
- addCount();
- return count;
- }
- //利用局部变量来模拟私有属性和方法
- var count = 0;
- var addCount = function () {
- count++;
- }
- //二,一个单独的对象,期望拥有一些私有的信息
- var priObj1 = new function () {
- var priname = "刘";
- this.getName = function () {
- return priname;
- }
- this.setName = function (nname) {
- priname = nname;
- }
- }
- //三,利用匿名方法直接调用的方式,来实现一个对象拥有私有的信息
- var priObj=(function(name){
- var priname = name;//私有属性
- return {
- getName: function () {
- return priname;
- },
- setName: function (nname) {
- priname = nname;
- }
- };
- })("刘")
- </span>
静态属性和方法的定义:
- <span style="font-size:18px;"> //一,静态属性和方法的定义 //定义静态的属性,利用static关键字
- Book.staticValue = 1111;
- //定义静态的方法
- Book.changeValue = function () {
- Book.staticValue++;
- }
- </span>
四,对于面向对象中的继承和接口这里也来模拟一下:
- <span style="font-size:18px;"> //1,模拟父子类的继承 Function.prototype.extend = function (parent) {
- this.prototype = parent;
- /*
- 一种复杂的继承方法编写
- for(var proName in parent.prototype){
- this.prototype[proName]=parent.prototype[proName];
- }
- */
- }
- //通过编写模拟继承方法,使Book为Teacher1的父类
- //当然也可以进行方法的重写
- Teacher1.extend(Book);
- //2,模拟接口及类实现接口
- //定义接口和类一样,只不过方法没有实现而已
- var Inter = function () {
- }
- //编写方法为undefined,及模拟接口
- Inter.prototype.test = undefined;
- //实现接口
- Teacher1.extend(Inter);
- </span>
综上为利用JavaScript编写面向对象中对象、类的一些属性和方法,继承,接口等的模拟,都是最基础的,需要将JavaScript的面向对象编程和C#的面向对象编程进行比较来学习,其实很多相似的东西,JavaScript都是模仿他们的来的吧!继续学习中……