JavaScript实现类的private、protected、public、static以及继承

最新推荐文章于 2024-05-25 14:52:38 发布
最新推荐文章于 2024-05-25 14:52:38 发布
阅读量798 收藏
点赞数
分类专栏： javascript/ajax 文章标签： JavaScript实现类 JavaScript class的关系

基础知识

JavaScript中的类

JavaScript实际上是一种弱类型语言，与C++和Java等语言不同。因此，在JavaScript中，没有强调类（class）这一概念，但实际运用中，类还是很重要的，比如写一款游戏，如果我们不停地调用函数来完成创建角色，移动角色的话，那会是什么样的呢？可能会出现非常多的重复代码，因此我们需要一个类来统一这些代码。所谓的类，就是把程序中的代码分类，比如说游戏中的关于角色的代码算作一类，游戏背景算作一类，游戏特效又是一类。这样一来，我们对类进行操作，就不会使代码显得很凌乱，冗杂。虽然Js是弱类型语言，但是也提供了类这一概率。 
定义Js中的类，实际上用的是function，总所周知，这个语法其实是用来定义函数的。不用于定义函数的是，我们可以在function中通过this.xxx的方式来定义属性和方法。比如说：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">People</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Yorhom"</span>;

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.getName = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name
    };
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

使用的时候使用new：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> yorhom = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> People();
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// "Yorhom"</span>
alert(yorhom.getName());</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

可以看到，这样就可以使用到我们定义的类和类中的方法了。 
也许你会问this.xxx只能定义公有属性和方法，那私有属性和方法怎么办呢？这个可以用到js闭包的知识来解决：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">People</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Yorhom"</span>;

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> age = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>;

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.getName = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name
    };

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.getAge = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> age;
    };
}

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> yorhom = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> People();
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// undefined</span>
alert(yorhom.age);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 16</span>
alert(yorhom.getAge());</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

可以看到，这里的age就是一个私有属性了。

JavaScript中的prototype

上面的代码美中不足的地方就是，如果一个类有很多方法，同时用到这个类的地方又有很多（也就是new出来的对象有很多），那么用上面的代码就会出现内存占用过剩的问题。问题的根本原因在于，每次实例化一个对象，这个类就会执行构造器里的代码（以People类为例就是function People () {…}执行的代码），因此每当这个类被实例化的时候，这些方法和属性就会被拷贝到实例化出来的对象中。这样一来，就会造成“吃”内存的现象。 
于是js中的prototype就诞生了。prototype的作用通常是给一个类添加一系列常量或者方法。 每当一个类被实例化之后，实例化出来的对象会自动获取类的prototype中定义的方法和属性。只不过这里的获取类似于C++里面的引用，不会在内存里对这些方法和属性进行复制，而是指向这些方法和属性。示例：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">People</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Yorhom"</span>;
}

People.prototype.getName = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name;
};

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> yorhom = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> People();
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// "Yorhom"</span>
alert(yorhom.getName());</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

这种方法虽然可以节约内存，但是，美中不足的是，无法定义私有属性。

类的继承

Javascript没有提供继承的函数，所以只有自己写了。这里借用lufylegend.js中的继承方法向大家展示如何实现继承：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">base</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(d, b, a)</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> p = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>, o = d.constructor.prototype, h = {};

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (p <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> o) {
        h[p] = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;
    }
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (p <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">in</span> b.prototype) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!h[p]) {
            o[p] = b.prototype[p];
        }
    }

    b.apply(d, a);
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

这里的base就是继承函数了。继承函数的原理莫过于复制类的方法和属性。因此，只要做到这点，就可以实现类的继承了。可以在上面的代码中看见，我们通过遍历prototype来获取原型链中定义的方法和属性。通过apply调用父类的构造器进行构造器中属性和方法的复制。使用示例：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">People</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Yorhom"</span>;
}

People.prototype.getName = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name;
};

