Atitit.javascript 实现类的方式原理大总结
Atitit.javascript 实现类的方式原理大总结
1. 实现类的式::构造方法方式；原型方式；构造方法+原型的混合方式 1
2. 原型方式（function mode）经典式。。实现属性推荐 1
5. 混合方式(属性classic mode,方法propoty式),推荐 3
9. mootools框架，感觉很不错，它对Javascript的类模拟就更完善了，还支持类的继承 5
1. 实现类的式::构造方法方式；原型方式；构造方法+原型的混合方式
2. 原型方式（function mode）经典式。。实现属性推荐
· //创建一个Student类
· function Student(name){
· this.name = name;
· this.sayName = function(){
· alert(this.name);
· };
· }
· //new两个不同的Student.
· var jimmy = new Student('jimmy');
· var henry = new Student('henry');
方法简单明了, 也符合JAVAer的胃口, 但是每new一个新对象, 就会在内存中分配一个sayName方法, 性能不是很好
作者:: 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://blog.csdn.net/attilax
3. this的注意事项
根据笔者的经验，类中的this并不是一直指向我们的这个对象本身的，主要原因还是因为Javascript并不是OOP语言，而且，函数和类均用function定义，当然会引起一些小问题。
this指针指错的场合一般在事件处理上面，我们想让某个对象的成员函数来响应某个事件，当事件被触发以后，系统会调用我们这个成员函数，但是，传入的this指针已经不是我们本身的对象了，当然，这时再在成员函数中调用this当然会出错了。
解决方法是我们在定义类的一开始就将this保存到一个私有的属性中，以后，我们可以用这个属性代替this。我用这个方法使用this指针相当安全，而且很是省心～
|
function Shape(ax,ay) |
|
02 |
{ |
|
03 |
var _this=this; //把this保存下来，以后用_this代替this，这样就不会被this弄晕了 |
|
04 |
var x=0; |
|
05 |
var y=0; |
|
06 |
_this.gx=0; |
|
07 |
_this.gy=0; |
|
08 |
var init = function() |
|
09 |
{ |
|
10 |
x=ax;//访问私有属性，直接写变量名即可 |
|
11 |
y=ay; |
|
12 |
_this.gx=ax;//访问公有属性，需要在变量名前加上this. |
|
13 |
_this.gy=ay; |
|
14 |
}; |
|
15 |
init(); |
|
16 |
} |
4. 原型方式 prototype,实现方法推荐
原型方式
1. //创建一个Student类
2. //属性和方法都通过Student.prototype设置
3. function Student(name){
4. Student.prototype = name;
5. Student.prototype.sayName = function(){
6. alert(this.name);
7. }
8. }
9. //new两个不同的Student.
10. var jimmy = new Student('jimmy');
11. var henry = new Student('henry');
12. jimmy.sayName();//显示henry!!!
13. henry.sayName();//显示henry!!!
也许执行的代码和有些童鞋的期望有出入. 两次alert都弹出henry! 其实很好理解. 属性和方法都通过prototype设置. 不同对象的同一个属性或者方法都指向同一个内存, 所以henry是在jimmy后设置的. 所以henry把jimmy覆盖了.
5. 混合方式(属性classic mode,方法propoty式),推荐
构造方法的方式可以为同一个类的每一个对象分配不同的内存, 这很适合写类的时候设置属性,
但是设置方法的时候我们就需要让同一个类的不同对象共享同一个内存了. 写方法用原型的方式最好. 所以写类的时候需要把构造方法和原型两种方式混合着用.
· /创建一个Student类
· //属性通过构造方法设置
· //方法通过Student.prototype设置
· function Student(name){
· this.name = name;
· Student.prototype.sayName = function(){
· alert(this.name);
· }
· }
· //new两个不同的Student.
· var jimmy = new Student('jimmy');
· var henry = new Student('henry');
· jimmy.sayName();//显示jimmy
· henry.sayName();//显示henry
6. 私有方法
|
function Shape() |
|
2 |
{ |
|
3 |
var x=0; |
|
4 |
var y=1; |
|
5 |
var draw=function() |
|
6 |
{ |
|
7 |
//print; |
|
8 |
}; |
|
9 |
} |
这样就不能使用aShape.draw调用这个函数了。
|
8 |
}; |
|
|
|
6.1.1.1. 构造函数
Javascript并不支持OOP，当然也就没有构造函数了，不过，我们可以自己模拟一个构造函数，让对象被创建时自动调用，代码如下：
|
1 |
function Shape() |
|
2 |
{ |
|
3 |
var init = function() |
|
4 |
{ |
|
5 |
//构造函数代码 |
|
6 |
}; |
|
7 |
init(); |
|
8 |
} |
7. 静态的属性and方法...
|
Shape.count=0;//定义一个静态属性count，这个属性是属于类的，不是属于对象的。 |
|
14 |
Shape.staticMethod=function(){};//定义一个静态的方法 |
8. 闭包式
Var x={ all code };
这个ide可以显示有问题,还是不推荐...不过一瓦类库是中个方式的...
9. Js oop 框架--- mootools框架，感觉很不错，它对Javascript的类模拟就更完善了，还支持类的继承
10. 参考
JavaScript如何实现类 -- 简明现代魔法.htm
实现JavaScript编写类的方式 - 51CTO.COM.htm
