关于javascript中原型方法访问私有变量的探索

　　今天闲来无事，突然想到一个关于javascript中原型方法访问私有变量的问题，代码示例如下：

    function Person() {
        var name ;
        var age ;

        this.setName = function(newName) {
            name = newName ;
        };

        this.getName = function() {
            return name ;
        };

        this.setAge = function(newAge) {
            age = newAge ;
        };

        this.getAge = function() {
            return age ;
        };
    }

 

　　上面的代码声明了一个叫做Person的构造函数，在构造函数中会为每个实例化的对象提供四个公有方法，分别是setName、getName、setAge和getAge。这四个方法通过js的闭包机制来访问和修改局部变量name和age，同时由于函数作用域的问题，name和age这两个局部变量在构造函数外是不可见的，也就是说只有这四个函数能够访问到这两个局部变量，我们将这两个变量称为私有变量。

　　为了进一步弄清楚这四个实例方法的作用，我写了如下的测试代码：

　　 var zhaojian = new Person() ;
    zhaojian.setName("zhaojian") ;
    console.log("The name of zhaojian is " + zhaojian.getName()) ;  //这一步输出zhaojian

    var epson= new Person() ;
    epson.setName("epson") ;
    console.log("The name of epson is " + epson.getName()) ;    　　 //这一步输出epson
    console.log("The name of zhaojian is " + zhaojian.getName()) ;  //这一步输出zhaojian


    zhaojian.setAge(18) ;
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;    //这一步输出18
    epson.setAge(28) ;
    console.log("The age of epson is " + epson.getAge()) ;          //这一步输出28
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;    //这一步输出18

 

　　由此可见，每一次调用构造函数实例化对象的时候都会生成一个闭包，每个闭包中都含有两个局部的私有变量name和age，因此每个对象实例的私有变量name和age都是不相同的。

　　但是问题来了，如果我把其中的两个实例方法改成原型方法，那会出现什么情况呢？如下所示：

　　function Person() {
        var name ;
        var age ;

        Person.prototype.setName = function(newName) {
            name = newName ;
        };

        Person.prototype.getName = function() {
            return name ;
        };
        
        this.setAge = function(newAge) {
            age = newAge ;
        };

        this.getAge = function() {
            return age ;
        };
    }    

 

　　继续对上述代码调用之前的测试代码，得到结果如下：

　　 var zhaojian = new Person() ;
    zhaojian.setName("zhaojian") ;
    console.log("The name of zhaojian is " + zhaojian.getName()) ; //这一步输出zhaojian

    var epson= new Person() ;
    epson.setName("epson") ;
    console.log("The name of epson is " + epson.getName()) ;    　 //这一步输出epson
    console.log("The name of zhaojian is " + zhaojian.getName()) ; //注意，这一步现在输出的是epson


    zhaojian.setAge(18) ;
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;   //这一步输出18
    epson.setAge(28) ;
    console.log("The age of epson is " + epson.getAge()) ;         //这一步输出28
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;   //这一步还是输出18

 

　　问题来了，如果去掉上述代码中的epson.setName("epson");一句，结果会发生什么改变呢？

　　 var zhaojian = new Person() ;
    zhaojian.setName("zhaojian") ;
    console.log("The name of zhaojian is " + zhaojian.getName()) ;  //这一步输出zhaojian

    var epson= new Person() ;
    //epson.setName("epson") ;
    console.log("The name of epson is " + epson.getName()) ;        //这一步输出undefined
    console.log("The name of zhaojian is " + zhaojian.getName()) ;  //这一步输出undefined


    zhaojian.setAge(18) ;
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;    //这一步输出18
    epson.setAge(28) ;
    console.log("The age of epson is " + epson.getAge()) ;          //这一步输出28
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;    //这一步还是输出18

　　对象zhaojian和epson的getName函数返回的都是undefined，可是zhaojian之前确实是有调用过setName方法设置过name变量的值的啊，怎么就变成了undefined？为了弄清疑问，再加上一句测试代码看看:

　　 var zhaojian = new Person() ;
    zhaojian.setName("zhaojian") ;
    console.log("The name of zhaojian is " + zhaojian.getName()) ;  //这一步输出zhaojian

    var epson= new Person() ;
    //epson.setName("epson") ;
    zhaojian.setName("aaa") ;
    console.log("The name of epson is " + epson.getName()) ;        //这一步输出aaa
    console.log("The name of zhaojian is " + zhaojian.getName()) ;  //这一步输出aaa


    zhaojian.setAge(18) ;
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;    //这一步输出18
    epson.setAge(28) ;
    console.log("The age of epson is " + epson.getAge()) ;          //这一步输出28
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;    //这一步还是输出18

　　诡异的现象出现了，调用epson对象的setName方法能够影响到zhaojian对象的name变量，调用zhaojian对象的setName方法同样也能够影响到zhaojian对象的name变量，但是两个对象的age变量之间却是井水不犯河水，相处得非常和谐，这是为什么呢？

　　这里涉及到实例方法、原型方法和函数作用域的问题，我们知道实例方法会被每一个实例化的对象复制一份，即每个实例化后的对象都拥有一份独立的实例方法的代码体。而原型方法则是在对象的原型对象(prototype)上，原型方法的代码体只有一份，且为所有的对象实例所共享。因此在调用方法的时候，每个对象引用的都是不同的实例方法，而所有对象引用的都是同一个原型方法。至于函数作用域，在javascript中的函数作用域指的是函数的声明域而不是调用域，因此原型方法setName和getName引用的都是在其被声明的作用域内的name变量。那么如果有实例化多个对象的话，setName引用的是哪一个闭包中的name变量呢？对构造函数Person进行分析，我们可以进行猜测，每一次调用构造函数都会声明一次setName方法，也就是说每调用一次构造函数setName方法的声明域都会发生改变，且setName方法的声明域始终是在最后一次调用构造函数所形成的闭包之中，因此所有的对象实例在调用setName方法时引用的都是最后被实例化的对象的name变量。为了验证以上的猜测，我们给Person类增加一个getSelfName实例方法，如下所示：

    this.getSelfName = function() {
            return name ;
    };

　　该实例方法返回的是当前对象的name变量，于是对测试代码再做一点修改，来验证我们的想法：

　　 var zhaojian = new Person() ;
    zhaojian.setName("zhaojian") ;
    console.log("The name of zhaojian is " + zhaojian.getName()) ;  //这一步输出zhaojian

    var epson= new Person() ;
    //epson.setName("epson") ;
    zhaojian.setName("aaa") ;
    console.log("The name of zhaojian itself is " + zhaojian.getSelfName() ) ;//输出zhaojian
    console.log("The name of epson is " + epson.getName()) ;        //输出aaa
    console.log("The name of zhaojian is " + zhaojian.getName()) ;  //输出aaa
    console.log("The name of epson itself is " + epson.getSelfName()) ;//输出aaa

    zhaojian.setAge(18) ;
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;    //输出18
    epson.setAge(28) ;
    console.log("The age of epson is " + epson.getAge()) ;          //输出28
    console.log("The age of zhaojian is " + zhaojian.getAge()) ;    //输出18

　　由此可见，在zhaojian对象调用了setName方法之后，epson对象的name变量被改变成了aaa，但是zhaojian对象的name变量的值还是zhaojian。因此原型方法setName所引用的是epson对象的name变量，而zhaojian对象的name变量在epson对象被实例化之后就被setName方法弃之不顾了，原型方法setName和getName所引用的始终都是最后一个被构造函数Person实例化的对象的name变量。上述的猜测是正确的，大功告成。