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

严格来说,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,

        //在此定义静态公有成员

        //在此定义静态私有成员的特权方法
    };
})();
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,757评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,478评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,540评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,593评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,903评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,329评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,659评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,383评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,055评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,337评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,864评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,227评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,820评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,999评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,750评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,365评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,260评论 2 258

推荐阅读更多精彩内容