【散分】你是怎么隐藏你的变量和属性的

2012-04-07

【散分】你是如何隐藏你的变量和属性的这段时间在javascript版块学习了很多，其中感触最深的就是对js继承和对

【散分】你是如何隐藏你的变量和属性的
这段时间在javascript版块学习了很多，其中感触最深的就是对js继承和对变量的隐藏上。
我们都知道全局变量的危险性以及可能的与其他库或者js文件冲突问题，所以很多时候我们都在想办法去隐藏我们的全局变量，最简单的方法莫过于加入“命名空间”

JScript code

var Lib = {};Lib.Do = {};...

把所有的内容都放到一个Lib里面。这样我们就可以不用为全局变量的污染而担忧了。
当然，说到js，就不得不提那强大的闭包，在这里我们也可以通过闭包来解决全局变量的污染。比如我们希望构造一个person对象，其对象中有name、age、sex3个属性。那么我们通常的做法是什么呢？

JScript code

function Person(name,age,sex) {  this.name = name || "jee";  this.age = age || 24;  this.sex = sex || true}

这种模仿类的方法使从类对象语言如（C#、java、C++）等专业的童鞋来说非常的容易接受，我们可以加上属性的getter和setter
Person.prototype.getName = function() {
return this.name;
};
Person.prototype.setName = function(name) {
if (name) {
this.name = name;
}
}
现在我们理所当然的可以去创建一个对象

JScript code

var p = new Person("jee",24,true);alert(p.getName());

然而，我们同样可以这样去获取name

JScript code

alert(p.name);

这很糟糕，因为他暴露了我们的属性。通过闭包我们可以去解决这个问题，因为在js中，函数是可以被当作返回值返回的。

JScript code

function person(name,age,sex) {    var _name = name || "jee";    var _age = age || 24;    var _sex = sex || true;    return {      getname : function() {        return _name;      },      setname : function(n) {        _name = n;      }       getage : function() {        return _age      }      ...    };}

var p = person("jee",24,true);
这个时候你只能通过getname,setname...等方法来进行属性的存取了。

在这里我遇到过这样一个问题，在使用闭包时，内部的函数使用的是外包函数的实际变量而非copy。我们看这样的代码

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script type="text/javascript">    window.onload = function() {        var li = document.getElementsByTagName("li");        for (var i = 0; i < li.length; i++) {            li[i].onclick = function()    {                alert(i);            };        }    };</script><style>li    {    width:100px;    background-color:red;    cursor:pointer;    line-height:20px;    margin-bottom:5px;}</style></head><body>    <ul>        <li></li>        <li></li>        <li></li>    </ul></body></html>

点击每个li看看发生了什么，对，都是3.因为这是函数构造的时候绑定了i，而非是单纯的得到了i在绑定时的值。这个教训让我深刻的认识到了这个问题。也在私下找了一些相关资料，现在我们可以把js段代码修改如下

