美文网首页
在JavaScript中如何理解类成员的公(私)有性和(非)静态

在JavaScript中如何理解类成员的公(私)有性和(非)静态

作者: 阿尔卑斯的隆冬 | 来源:发表于2018-09-09 11:39 被阅读12次

    严格来说,JavaScript中并没有类的概念,因此也就不存在说类的成员(变量或方法),更谈不上类成员的公(私)有性和(非)静态性。

    但是,JavaScript却和C++及Java一样,都是一门面向对象的程序语言。既然如此,在C++和Java语言中都存在的类,一定也在JavaScript中具有相应的实现机制,否则面向对象就无从谈起了。

    那么,我们姑且将JavaScript与C++和Java一视同仁,认为JavaScript具有类的概念,只是创建的方式不如在C++和Java中那样直接(如可在JavaScript中通过构造函数创建自定义类型)。这样一来,我们就可以在此基础上讨论JavaScript是如何实现类的公有成员私有成员静态成员等这些概念的了。

    首先需要明确类成员的公(私)有性和(非)静态性究竟是在指什么:类的成员根据访问和保存方式的不同,可以分为:非静态私有成员非静态公有成员静态私有成员静态公有成员。其中“静态”是指类的成员变量或方法属于类本身而不属于某个对象实例,换句话说就是针对这些变量或方法而言,通过类创建出的各个对象实例引用的都是同一个副本;而非静态成员则正好相反,指的是每个对象实例中都保存着属于对象自身的同名变量或方法,通过对象实例去操作这些成员时,不会影响其它对象实例中的相应成员。"私有"是指对象实例中的成员变量或方法只能通过特定的公共接口供外部访问,而无法通过操作对象本身直接获取;而公有成员则无此限制。

    讲清楚了概念,那么我们来看看在JavaScript中都是如何实现这四种类型成员的:

    一、非静态公有成员

    非静态公有成员,需要满足:

    • 成员在各个对象实例中都有自己的副本。
    • 可以通过对象直接访问到成员(如object.name)。

    为此,使用构造函数 + this对象进行实现:

    function Person(name) {
        //非静态公有成员属性(变量)
        this.name = name;
        //非静态公有成员方法(函数)
        this.getName = function() {
            alert(this.name);
        };
    }
    
    var person1 = new Person("Jess");
    var person2 = new Person("Alex");
    
    person1.getName();          //"Jess"
    person2.getName();          //"Alex"
    
    person1.name = "Max";
    
    person1.getName();          //"Max"
    person2.getName();          //"Alex"
    
    alert(person1.getName == person2.getName);    //false
    

    二、静态公有成员

    静态公有成员,具有以下特点:

    • 成员在各个对象实例中均不含有属于自己的副本,各实例都引用同一个成员。
    • 可以通过对象直接访问到成员。

    为此,使用构造函数的原型进行实现:

    function Person() {}
    
    //静态公有成员属性(变量)
    Person.prototype.colors = ["red","blue","green"];
    //静态公有成员方法(函数)
    Person.prototype.getColors = function() {
        alert(this.colors);
    };
    
    
    var person1 = new Person();     
    var person2 = new Person();
    
    person1.getColors();        //"red,blue,green"
    person2.getColors();        //"red,blue,green"
    
    person1.colors.push("pink");
    
    person1.getColors();        //"red,blue,green,pink"
    person2.getColors();        //"red,blue,green,pink"
    
    alert(person1.getColors == person2.getColors);    //true
    

    三、非静态私有成员

    非静态私有成员,具有以下特点:

    • 成员在各个对象实例中都有自己的副本。
    • 不能通过对象直接访问成员,需要利用访问接口(特权方法)

    为此,使用构造函数 + 闭包进行实现:

    function Person(colors) {
        //colors:非静态私有成员属性(变量)- 作为构造函数参数实现
    
        //非静态私有成员方法(函数)- 使用函数声明的方式定义可以获得函数声明提升
        function privateFunc() {
            return "privateFunc";
        }
    
        //访问接口(特权方法)- 注意:对于非静态私有成员,不能利用原型实现访问接口
        this.getColors = function() {
            alert(colors);
        };
    
        this.addColors = function(color) {
            colors.push(color);
        };
    
        this.getPrivateFunc = function() {
            alert(privateFunc());
            return privateFunc;
        };
    }
    
    
    var person1 = new Person(["green","blue","red"]);       
    var person2 = new Person(["red","blue","green"]);
    
    alert(person1.colors);          //undefined
    alert(person1.privateFunc());   //error
    
    person1.getPrivateFunc();       //"privateFunc"
    
    person1.getColors();            //"green,blue,red"
    person2.getColors();            //"red,blue,green"
    
    person1.addColors("yellow");
    
    person1.getColors();            //"green,blue,red,yellow"
    person2.getColors();            //"red,blue,green"
    
    alert(person1.getPrivateFunc() == person2.getPrivateFunc());    //false
    

    四、静态私有成员

    静态私有成员,具有以下特点:

    • 成员在各个对象实例中均不含有属于自己的副本,各实例都引用同一个成员。
    • 不能通过对象直接访问成员,需要利用访问接口(特权方法)

    为此,使用外部私有作用域 + 闭包实现:

    (function() {
    
        //静态私有成员属性(变量)
        var colors = ["red","green","blue"];
        
        //静态私有成员方法(函数)
        function staticPrivateFunc() {
            return "staticPrivateFunc";
        }
    
        //定义全局的构造函数(采用函数表达式的方式)
        Person = function() {};
    
        //利用原型定义公共接口(特权方法)
        Person.prototype = {
            constructor : Person,
    
            getColors : function() {
                alert(colors);
            },
    
            addColors : function(color) {
                colors.push(color);
            },
    
            getStaticPrivateFunc : function() {
                return staticPrivateFunc;
            }
        };
    
    })();
    
    
    var person1 = new Person();     
    var person2 = new Person();
    
    alert(person1.colors);                      //undefined
    alert(person1.staticPrivateFunc());         //error
    
    alert(person1.getStaticPrivateFunc()());    //"staticPrivateFunc"
    
    person1.getColors();                        //"red,green,blue"
    person2.getColors();                        //"red,green,blue"
    
    person1.addColors("yellow");
    
    person1.getColors();                        //"red,green,blue,yellow"
    person2.getColors();                        //"red,green,blue,yellow"
    
    alert(person1.getStaticPrivateFunc() == person2.getStaticPrivateFunc());    //true
    

    组合使用各类型成员的定义方式

    一般在定义类时,最常见的情况是非静态公有成员属性搭配静态公有成员方法,为此可以使用如下方案:

    function Person(name) {
        //非静态公有成员属性
        this.name = name;
    }
    
    //静态公有成员方法
    Person.prototype.sayName = function() {
        alert(this.name);
    };
    

    同样较为常见的类定义方式也有非静态私有成员属性搭配静态公有成员方法,为此使用如下方案:

    function Person(name) {
        //name:非静态私有成员属性
    
        //访问接口(特权函数)
        this.getName = function() {
            return name;
        };
    
        this.setName = function(value) {
            name = value;
        };
    }
    
    //静态公有成员方法
    Person.prototype.sayHi = function() {
        alert("Hi");
    };
    

    然而作为最通用的类定义方式,我们甚至可以构建一个模板,这样今后每当需要定义特定类型的成员时,只需在相应区域添加即可:

    (function() {
        //在此通过var定义静态私有成员
    
        //构造函数(全局)
        MyType = function() {
            //在此通过this定义非静态公有成员
            
            //在此通过var定义非静态私有成员
    
            //在此通过this定义非静态私有成员的特权方法
    
        };
    
        //原型
        MyType.prototype = {
            constructor : MyType,
    
            //在此定义静态公有成员
    
            //在此定义静态私有成员的特权方法
        };
    })();
    

    相关文章

      网友评论

          本文标题:在JavaScript中如何理解类成员的公(私)有性和(非)静态

          本文链接:https://www.haomeiwen.com/subject/srflgftx.html