本文内容

  • 背景
  • 把我们的对象放在一起
    • 添加一个私有(Private)的属性
    • 添加一个特权(Privileged)的方法
    • 添加一个公共(Public)的属性和方法
    • 添加一个静态(Static)的属性
    • 我们自己的完整对象
    • 创建一个实例对象并检查可访问性
  • 结论

其实,写 JavaScript 代码可以不用“面向对象”的方式,这不是必需的,但多年的工程实践表明,面向对象的确很好地解决问题了,代码变得更优雅(更通用,更容易扩展和维护),虽然 JavaScript 不支持面向对象,但可以模拟它。因此,开发人员们就想,既然面向对象还不错,那就尝试把之前在面向对象中取得经验和成就应用到 JavaScript 的代码上。促使开发人员这么想也这么干,也是出于现实考虑,不得已而为之,随着项目中的 JavaScript 代码越来越庞大,如每个页面有 10 万行代码很常见,而 gmail 有 44.3 万行,不设计、不规划一下是不行了。为了达到这个目的,你需要先知道 JavaScript 的东西很多,比如,作用域、作用域链、闭包、对象、实例对象、继承等等,并把 JavaScript 和面向对象编程对应起来,特别是对于像我,之前用其他语言从事面向对象开发的人来说。

如果你了解 JavaScript 的继承——如何和为什么,以及 JavaScript 的作用域和闭包,那么,我们就可以把这些知识结合在一起,讨论 JavaScript 对象的私有(private)、特权(privileged)、公共(public )和静态(static )成员(属性和方法)JavaScript中的对象。

 

背景


对于来自面向对象背景的开发人员来说,定义和使用这些成员对所有代码来说都是关键。但对使用 JavaScript 的人来说,也许不需要这样,可如果你知道如何将“面向对象”应用到 JavaScript 上,会使你的代码更通用。

 

把我们的对象放在一起


我们将把讨论的内容放在构造函数对象里,然后你通过 new 关键字创建一个新的实例对象。让我们先从一个空的对象开始:

        // Constructor
        function Kid(name) {
            // Empty, for now
        }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

现在,你可以用如下方式创建很多 Kid  实例对象:

        var kenny = new Kid("Kenny");

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

添加一个私有(Private)的属性

在我们学习 JavaScript 作用域和闭包中,函数内声明的一个变量只能在函数内可用(这是局部变量)。因此,如果我们想 kid 对象有一个私有(private)属性,我们可以这样做:

        // Constructor
        function Kid(name) {
            // Private
            var idol = "Paris Hilton";
        }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

idol 属性将只对 Kid  函数/对象内可用。注意:idol  属性前边的 var 关键字。

添加一个特权(Privileged)的方法

特权(privileged)方法是一种能够访问私有(private)属性的方法,而同时向外面公开它自己(在 JavaScript 中,也由于 JavaScript 作用域和闭包)。你可以删除或替换一个特权方法,但你不能改变它的内容。如特权方法返回一个私有属性的值:

        // Constructor
        function Kid(name) {
            // Private
            var idol = "Paris Hilton";
 
            // Privileged
            this.getIdol = function () {
                return idol;
            };
        }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

添加一个公共(Public)的属性和方法

现在,我们有了私有属性,和从外边访问它的特权方法,让我们来看看很基本的公共属性和公共方法:

        // Constructor
        function Kid(name) {
            // Public
            this.name = name;
            this.getName = function () {
                return this.name;
            };
        }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

公共属性对任何调用都是可用的,像 getName 方法。

但是,正如在下面代码提到的,与其他类型相比,公共方法的推荐方式是使用原型(prototype)方法,修改上面代码后,例如:

        // Constructor
        function Kid(name) {
            // Public
            this.name = name;
        }
        Kid.prototype.getName = function () {
            return this.name;
        };

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

添加一个静态(Static)的属性

静态成员被所有的实例对象和它自己所共享(即 Kid 对象),静态成员只存储在一个地方。这意味着,它的值不会被继承到其下面的实例对象:

        // Constructor
        function Kid(name) {
            // Constructor code
        }
 
        // Static property
        Kid.town = "South Park";

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

我们自己的完整对象

在我们尝试访问对象的属性和方法前,看一下这个完整的对象:

        // Constructor
        function Kid(name) {
            // Private
            var idol = "Paris Hilton";
 
            // Privileged
            this.getIdol = function () {
                return idol;
            };
 
            // Public
            this.name = name;
        }
 
        // Public
        Kid.prototype.getName = function () {
            return this.name;
        };
 
        // Static property
        Kid.town = "South Park";

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

创建一个实例对象并检查可访问性


现在是测试这些不同方法在实际中是如何工作的了。我们先创建一个 Kid 实例对象,然后,测试我们得到什么不同值。测试机器结果如下所示:

        // Create a new instance
        var cartman = new Kid("Cartman");
 
        // Access private property
        cartman.idol; // undefined
 
        // Access privileged method
        cartman.getIdol(); // "Paris Hilton"
 
        // Access public property
        cartman.name; // "Cartman"
 
        // Access public method
        cartman.getName(); // "Cartman"
 
        // Access static property on an instance
        cartman.town; // undefined
 
        // Access static property on the constructor object
        Kid.town; // "South Park"

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

