javascript 学习笔记之面向对象编程(一):类的实现

时间:2023-03-08 21:46:21

~~想是一回事,做是一回事,写出来又是一回事~~一直以来,从事C++更多的是VC++多一些,从面向过程到面向对象的转变,让我对OO的编程思想有些偏爱,将一个客观存在的规律抽象出来总是让人比较兴奋,通过抽象出类的关系,我们可以做更多的事,思路也更加清晰。javascript也是一样,虽然其被定为成一个解释性语言,但随着互联网应用越来越广泛,js的作用将显得举足轻重,各种js框架、插件也蓬勃的出现,各浏览器直面用户的交互也越来越依赖js了,js代码的封装和优化日益重要。

  也谈js的OO编程,虽然网上有许多技术大牛已经分享了星光熠熠的博文,但是将自己的理解写出来总是一件让人快乐的事,也算是对自己学习的一次真正的消化,下面就自己一段时间以来js面向对象编程经历和大家分享一下,主要从实现、继承、多态几个方面,如果可以,希望对您有所帮助~~~~

对this对象的理解

js中有个程序执行上下文对象this,也可以叫this指针,它在js对象操作中非常重要,看下面的例子:

 function simpleFunction() {
//变量定义
this.varable = "zhangyu";
//方法定义
this.method = function() {
console.log("模块函数中的this指代:" + this);
}
document.onclick = function() {
console.log("模块中文档点击事件函数中的this指代:" + this);
}
//返回模块的this对象
return this;
}
var hh = simpleFunction();
hh.method();
//输出当前文档的全局this对象
console.log("全局this对象:" + this);
//输出window对象
console.log("全局window对象:" + window);
//输出模块返回值
console.log("模块this对象:" + hh.toString());
//输出模块类的对象
console.log("模块类对象实例" + new simpleFunction()); console.log("[this==window]:" + (this === window));
console.log("[hh == window]:" + (hh === window));
console.log("[this == hh]:" + (this === hh));

运行结果如下:

javascript 学习笔记之面向对象编程(一):类的实现

根据结果可以看出,在没有指定上下文的执行环境中,this均指向的是window对象,而文档document的点击事件指定了文档对象上下文,故点击事件中this对象指向的是HTMLDocument对象。

this指针永远指向当前正在运行的对象,如果运行的对象发生了变化,那么this指针也发生了变化,因此一个方法内的this指针并不一定始终指向定义该方法的对象,是动态变化的,熟悉函数对象中包含的apply和call方法的童鞋都知道,一个客观存在的属性(方法)集合可以通过这两个函数动态指定执行上下文,下面我们通过一个简单的例子来看看this只针的动态变化:

 //定义两个对象objA和objB
var objA = new Object();
var objB = new Object();
//分别给这连个对象定义一个varable变量
objA.varable = 1;
objB.varable = 2;
//给对象A定义一个函数
objA.getVarable = function() {
console.log(this.varable);
};
//将对象A的函数初始化给对象B
objB.getVarable = objA.getVarable;
//调用对象B中的函数
objB.getVarable();

输出结果如下:

javascript 学习笔记之面向对象编程(一):类的实现

可以看出,当对象objA的函数赋值给了objB后,this指针发生了变化,有指向对象A转变为指向对象B了。

类的定义和实现

javascript中类的定义和函数类似,一般来说函数就是一个类的构造器,只不过在类中,对象的属性和方法需要用this指针来标记,类和函数都是模块的表现形式,都是将一系列属性和方法封装到一个单独的脚本块中,对象的定义可以通过new关键字实现,下面定义一个简单的js类:

 //类的构造函数
function ClassA() {
//定义一个局部变量
var localVarable = "localVarable";
//定义一个类的属性
this.varable = "test";
//定义一个类的方法
this.method = function() {
console.log(this.param);
}
}
//定义类的实例
var ObjA = new ClassA();
//调用类中的方法
ObjA.method();

可见在javascript中,类的构造函数中既可以定义成员变量,也可以定义成员函数,这里我们对new关键字的执行过程进行解析:

1. 当浏览器js解析器遇到new操作符后,新建一个空的对象{};

2. 接着开始执行类的构造函数,并将对象this指正指向这个函数对象;

3. 执行构造函数体,初始化类中定义的成员变量和函数,如程序给this对象不存在的属性赋值时,系统会自动给该对象创建属性;

