Atitit.javascript 实现类的方式原理大总结

Atitit.javascript 实现类的方式原理大总结

1. 实现类的式::构造方法方式;原型方式;构造方法+原型的混合方式 1

2. 原型方式(function mode)经典式。。实现属性推荐 1

3. this的注意事项 2

4. 原型方式 prototype,实现方法推荐 3

5. 混合方式(属性classic mode,方法propoty式),推荐
3

6. 私有方法 4

7. 静态的属性and方法... 5

8. 闭包式 5

9. mootools框架,感觉很不错,它对Javascript的类模拟就更完善了,还支持类的继承 5

10. 参考 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:[email protected]

转载请注明来源: 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

时间: 2024-11-03 21:58:07

Atitit.javascript 实现类的方式原理大总结的相关文章

JavaScript创建类的方式

一些写类工具函数或框架的写类方式本质上都是 构造函数+原型.只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码,或者说组织代码的方式使用面向对象方式.当然用JS也可写出函数式的代码,它是多泛型的. 为了讨论的单一性,暂不考虑类的继承,(私有,受保护)属性或方法.EMCAScript中实际没有类(class)的概念,但可以把它理解为更广义的概念. 1.构造函数方式 /** * Person类:定义一个人,有个属性name,和一个getName方法 * @param {Strin

JavaScript定义类的方式与其它OO语言有些差异

JavaScript面向对象的程序编写与其它OO语言有一些出入,所以使用JavaScript的面向对象特性的时候,需要注意一些规范性的问题.下面就简单地谈一下,JavaScript如何定义一个类,在定义类的过程中需要如何规范你的代码.定州市科技工业局 使用javascript来定义类的规范如下: 指定类名与构造函数,类名(构造函数名)首字母大写: function YourClass(){ } 使用"this.成员变量"在其构造函数内定义(伪)私有成员,最好约定(伪)私有成员都以&qu

JavaScript学习总结(十二)——JavaScript编写类

在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到的就是以下几种方式. 1.构造函数方式 用构造函数模拟"类",在其内部用this关键字指代实例对象. 基本语法: function 类名(){     this.属性名;//公共属性     var 属性名;//私有属性    /*凡是定义类的公共属性和公共方法都要使用this*/   

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl化 2 2.3. 依赖注入 2 2.4. 指令 2 3. 手动绑定数据spa方式以及与ajax 与dwr的集成 2 4. 格式化数据 2 4.1. 多字段组合格式化 3 4.2. 输出html 4 5. 输出作为函数参数调用 4 6. 加载完成事件 5 7. 常见错误 5 7.1. Atitit.a

JavaScript事件委托的技术原理

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

javascript继承的实现方式介绍

javascript继承的实现方式介绍:作为面向对象的一门语言,继承自然是javascript所比不可少的特性,下面就简单介绍一下javascript实现继承的几种方式,希望能够对需要的朋友带来一定的帮助,下面进入正题.一.对象冒充: function A() { this.name="蚂蚁部落"; this.address="青岛市南区"; } function B() { this.target="提供免费的教程"; this.newA=A;

Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构

1. 索引的分类1 1.1. 按照存储结构划分btree,hash,bitmap,fulltext1 1.2. 索引的类型  按查找方式分,两种,分块索引 vs编号索引1 1.3. 顺序索引  vs 散列索引2 1.4. 按索引与数据的查找顺序可分为 正排与倒排索引2 1.5. 单列索引与多列索引 复合索引2 1.6. 分区索引和全局索引 2 1.7.  Trie树一般指字典树 又称单词查找树,Trie树2 1.8. 稠密索引 vs 稀疏索引3 1.9. 多级索引 vs 单击索引3 1.10.

Atitit.数据索引&#160;的种类以及原理实现机制&#160;索引常用的存储结构

Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构 1. 索引的分类1 1.1. 索引的类型  按查找方式分,两种,分块索引 vs编号索引1 1.2. 按索引与数据的查找顺序可分为 正排与倒排索引1 1.3. 单列索引与多列索引2 1.4. 分区索引和全局索引 2 2. 索引建立,更新的流程使用触发更新索引的事件2 3. 索引常用的存储结构 B树文件 叫做“索引顺序存取方法”(Indexed Sequential Access Method),缩写为ISAM.2 4.  Trie

javascript继承—继承的实现原理(1)

打算针对js的继承写一系列文章,详细的分析js里继承原理,实现方式,各种继承方式的优缺点,以及最优继承方案,还有多继承的问题等-. 面向对象的编程的核心是封装.继承和多态,js可以看作是一种面向对象的语言,而面向对象的扩展性最核心的部分是多态,多态的必要条件有三个,首先就是继承,其次父类的引用指向子类,最后是方法重写.对于js来说,由于其创建对象的方式多种多样,因此,需要对父类的多种属性和方法实现很好的继承,就必须找到一个比较完善的方法.本篇文章首选介绍三种最基本的继承方式,并分析这几种继承方式