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.constructor访问 | 通过this.constructor访问 |
类外公有方法(prototype定义) | X | √ | X | √ |
| 通过this访问 | 通过this访问 | 通过this访问 | 通过this.constructor访问 | 通过this.constructor访问 |
静态方法 | X | √ | X | √ | X | X | 通过this.prototype访问 | 通过this.prototype访问 | 通过this访问 | 通过this访问 |
上面针对JavaScript中属性和方法定义的各种方式进行分析,第二篇将对各种属性的使用进行分析和验证。他们的使用隐藏着不少的坑。