4. 构造函数执行完成,new操作符就返回了初始化后的对象。

  这种定义类的方法将变量和函数都定义到构造函数中,一定程度下代码的可读性不强,另外,类的每次实例化都要创建对象成员和函数,在程序空间上造成了资源浪费。而js中,对象都有一个叫prototype的原型对象,通过对这个对象绑定对象的变量和方法,可以使该类对象的所有实例共享使用这些变量和方法,类初始化时只需要创建一次,不需要重复创建,参考下面的代码:

 //类的构造函数
function ClassA() {
//定义一个局部变量
var localVarable = "localVarable";
//定义一个类的属性
this.varable = "test";
}
//通过原型链定义一个类的方法
ClassA.prototype.method = function() {
console.log(this.varable);
}
//定义类的实例
var ObjA = new ClassA();
//调用类中的方法
ObjA.method();

这里我们通过prototype定义了类的函数method,通过new关键字实例化的对象自动关联了该方法,并可以进行调用,当然,我们还可以通过prototype给类添加、删除、修改成员或者方法,引用prototype后new关键字的执行过程为:

1. 浏览器遇到new关键字后,新建一个空的对象{},并将this指针指向这个空的对象;

2. 将prototype对象的所有成员都赋值给这个对象;

3. 执行构造函数,初始化类;

4. 构造函数执行完成,new关键字返回这个被初始化了的对象。

  了解了这一过程,我们发现,通过prototype定义的属性或者方法必须在类的实例化语句之前,不然会产生“未定义”错误。prototype专门用来设计类的成员,它和类是密不可分的,其还有个非常重要的属性constructor,这个属性石对类构造函数的引用,如:

 var ss = (ClassA.prototype.constructor === ClassA);
console.log(ss);

结果为ture。

  不管怎么说,这些类的定义与其他一些高级语言都有些差别,即:构造函数是用来初始化类成员的,类的成员函数共享类的成员变量。在javascript中,类的成员和类的函数是互相独立的,它们通过this指针和类的对象联系在一起,类的成员间相互引用必须通过this指针进行,下面对classA进行改写,使其最大程度与其他高级语言定义类的过程一致,如下:

 //类的构造函数
function ClassA() {
//inintial the varable;
}
ClassA.prototype.varable = "test";
//通过原型链定义一个类的方法
ClassA.prototype.method = function() {
console.log(this.varable);
}
//定义类的实例
var ObjA = new ClassA();
//调用类中的方法
ObjA.method();

可以看到,类的成员(变量或者方法)都通过prototype对象进行了定义,对prototype对象的赋值可以采用无类型方式,改写如下:

 ClassA.prototype = {
//变量定义
varable: "test",
//通过原型链定义一个类的方法
method: function() {
console.log(this.varable);
}
}

这样,类的定义基本和其他语言定义的方式一样了。

实现类的私有成员和方法、静态成员和方法

私有成员和方法:js中变量和函数的定义有其作用域,我们可以通过这个特性来实现js类中的私有成员和方法,即在类的构造函数中定义新的变量和函数,这些成员只能被构造函数内部的公用成员方法共享使用,构造函数外面访问不到,也就是说,prototype对象定义的公用成员方法将不能访问这些私有成员,看下面的例子:

 //类的构造函数
function ClassA() {
//类的私有(或者看做私有的变量和方法)
var localParam = 2;
function getLocalParam() {
return localParam;
}
//类的公有变量和方法,可以访问私有成员
this.param = 1;
this.setParam = function() {
this.param = localParam + getLocalParam();
}
}
//通过prototype定义类的公有成员方法
ClassA.prototype.Display = function() {
//输出类的公有成员
console.log(this.param);
//注:此处对类构造函数中的私有成员变量或者方法将不能访问。
}

其中,通过js中变量或方法的作用域将变量localParam和方法getLocalParam看做是类的私有成员,因为它们只能在类的构造函数中使用,同时,这种做法是以牺牲代码可读性来的,但相对应它的贡献,这种尝试还是值得的。

静态成员和方法:在其他编程语言中,静态成员和方法是通过类名直接调用的,js中可以通过直接给类添加属性(非对象属性)的方式实现这种效果,就像下面这样:

 //添加静态成员和方法
ClassA.staticParam = 1;
ClassA.setParam = function() {
ClassA.staticParam = 2;
}

这些定义的变量和方法只能通过类名直接访问,由于它们只和类的构造函数本身有关,与类的对象实例没有关系,故该类所有对象将共享该静态成员和方法(非调用关系),且静态成员函数将不能访问类的成员变量,只能根据传递给它的参数进行逻辑处理。另外,js中所有的函数类型对象均是Function类的实例,故我们可以通过Function类给所有的函数类型对象添加静态方法,如下:

 //给所有函数类型的对象添加方法
Function.prototype.getContent = function() {
return this.toString();
}

~~接下篇~~