<span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">Student</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    base(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, People, []);
}

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> yorhom = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Student();
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// "Yorhom"</span>
alert(yorhom.getName());</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

静态属性和方法的定义

静态属性和方法以及静态类在js中的定义非常简单，先来看静态类：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> StaticClass = {};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

这么写不是在定义一个Object吗？是的，不错，不过js中的静态类也是可以这样定义的。如果要添加静态类中的方法和属性，就可以这么写：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> StaticClass = {
    id : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>,
    sayHello : <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
        alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Hello"</span>); 
    }
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

如果是要向类中添加静态属性或者方法，可以采用这种写法：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">People</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Yorhom"</span>;
}

People.prototype.getName = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.name;
};

People.TYPE = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"people"</span>;
People.sayHello = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Hello"</span>);
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

实现一个功能丰富的类

我们在上文中提到了，节省内存和定义私有属性两者无法兼得，是啊，和“鱼和熊掌不可兼得”是一个道理，在通常的使用过程中，我们需要对这两项进行取舍。但是现在这个年代，哪有不可兼得的呢？鱼和熊掌不能同时吃？当然不行……因为吃熊掌是违法的（有待考证）？不过至少鸡和鱼是可以同时吃的吧。 
由于js没有实现私有属性的定义，所以这其实是一个没有头绪的工作，因为在标准的做法中，我们除了闭包可以阻止外部访问，没有别的办法了。所以这里我们要用点歪门邪道的方法了。

JavaScript Set/Get访问器

什么是set/get访问器呢？如果你熟悉python，那么你可以理解为@property和@xxx.setter，但是简陋的js里也有？当然有，只不过是ES5的标准，可以采用这种写法：

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">Object</span>.defineProperty(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"name"</span>, {
    get : funtion () {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> name;
    },

    set : <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(v)</span> {</span>
        name = v;
    }
});</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

具体有什么用呢？大致就是this.name属性在被获取的时候调用get访问器，在被更改值的时候调用set。 
你可以从上面的代码了解大致的写法，不过如果你想深究，可以参考这篇文章：http://blog.csdn.net/teajs/article/details/22738851

注意以上的这种用法会有兼容性问题，浏览器支持情况如下：

PC端

Firefox Google Chrome Internet Explorer Opera Safari
4.0 5 9 11.6 5.1

移动端

Firefox Mobile Android IE Mobile Opera Mobile Safari Mobile
4.0 Yes 9 11.5 Yes

来自： https://developer.mozilla.org/…/defineProperty#Browser_compatibility

如何“歪门邪道”地做到禁止访问私有和保护属性？

这是个比较头疼的问题，正如本节开篇所说，我们在常规开发下，只能通过闭包来阻止某变量的访问。可是如果你使用了prototype，那么闭包这条路就走不通了。在这种情况下，我们的Object.defineProperty就出场了。我们知道，通过这个函数可以设定获取属性时返回的值，也可以设定更改属性时设置的值。有了这个函数，我们可以随时跟踪到某个属性是不是在被获取，或者是不是在被更改。我们还需要一个开关，我们在类内部的方法调用时，把这个开关打开，表明是在内部运行，方法调用结束后将开关关闭，表明回到外部运行状态。有了这两个状态，我们就可以跟踪private和protected属性和方法了，一旦他们在开关关闭的时候被使用，就终止这个属性或方法的获取或设置。 
于是乎，大难题就快解决了。

开源库件jpp.js

秉着这个歪门邪道的思想，我把这个功能封装到jpp.js这个库件中，库件的github地址如下： 
https://github.com/yuehaowang/jpp.js 
当然这个库件不限于创建一个类，还可以实现函数的重载等。目前库件还处于开发阶段，欢迎各位提交建议。

使用jpp.js创建一个类

