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中属性和方法定义的各种方式进行分析,第二篇将对各种属性的使用进行分析和验证。他们的使用隐藏着不少的坑。