JavaScript面向对象（1）--属性和方法的定义

06 年就开始接触JavaScript，那是只是用JavaScript做前端验证。随着Ajax的兴起，基于JavaScript的富客户端开始大行其道。10年的时候开始使用各种JavaScript控件，当时还模仿其他控件的实现方式写了一个公式编辑器控件，粗略的学了一点JavaScript的面向对象知识。近期闲来无事，准备重新学习JavaScipt，并记录与此。

面向对象的核心概念包括：类、对象、公有属性、私有属性、静态属性、公有方法、私有方法和静态方法。

JavaScipt作为特殊的面向对象语言（相对于Java、C#而言）也能够实现这些概念，不过有些细微区别。

1、类

JavaScript中定义类有很多方法

 

1 //  定义1

2 function Class()

3 {

4 }

5 //定义2

6 Class = function ()

7 {

8 }

 

2、对象

object = new Class();

3、属性和方法

  1 function MyClass()

  2 {

  3     // 私有属性

  4         var privateName = "private";

  5     //注册到window对象的私有属性，可以通过Window访问，其他特性和私有方法一样

  6 　　 windowName = "window";

  7     // 公有属性1

  8     this.publicName1 = "public1";

  9     

 10     //私有方法

 11     var privateMethod = function(executeOtherMethod)

 12     {

 13         alert("privateMethod");

 14         //这里的this是window

 15         //可以访问私有属性

 16         alert(privateName);

 17         // 无法通过this访问私有属性，因为this就是window

 18         //alert(this.privateName);

 19         //可以访问window私有属性

 20         alert(windowName);

 21         // 可以通过this访问window私有属性，因为this就是window

 22         alert(this.windowName);

 23         // 无法访问公有属性

 24         //alert(publicName1);

 25         //alert(publicName2);

 26         // 无法访问静态属性

 27         //alert(staticName);

 28 

 29         //可以访问私有方法

 30         alert(privateMethod());

 31         alert(windowMethod());

 32         // 无法访问公有方法

 33         //alert(publicMethod1());

 34         //alert(publicMethod2());

 35         // 无法访问静态属性

 36         //alert(staticMethod());

 37     }

 38     

 39     //注册到window的私有方法，可以通过Window访问，其他特性和私有方法一样

 40     windowMethod = function()

 41     {

 42         alert("windowMethod");

 43         //这里的this是window

 44         //可以访问私有属性

 45         alert(privateName);

 46         // 无法通过this访问私有属性，因为this就是window

 47         //alert(this.privateName);

 48         //可以访问window私有属性

 49         alert(windowName);

 50         // 可以通过this访问window私有属性，因为this就是window

 51         alert(this.windowName);

 52         // 无法访问公有属性

 53         //alert(publicName1);

 54         //alert(publicName2);

 55         // 无法访问静态属性

 56         //alert(staticName);

 57 

 58         //可以访问私有方法

 59         alert(privateMethod());

 60         alert(windowMethod());

 61         // 无法访问公有方法

 62         //alert(publicMethod1());

 63         //alert(publicMethod2());

 64         // 无法访问静态属性

 65         //alert(staticMethod());

 66     }

 67     

 68     //调用私有方法，将在创建对象时调用

 69     //windowMethod();

 70     

 71     //公有方法1

 72     this.publicMethod1 = function()

 73     {

 74         alert("publicMethod1");

 75         //这里的this是类的实例对象

 76         //可以访问私有属性

 77         alert(privateName);

 78         alert(windowName);

 79         //通过this访问公有属性

 80         alert(this.publicName1);

 81         alert(this.publicName2);

 82         //通过this.constructor访问静态属性

 83         alert(this.constructor.staticName);

 84         

 85         //可以访问私有方法

 86         alert(privateMethod());

 87         alert(windowMethod());

 88         //通过this访问公有方法

 89         alert(this.publicMethod1());

 90         alert(this.publicMethod2());

 91         //通过this.constructor访问静态方法

 92         alert(this.constructor.staticMethod());

 93     }

 94 }

 95 //静态属性

 96 MyClass.staticName = "staticName";

 97 // 公有属性2

 98 MyClass.prototype.publicName2 = "public2";

 99 

100 //公有方法2