<code class="hljs actionscript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> People = jpp.<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span>({
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> : {
        id : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,
        hobby : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>
    },
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">protected</span> : {
        money : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,
        phoneNumber : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>
    },
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> : {
        firstName : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,
        lastName : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,
        age : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,
        birthday : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,
        occupation : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>,

        constructor : <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(name, id)</span> {</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (name) {
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> nameArray = name.split(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">" "</span>);

                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.firstName = nameArray[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.lastName = nameArray[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>];
            }

            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (id) {
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.id = id;
            }
        },

        setBirthday : <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(date)</span> {</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (date) {
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.birthday = date;
            }
        },

        getBirthday : <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.birthday;
        },

        askForId : <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.id;
        },

        findHobby : <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.hobby;
        }
    },
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> : {
        OCCUPATION_PROGRAMMER : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"programmer"</span>,
        OCCUPATION_ARTIST : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"artist"</span>,
        OCCUPATION_MUSICIAN : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"musician"</span>,
        OCCUPATION_STUDENT : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"student"</span>
    }
});

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> peter = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> People(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Peter Wong"</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">543232123565</span>);
peter.occupation = People.OCCUPATION_PROGRAMMER;

peter.setBirthday(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"19980727"</span>);

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// result: Peter</span>
alert(peter.firstName);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// result: 19990727</span>
alert(peter.getBirthday());
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// result: 51092028</span>
alert(peter.askForId());
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// result: null</span>
alert(peter.findHobby());
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// result: programmer</span>
alert(peter.occupation);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// error</span>
alert(peter.id);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li></ul>

对上面的代码进行分析： 
使用jpp.class函数创建一个类，函数的参数是一个Object，这个Object可添加的属性如下：

  • extends 继承时的父类
  • private 装载私有属性，里面定义的成员外部不可使用且不能继承给子类
  • protected 装载保护属性，里面定义的成员外部不可使用但可以继承给子类
  • public 装载公有属性
  • static 装载静态方法和属性

在创建类的过程中，在public中添加constructor方法初始化构造器，this.super可访问父类构造器。

运行代码，可以看到浏览器正常运行前5个alert，而最后一个运行的时候浏览器报错：

具体的实现过程有点复杂，不过原理在上文已经详细讲述了。代码可以在github里参看，欢迎各位研究。

