javascript的面向对象
JS的面向对象.
所谓JS面向对象当然不会像JAVA,AS3那样的完全面向对象语言所具有继承、多态,以及接口这样的概念。这里的面向对象只是创建JS“对象”后,调用“对象”中的方法。比如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <html> <head> <title>javascript_oop</title> <script type="text/javascript"> var Test = function() { // 私有属性 var key; // 私有方法 function private1() { alert ("测试私有方法private1"); } //测试私有 private1(); return { // 公用属性 p : 1, // 公用方法 getkey : function() { return this.key; }, setkey : function(key) { this.key = key; } }; }; // 测试公用 var t = new Test(); t.setkey(100); alert('调用公用属性:' + t.p); alert('调用公用方法:' + t.getkey()); function t1() { t.private1(); } </script> </head> <body> <a href="javascript:t1()">测试调用私有方法</a> </body> </html> |
首先创建的var Test = function() 可以看做一个类似java的类,类名就是Test。之后创建对象var t = new Test();的时候就执行了Test = 后面的匿名函数function() {}(就像JAVA的构造函数一样),里面return以外的部分类似JAVA中private私有的方法和属性,至于return里面就是公用的public方法和属性。其实到这就很明白了,就是return回来一个json当做公用,从而来达到类似“对象”的效果。
其中上面的js在运行过程中,第一次alert就是在创建对象的时候执行了类似JAVA的构造函数的匿名函数function() {},测试了私有方法的调用。之后的两次alert测试了公用属性和公用方法,如果你点击“测试调用私有方法”来调用对象“私有”的方法就会报错,因为这是不被允许的。
之后另一个实现JS对象,这是我在网络搜索的一个例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <html> <head> <title>javascript_oop2</title> </head> <body> <script type="text/javascript"> //构造函数 function Animal(name, sound, age) { this.name = name; this.sound = sound; this.age = age; } //类属性 Animal.description = 'animal'; //类静态方法 Animal.descript = function() { document.write('This is a \'' + this.description + '\' class!<br>'); } //实例后对象方法 Animal.prototype = { sayName:function(str) { document.write('My name is:' + this.name + str + '<br>'); }, shout:function() { document.write('My sound is:' + this.sound + '!!!<br>'); }, sayInfo:function() { document.write('Name = ' + this.name + '; Age = ' + this.age + '<br>'); } }; //测试类 Animal.descript(); var dog = new Animal('dog', 'wang wang', 5); var cat = new Animal('cat', 'miao miao', 3); dog.sayName('.--wang'); cat.sayName('.--miao'); dog.shout(); cat.shout(); dog.sayInfo(); cat.sayInfo(); </script> </body> </html> |
同样的道理不同的写法。
JQUERY的插件实现也用到了类似的方法,源码中jQuery.fn = jQuery.prototype={…},对jQuery类的prototype和jQuery.fn指向同一个对象。在我们开发插件的时候jQuery.fn.yourName = function() {} 就有点继承的感觉了。
3 Responses to “ javascript的面向对象 ”
-
看起来有点头疼。。。。
| 回复并邮件 -