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  √  通过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  通过this.prototype访问  通过this.prototype访问 通过this访问  通过this访问 

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

 

posted @ 2014-09-05 13:31  supermancoke  阅读(977)  评论(0编辑  收藏  举报