xinyuan_java
关注
专栏目录
JS中的public和private对象,即static修饰符
10-28
先看下面的例子,它将告诉我们在JS世界中也有C#里的public , private ,及static等
#和private有什么区别？
最新发布
闻人放歌的三寸青草园圃
07-23 246
【代码】#和private有什么区别？
深入剖析JS类的static,public,private,protected
热门推荐
架构师的成长之路
11-30 2万+
在ES6中，我们的javascript也有了类，那么，JS中的类有没有static,public,private,protected这些关键字呢，又是怎么样的呢，本文主要带你探讨JS类中的static,public,private,protected这些关键字的使用。 static 类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这...
JavaScript Class(类) 中的 Private(私有) 和 Public(公有) 属性
web前端开发
01-02 8235
英文原文 | https://tylermcginnis.com/javascript-private-and-public-class-fields/在 《JavaSc...
JavaScript实现类的private、public
99的博客
04-01 6302
定义Js中的类，实际上用的是function，这个语法其实是用来定义函数的。不同于定义函数的是，我们可以在function中通过this.xxx的方式来定义属性和方法。 this.xxx只能定义公有属性和方法，那私有属性和方法怎么办呢？这个可以用到js闭包的知识来解决 对象可以由初始化对象的方法 -- 构造函数产生。构造函数提供在其他编程语言中类提供的特性，包括静态变量和方法。
Js~实现public和private对象,即static修饰符
weixin_33887443的博客
12-06 297
先看下面的例子,它将告诉我们在JS世界中也有C#里的public , private ,及static等 //重新封装document对象 var Console={ Write:function(msg){alert(msg);} }; //Person对象 var Person={ _name:"zzl", //static public _ag...
JavaScript：JavaScript类
02-24
JavaScript类提供了`public`（默认）、`private`和`protected`三种访问控制符，但需要注意的是，JavaScript的私有属性和方法实际上是通过闭包实现的，而不是像其他一些语言那样在语法层面上支持。 7. **类表达式**...
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
10-28
在这个例子中，Person类继承自Animal类。 2. initialize: 这是一个构造函数，用于在创建类的实例时初始化成员。例如，在这个例子中，Person类的构造函数接受两个参数name和sex，并将它们分别赋值给实例属性name和...
js代码-JavaScript 类
07-16
JavaScript类没有像Java或C#那样的严格访问修饰符（public, private, protected），但有一些约定俗成的做法。通常，类的方法默认对外可见，而以`_`开头的成员被视为私有（非正式私有，仅限内部使用）。为了实现真正...
js面向对象系列二之private-protected-public
crq131290x的博客
10-31 900
先看看private-protected-public是个神马玩意 public：public表明该数据成员、成员函数是对所有用户开放的，所有用户都可以直接进行调用 private：private表示私有，私有的意思就是除了class自己之外，任何人都不可以直接使用，私有财产神圣不可侵犯嘛，即便是子女，朋友，都不可以使用。 protected：protected对于子女、朋友来说，就是publi...
【JS public、private、protected 不知道怎么区分？】
鸭绒的博客
04-18 650
这意味着不能在类的实例化对象中直接访问该属性或方法，也不能通过类的实例化对象的引用访问。这意味着可以在类的实例化对象中直接访问该属性或方法，也可以通过子类的实例化对象的引用访问。受保护的属性和方法通常用于定义类的内部状态，只允许类的子类访问。在前端开发中，public、private和protected是一些关键字，用于定义类中的属性和方法的访问权限。这意味着可以在类的实例化对象中直接访问该属性或方法，也可以通过类的实例化对象的引用访问。public：public是默认的访问修饰符，表示属性或方法可以在。
javascript中类的public,protected,private详解
weixin_54345600的博客
08-05 4605
类???????? START???????? 01 - PUBLIC???????? 02 - PROTECTED???????? 03 - PRIVATEHAPPY???????????? ???????? START 在我们 javascript ES5 之前要想进行继承，封装，多态性，得使用到我们的原型，原型链来使用面向对象的过程，但是 ES6 之后新增了一个 class 语法，可以看做是 “语法糖”，实质还是运用了 ES5 的原型，和原型链进行实现的。 ???????? 01 - PUBLIC
在JavaScript中我们如何实现class类的属性的访问限制呢？详解static，public，protected，private
博客简介
03-30 822
在JavaScript中我们如何实现class类的属性的访问限制呢？
js类中的static、public、private、protected
weixin_30685029的博客
08-30 1325
todo 转载于:https://www.cnblogs.com/wangtong111/p/11433563.html
JS实现class的私有属性
gaotlantis的博客
05-25 1567
在JavaScript中，类（Class）作为ES6引入的重要特性之一，为我们提供了更加面向对象的编程范式。然而，与一些其他编程语言（如Java或C#）不同，ES6中的类并没有直接支持私有属性或方法。尽管如此，随着JavaScript语言的不断演进，我们仍然可以通过一些技巧和模式来实现类似私有属性的功能。
js Class私有属性
Yan-note
09-11 2062
【代码】js Class私有属性。
JavaScript：如何获得 Private、Privileged、Public 和 Static 成员（属性和方法）【翻译+整理】...
weixin_34211761的博客
10-07 101
本文内容 背景 把我们的对象放在一起 添加一个私有（Private）的属性 添加一个特权（Privileged）的方法 添加一个公共（Public）的属性和方法 添加一个静态（Static）的属性 我们自己的完整对象 创建一个实例对象并检查可访问性 结论 ...
ES6 JavaScript 中的 Class 类继承详解
"ES6中的JavaScript Class类继承详解，包括基本用法、构造函数与super关键字的使用，以及对原型链的理解" 在ES6中，`Class`语法引入了一种新的面向对象编程的表达方式，使得类的继承更加简洁和直观。`Class`类继承...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值