AJAX中JavaScript类的三种成员/反射机制-CSDN博客

本文链接：https://blog.csdn.net/cxc3214/article/details/2267536

本文介绍如何在JavaScript中实现类的私有成员及静态成员，并探讨了反射机制的应用，如通过for...in语句获取对象的所有属性和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读：
实现类的私有成员

　　私有成员即在类的内部实现中可以共享的成员，不对外公开。JavaScript中并没有特殊的机制来定义私有成员，但可以用一些技巧来实现这个功能。

　　这个技巧主要是通过变量的作用域性质来实现的，在JavaScript中，一个函数内部定义的变量称为局部变量，该变量不能够被此函数外的程序所访问，却可以被函数内部定义的嵌套函数所访问。在实现私有成员的过程中，正是利用了这一性质。

　　前面提到，在类的构造函数中可以为类添加成员，通过这种方式定义的类成员，实际上共享了在构造函数内部定义的局部变量，这些变量就可以看作类的私有成员，例如：

＜script language="JavaScript" type="text/javascript"＞
＜!--
function class1(){
　var pp=" this is a private property"; //私有属性成员pp
　function pm(){ //私有方法成员pm，显示pp的值
　　alert(pp);
　}
　this.method1=function(){
　　//在公有成员中改变私有属性的值
　　pp="pp has been changed";
　}
　this.method2=function(){
　　pm(); //在公有成员中调用私有方法
　}
}
var obj1=new class1();
obj1.method1(); //调用公有方法method1
obj1.method2(); //调用公有方法method2
//--＞
＜/script＞

　　这样，就实现了私有属性pp和私有方法pm。运行完class1以后，尽管看上去pp和pm这些局部变量应该随即消失，但实际上因为class1是通过new来运行的，它所属的对象还没消失，所以仍然可以通过公开成员来对它们进行操作。

　　注意：这些局部变量（私有成员），被所有在构造函数中定义的公有方法所共享，而且仅被在构造函数中定义的公有方法所共享。这意味着，在prototype中定义的类成员将不能访问在构造体中定义的局部变量（私有成员）。

　　要使用私有成员，是以牺牲代码可读性为代价的。而且这种实现更多的是一种JavaScript技巧，因为它并不是语言本身具有的机制。但这种利用变量作用域性质的技巧，却是值得借鉴的。

　　实现静态成员

　　静态成员属于一个类的成员，它可以通过“类名.静态成员名”的方式访问。在JavaScript中，可以给一个函数对象直接添加成员来实现静态成员，因为函数也是一个对象，所以对象的相关操作，对函数同样适用。例如：

function class1(){//构造函数
}
//静态属性
class1.staticProperty="sample";
//静态方法
class1.staticMethod=function(){
　alert(class1.staticProperty);
}
//调用静态方法
class1.staticMethod();

　　通过上面的代码，就为类class1添加了一个静态属性和静态方法，并且在静态方法中引用了该类的静态属性。

　　如果要给每个函数对象都添加通用的静态方法，还可以通过函数对象所对应的类Function来实现，例如：

//给类Function添加原型方法：show ArgsCount
Function.prototype.showArgsCount=function(){
　alert(this.length); //显示函数定义的形参的个数
}
function class1(a){
　//定义一个类
}
//调用通过Function的prototype定义的类的静态方法showArgsCount
class1. showArgsCount ();

　　由此可见，通过Function的prototype原型对象，可以给任何函数都加上通用的静态成员，这在实际开发中可以起到很大的作用，比如在著名的prototype-1.3.1.js框架中，就给所有的函数定义了以下两个方法：

//将函数作为一个对象的方法运行
Function.prototype.bind = function(object) {
　var __method = this;
　return function() {
　　__method.apply(object, arguments);
　}
}
//将函数作为事件监听器
Function.prototype.bindAsEventListener = function(object) {
　var __method = this;
　return function(event) {
　　__method.call(object, event || window.event);
　}
}

什么是反射机制

　　反射机制指的是程序在运行时能够获取自身的信息。例如一个对象能够在运行时知道自己有哪些方法和属性。

　　在JavaScript中利用for(…in…)语句实现反射

　　在JavaScript中有一个很方便的语法来实现反射，即for(…in…)语句，其语法如下：

for(var p in obj){
//语句
}

　　这里var p表示声明的一个变量，用以存储对象obj的属性（方法）名称，有了对象名和属性（方法）名，就可以使用方括号语法来调用一个对象的属性（方法）：

for(var p in obj){
      if(typeof(obj[p]=="function"){
             obj[p]();
      }else{
             alert(obj[p]);
      }
}

　　这段语句遍历obj对象的所有属性和方法，遇到属性则弹出它的值，遇到方法则立刻执行。在后面可以看到，在面向对象的JavaScript程序设计中，反射机制是很重要的一种技术，它在实现类的继承中发挥了很大的作用。

　　 使用反射来传递样式参数

　　在Ajax编程中，经常要能动态的改变界面元素的样式，这可以通过对象的style属性来改变，比如要改变背景色为红色，可以这样写：

element.style.backgroundColor="#ff0000";

　　其中style对象有很多属性，基本上CSS里拥有的属性在JavaScript中都能够使用。如果一个函数接收参数用用指定一个界面元素的样式，显然一个或几个参数是不能符合要求的，下面是一种实现：

function setStyle(_style){
      //得到要改变样式的界面对象
      var element=getElement();
      element.style=_style;
}

　　这样，直接将整个style对象作为参数传递了进来，一个style对象可能的形式是：

var style={
      color:#ffffff,
      backgroundColor:#ff0000,
      borderWidth:2px
}

　　这时可以这样调用函数：

setStyle(style);

　　或者直接写为：

setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});

　　这段代码看上去没有任何问题，但实际上，在setStyle函数内部使用参数_style为element.style赋值时，如果element原先已经有了一定的样式，例如曾经执行过：

element.style.height="20px";

　　而_style中却没有包括对height的定义，因此element的height样式就丢失了，不是最初所要的结果。要解决这个问题，可以用反射机制来重写setStyle函数：

function setStyle(_style){
      //得到要改变样式的界面对象
      var element=getElement();
      for(var p in _style){
            element.style[p]=_style[p];
      }
}

　　程序中遍历_style的每个属性，得到属性名称，然后再使用方括号语法将element.style中的对应的属性赋值为_style中的相应属性的值。从而，element中仅改变指定的样式，而其他样