101 //注意：与类里定义的公有方法不同，无法访问私有属性和私有方法

102 MyClass.prototype.publicMethod2 = function()

103 {

104     alert("publicMethod2");

105     //这里的this是类的实例对象

106     //无法访问私有属性

107     //alert(privateName);

108     //可以访问window属性

109     alert(windowName);

110     //通过this访问公有属性

111     alert(this.publicName1);

112     alert(this.publicName2);

113     //通过this.constructor访问静态属性

114     alert(this.constructor.staticName);

115     

116     //无法访问私有方法

117     //alert(privateMethod());

118     //可以访问window方法

119     alert(windowMethod());

120     //通过this访问公有方法

121     alert(this.publicMethod1());

122     alert(this.publicMethod2());

123     //通过this.constructor访问静态方法

124     alert(this.constructor.staticMethod());

125 }

126 

127 //静态方法

128 MyClass.staticMethod = function()

129 {

130     alert("staticMethod");

131     //这里的this是类MyClass

132     //这里的this是类的实例对象

133     //无法访问私有属性

134     alert(privateName);

135     //可以访问window属性

136     alert(windowName);

137     //无法访问公有属性

138     //alert(this.publicName1);

139     //可以通过this.prototype访问publicName2

140     alert(this.prototype.publicName2);

141     //通过this.constructor访问静态属性

142     alert(this.staticName);

143     

144     //无法访问私有方法

145     //alert(privateMethod());

146     //可以访问window方法

147     alert(windowMethod());

148     //无法访问公有方法publicMethod1

149     //alert(this.publicMethod1());

150     //可以通过this.prototype访问publicMethod2

151     alert(this.prototype.publicMethod2());

152     //通过this访问静态方法

153     alert(this.staticMethod());

154 }

155 var object = new MyClass();

156 //可以直接访问注册到window的属性和方法

157 alert(windowName);

158 windowMethod();

159 //访问公有方法

160 object.publicMethod1();

161 object.publicMethod2();

162 //访问静态方法

163 MyClass.staticMethod();

164 object.constructor.staticMethod();

从上面的代码我们可以了解到一下内容：

（1）privateName和windowName都具有私有属性的特点，即可以在类内部访问，但windowName是注册到window对象中的（是window对象的一个属性）

（2）privateMethod和windowMethod与第一条相同，windowMethod是注册到window对象中的（是window对象的一个方法）

（3）私有方法privateMethod和windowMethod能够访问私有属性和私有方法，无法访问公共属性、公共方法、静态属性、静态方法，调用时this指向window

（4）类内通过this定义的公有方法publicMethod1可以直接访问私有属性和私有方法，调用时this指向类的实例，因此可以通过this访问公有属性和公有方法，通过this.constructor访问静态属性和静态方法

（5）类外通过prototype定义的公有方法publicMethod2无法访问私有属性和私有方法，调用时this指向类的实例，因此可以通过this访问公有属性和公有方法，通过this.constructor访问静态属性和静态方法

（6）静态方法staticMethod无法访问私有属性、私有方法、类内定义的公有属性、类内定义的公有方法，可以通过this.prototype访问通过prototype定义的公有属性和公有方法，可以通过this访问静态属性和静态方法

还是用表格总结一下比较清楚

	私有属性	window属性	私有方法	window方法	类内公有属性	类内公有方法	类外公有属性	类外公有方法	静态属性	静态方法
window	X	√	X	√	X	X	X	X	X	X
类	X	X	X	X	X	X	X	X	√	√
对象	X	X	X	X	√	√	√	√	通过constructor访问	通过constructor访问
私有方法	√	√	√	√	X	X	X	X	X	X
类内公有方法（this定义）	√	√	√	√	通过this访问	通过this访问	通过this访问	通过this访问	通过this.constructor访问	通过this.constructor访问
类外公有方法（prototype定义）	X	√	X	√	通过this访问	通过this访问	通过this访问	通过this访问	通过this.constructor访问	通过this.constructor访问
静态方法	X	√	X	√	X	X	通过this.prototype访问	通过this.prototype访问	通过this访问	通过this访问

上面针对JavaScript中属性和方法定义的各种方式进行分析，第二篇将对各种属性的使用进行分析和验证。他们的使用隐藏着不少的坑。