结论


当涉及对象和其成员的时候,希望你用适当的方式去选择。另外,对于之前用其他语言从事面向对象编程的 JavaScript 新手,已经回答了你可能的问题。

 

下载 Demo

JavaScript:如何获得 Private、Privileged、Public 和 Static 成员(属性和方法)【翻译+整理】的更多相关文章

  1. javascript 构造函数类和原型 prototyp e定义的属性和方法的区别

    1.把方法写在原型中比写在构造函数中消耗的内存更小,因为在内存中一个类的原型只有一个,写在原型中的行为可以被所有实例共享,实例化的时候并不会在实例的内存中再复制一份而写在类中的方法,实例化的时候会在每 ...

  2. 转: javascript动态添加、修改、删除对象的属性和方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  3. javascript动态添加、修改、删除对象的属性与方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  4. javascript——对象的概念——函数 1 (函数对象的属性和方法)

    一.创建函数 函数是一种对象:Function类 是对象,可以通过 Function 实例化一个函数,不过最多的还是利用 function 来创建函数. 方式一:利用 Function类 来实例化函数 ...

  5. javascript中对象的每个实例都具有的属性和方法

  6. PHP中private、public、protected的区别详解

    先简单粗俗的描述下:public 表示全局,类内部外部子类都可以访问:private表示私有的,只有本类内部可以使用:protected表示受保护的,只有本类或子类或父类中可以访问: 再啰嗦的解释下: ...

  7. JavaScript基础对象创建模式之私有属性和方法(024)

    JavaScript没有特殊的语法来表示对象的私有属性和方法,默认的情况下,所有的属性和方法都是公有的.如下面用字面声明的对象: var myobj = { myprop: 1, getProp: f ...

  8. static 关键字详解 static方法调用非static属性和方法

    静态的属性和方法在内存中的存放地址与非静态的是不同的,静态的是存放在static区,它意味着静态方法是没有this的,所以我们不可以从一个static方法内部发出对非static方法的调用.但是反之是 ...

  9. java基础64 JavaScript中的Arrays数组对象和prototype原型属性(网页知识)

    1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...

随机推荐

  1. Leetcode 234 Palindrome Linked List 复杂度为时间O(n) 和空间(1)解法

    1. 问题描写叙述 给定一个单链表,推断其内容是不是回文类型. 比如1–>2–>3–>2–>1.时间和空间复杂都尽量低. 2. 方法与思路 1)比較朴素的算法. 因为给定的数据 ...

  2. 用DELPHI 开发压缩、解压、自解压、加密

    引 言:在日常中,我们一定使用过WINZIP.WINRAR这样的出名的压缩软件,就是我们开发软件过程中不免要遇到数据加密.数据压缩的问题!本文中就这一技术问题展开探讨,同时感谢各位网友的技巧,在我每次 ...

  3. 奇怪的问题,疑惑?不用的 User agent 居然gzip不一样?

    问题描述: 使用同一款浏览器(Chrome Version 41.0.2272.118 (64-bit)),访问同一个地址:http://www.skhktown.com/hkcity/resourc ...

  4. C#编程(七十四)----------释放非托管资源

    释放非托管资源 在介绍释放非托管资源的时候,我觉得有必要先来认识一下啥叫非托管资源,既然有非托管资源,肯定有托管资源. 托管资源指的是.net可以自棕进行回收的资源,主要是指托管堆上分配的内存资源.托 ...

  5. yii开发第一部分之执行流程

    一 目录文件 |-framework 框架核心库 |--base 底层类库文件夹,包含CApplication(应用类,负责全局的用户请求处理,它管理的应用组件集,将提供特定功能给整个应用程序),CC ...

  6. java 解压zip java.lang.IllegalArgumentException: MALFORMED 错误

    ava.lang.IllegalArgumentException: MALFORMED at java.util.zip.ZipCoder.toString(Unknown Source) at j ...

  7. 大西洋帝国第一季/全集Boardwalk Empire1迅雷下载

    大西洋帝国 第一季 Boardwalk Empire Season 1 (2010) 本季看点:1920年,联邦政府颁布禁酒令后,公开售卖酒类商品成为一种违法行为.在新泽西州的西南部的大西洋城没有任何 ...

  8. 利用Visual Studio 2013 开发微软云Windows Azure配置指南(针对中国大陆)

    微软云在中国是由“世纪互联”营运的,所以如果你用Visual Stuido 2003全通通用账户开发微软云,会有问题,这是他的不方便支持.好处是,因为是在大陆营运,所以速度比较快. (1)打开官网 h ...

  9. [转]应用RSACryptoServiceProvider类轻松实现RSA算法

    在我们现实当中经常会存在需要对某些数据进行加密保护 然后进行解密的操作,比方,我们需要对某些XML配置信息里面的某些数据进行加密,以防止任何人打开该XML配置信息都能正常的看到该配置信息里面的内容,从 ...

  10. Java学习笔记——IO操作之以图片地址下载图片

    以图片地址下载图片 读取给定图片文件的内容,用FileInputStream public static byte[] mReaderPicture(String filePath) { byte[] ...