JScript code

    window.onload = function() {        var li = document.getElementsByTagName("li");        for (var i = 0; i < li.length; i++) {            li[i].onclick = function(i)    {                return function()    {                    alert(i);                };            }(i);//i作为参数传递给这个自执行函数，在绑定onclick的时候，该函数已执行，而这个函数体内部调用的就是该i的值了        }    };

在运行看看，好了，可以得到我们想要的结果了，这里勘误一下《javascript语言精粹》里第39页类似例子多了个e，大家把返回函数的参数e去掉就可以正确运行了。
因为这样修改后，onclick绑定的是一个自执行函数返回的一个函数，而这个函数绑定的是作为参数传递进来的i的值。

发这个是这段时间对该段内容的理解，由于不是很有把握，所以发在js的版块里算是抛砖引玉，希望各位大牛能够给小弟一些指导。在此谢过。

[解决办法]
匿名函数就行了
[解决办法]
学习，还是不太理解。
[解决办法]
我们都是这样隐藏的

JScript code

(function() {        var isIE = ....;    function repaint() {}    function redraw() {}        function Chart() {}    Chart.prototype = {        repaint: repaint,        redraw: redraw    };    Rs = {        version: 1.0,        Chart: Chart    };})();
[解决办法]
LZ的学习精神非常值得借鉴。。

顶起接分
[解决办法]
考虑到函数有自己的作用域，也可以这样实现：

JScript code  ...  li[i].onclick = function() {    this.value = i;    alert(this.value);  };
[解决办法]
纯接分
[解决办法]
顶起接分
[解决办法]
顶帖拿分
[解决办法]
hey，牛人我来膜拜你了，给分吧~
[解决办法]
hey，牛人我来膜拜你了，给分吧~
[解决办法]
这种讨论很有益，期待完整并进行过比较筛选的方法集合
[解决办法]
mark
[解决办法]
推荐精华贴
[解决办法]
我是直接new Function来搞，

JScript codewindow.onload = function() {        var li = document.getElementsByTagName("li");        for (var i = 0; i < li.length; i++) {            li[i].onclick =new Function("alert("+i.toString()+")");        }    };
[解决办法]
膜拜你..........
[解决办法]
受教了
[解决办法]
学习了！
[解决办法]
看来我还是菜鸟。因为本人从不隐藏
[解决办法]
呵呵，当然要数句柄类了
很厉害
[解决办法]
学习啊，哈哈

顺便 JF
[解决办法]
我来看看
[解决办法]
拜读了，还没研究
[解决办法]
高手！ 学习了！
[解决办法]
高手！看不太懂，但是学习了！
[解决办法]
学习
[解决办法]
回帖即可获得10分可用分！小技巧
[解决办法]
有必要隐藏吗???
 
 [解决办法]
学习了
[解决办法]
~~~~~~~~jF
[解决办法]
接份，楼主散粉了。
[解决办法]
学习了，谢谢LZ分享
[解决办法]
好东西！！！！！！！！！
[解决办法]
为啥不用匿名函数呢?
[解决办法]
来学习，不懂
[解决办法]
讲的真好...
[解决办法]
额....我都不隐藏的.呵呵~学习.......
[解决办法]
学习学习JS.
[解决办法]
学习了。
[解决办法]
【散分】你是如何隐藏你的变量和属性的 [JavaScript]
[解决办法]
高手~~~~~~~~~~~~~~~~~~~~
[解决办法]
jf……
[解决办法]
帮顶，接分
[解决办法]
我还是新手只能学习
[解决办法]
学习学习
[解决办法]
学习了
[解决办法]
路过下~~~~~
[解决办法]
......................up..............................
[解决办法]
变量的使用域确实很重要，试一试this函数吧。
[解决办法]
学习啦，感谢！
[解决办法]
学习~！
[解决办法]
,学习了
[解决办法]
回帖 ，得分 ，押宝去。。。
[解决办法]
学习下～～～～～～～～～～～～～～～～～
[解决办法]
顶一下···
[解决办法]
学习了，看来高人还是不少啊
[解决办法]
不错 学习了
[解决办法]

[解决办法]
学习一下

[解决办法]
..........
[解决办法]
学习！！过路的！

[解决办法]
深度．．学习
 
 [解决办法]
学习。。。。
[解决办法]
每天回帖即可获得10分可用分！
[解决办法]
每天回帖即可获得10分可用分！
[解决办法]
JScript codePerson.prototype.getName = function() {  return this.name;};Person.prototype.setName = function(name) {  if (name) {  this.name = name;  }}
[解决办法]
好东西，赚分
[解决办法]
好东西，赚分
[解决办法]
学习啊，哈哈
[解决办法]
学习了········
[解决办法]
泰丰证件.QQ996702552手机18757550100.www.0571banzheng.net
[解决办法]
接分来了！
[解决办法]
好帖，mark
[解决办法]
学习，还是不太理解。
[解决办法]
学习，还是不太理解。
[解决办法]
(function() {
  
   var isIE = ....;
   function repaint() {}
   function redraw() {}
  
   function Chart() {}

   Chart.prototype = {
       repaint: repaint,
       redraw: redraw
   };

   Rs = {
       version: 1.0,
       Chart: Chart
   };
})();

[解决办法]
是想学js但是感觉它太麻烦了
[解决办法]
好文，mark
[解决办法]
探讨

(function() {
    
    var isIE = ....;
    function repaint() {}
    function redraw() {}
    
    function Chart() {}

    Chart.prototype = {
        repaint: repaint,
        redraw: re……

[解决办法]
                    学习“我得分的问题” 精华版——顺便散分，呵呵C++ Builder / 基础类- CSDN ... VB.net与C#哪个比较好？技术、性能及发展前景！（高分呀！） .NET技术 ... 散分200----谈谈c#论坛的结帖率问题.NET技术/ C# - CSDN社区community ... 如何用隐藏域来实现session的功能呢？以使页面长期有效？ 【转】【Perl 文档中文化计划】Perl 特殊变量翻译完成。 - 其他开发语言/ 脚 ... [Python]阶乘运算之Python
[解决办法]
是不是平
[解决办法]
纯属路过。。。
[解决办法]
路过，酱油
[解决办法]
JS很强大....
[解决办法]
顶帖拿分
[解决办法]
学习！！
[解决办法]
纯接分
------解决方案--------------------  
mark.....
[解决办法]
探讨

引用:
引用:

(function() {

var isIE = ....;
function repaint() {}
function redraw() {}

function Chart() {}

Chart.prototype = {
repaint: repaint,
……

[解决办法]
又一经典的总结，值得学习！
[解决办法]
而且
// lz的代码
var p = person("jee",24,true);

// false
alert(p instanceof person);

// ls的代码
var person = new Person();
// true
alert(person instanceof Person);

哎。。。。我啥也不说了。。。
[解决办法]
学习了
[解决办法]
很像js框架里面的代码呀
不过框架一般都是这个格式
(function(){})()
不知道是什么意思，可否给我解释下
[解决办法]
路过，学习了。感谢LZ
[解决办法]
不是很明白，看看再说
[解决办法]
不是很明白，再看看。。。

热点排行