Javascript 的函数式对象（一）利用闭包模拟类的私有变量和方法

        在Javascript的框架开发中，面向对象式编程和面向函数式编程各有长处，因况而异。
除了在单例工厂中设置一些类型常量外，闭包通常被用来模拟类的私有变量和方法。
结合js的prototype机制，一个具有面向对象特点的js函数能够被以减少内存占用的形式实例化出来。

var MyNamespace = {};

MyNamespace.TreeItem = function (){
    
    //使用闭包产生的私有类变量
    var label,  icon;

    //可访问私有变量，但不可被外部访问的私有方法
    function validate(){
    }

    //可访问私有变量，也可被外部访问的方法
    this.setLabel = function( newLabel ){
        label = newLabel;
        validate();
    }; 

    this.getLabel = function(){
        return label;
    }; 

    this.setIcon = function( newIcon ){
        icon = newIcon;
        validate();
    }; 

    this.getIcon = function(){
        return icon;
    }; 
};

// 该方法可被外部访问，却只能通过取/赋值器访问私有类变量
MyNamespace.TreeItem.prototype = {
    
    print: function(){
        console.log( this.getLabel() );
    }

}

//实例化TreeItem类并调用其公共方法
var treeItem = new MyNamespace.TreeItem();
treeItem.setLabel('Hello World!');
treeItem.print();

        每创建一个新的TreeItem实例，内存会为其私有变量，私有方法和所有能够访问私有变量和私有方法的方法开辟物理空间，而prototype中的方法始却始终只有一个。因此我们可以将那些不需要保存自身状态信息的方法放到js函数式对象的prototype中去，以节省浏览器的内存开销。

评论

6 楼 hbc8848 2011-01-17  

bigbighead 写道

hbc8848 写道

回答一下：
2. 这里你指的上级对象MyNamespace只是用来做一个命名空间的划分，并不是你可能期望的“继承”，如果你希望看到继承的话，该系列的后几篇文章会提到我推荐的js继承方式。

博主，你好！
我这里说的不是“继承”。
在我们讨论的这个例子中，你先创建了一个对象 MyNamespace
然后给这个对象动态增加一个属性叫TreeItem
从语法上讲，TreeItem是MyNamespace对象的成员
（不知道，我这样说对不对）
我的问题是，如何在成员变量中 访问所在对象的属性。
为了把问题说的更清楚，我举个例子：

var MyNamespace = {};
MyNamespace.name = "abc";
MyNamespace.action = function(){...};
MyNamespace.TreeItem = function (){  
   //这里面 如何访问 MyNamespace.name属性或action 函数
}

因为这里的 MyNamespace 是这样定义出来的：var MyNamespace = {} 所以它可被看作是java里的单例模式，所以可以用如下方法访问 MyNamespace.name属性或action 函数：

var MyNamespace = {};  
MyNamespace.name = "abc";  
MyNamespace.action = function(){};  
MyNamespace.TreeItem = function (){    
   //这里用全名访问 MyNamespace.name属性或action 函数  
   alert( MyNamespace.name );
};
MyNamespace.TreeItem();

5 楼 biyelei 2011-01-13  

不错

4 楼 bigbighead 2010-11-18  

hbc8848 写道

回答一下：
2. 这里你指的上级对象MyNamespace只是用来做一个命名空间的划分，并不是你可能期望的“继承”，如果你希望看到继承的话，该系列的后几篇文章会提到我推荐的js继承方式。

博主，你好！
我这里说的不是“继承”。
在我们讨论的这个例子中，你先创建了一个对象 MyNamespace
然后给这个对象动态增加一个属性叫TreeItem
从语法上讲，TreeItem是MyNamespace对象的成员
（不知道，我这样说对不对）
我的问题是，如何在成员变量中 访问所在对象的属性。
为了把问题说的更清楚，我举个例子：

var MyNamespace = {};
MyNamespace.name = "abc";
MyNamespace.action = function(){...};
MyNamespace.TreeItem = function (){  
   //这里面 如何访问 MyNamespace.name属性或action 函数
}

3 楼 hbc8848 2010-11-18  

回答一下：
1. this 关键字的用法有很多。该例的this指的是：一个方法中的this指的是调用了该方法的对象。如在 treeItem.setLabel() 这段代码中：treeItem 调用了setLabel方法，那么setLabel 方法中的this指的就是treeItem。 如果setLabel这个方法被赋给了另一个对象tabItem，那么this指的就是tabItem。

2. 这里你指的上级对象MyNamespace只是用来做一个命名空间的划分，并不是你可能期望的“继承”，如果你希望看到继承的话，该系列的后几篇文章会提到我推荐的js继承方式。

2 楼 bigbighead 2010-11-18  

刚刚学习JavaScript
在此先向博主表达深深的敬仰之情。

问两个问题：
1.在TreeItem的声明中，使用this关键字，这个应该是指向TreeItem实例的吧？
2.如何在TreeItem中访问其上级对象的成员呢？
  比如MyNamespace有一个 getName()函数
  这里怎么访问到？

1 楼 bigbighead 2010-11-18