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
Atitit.javascript 实现类的方式原理大总结的更多相关文章
- JavaScript定义类的方式与其它OO语言有些差异
JavaScript面向对象的程序编写与其它OO语言有一些出入,所以使用JavaScript的面向对象特性的时候,需要注意一些规范性的问题.下面就简单地谈一下,JavaScript如何定义一个类,在定 ...
- JavaScript创建类的方式
一些写类工具函数或框架的写类方式本质上都是 构造函数+原型.只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码,或者说组织代码的方式使用面向对象方式.当然用JS也可写出函数式的代码 ...
- JavaScript学习总结(十二)——JavaScript编写类
在工作中经常用到JavaScript,今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点,关于JavaScript编写类的方式,在网上看到很多,而且每个人的写法都不太一样,经常看到 ...
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)
c#封装DBHelper类 public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...
- javascript创建类的6种方式
javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...
- [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】
[原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言 最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...
- javascript定义类或对象的方式
本文介绍的几种定义类或对象的方式中,目前使用最广泛的是:混合的构造函数/原型方式.动态原型方式.不要单独使用经典的构造函数或原型方式. 工厂方式 构造器函数 原型方式 混合的构造函数/原型方式 动态原 ...
- JavaScript中定义类的方式详解
本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...
- JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档
作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...
随机推荐
- Linux编程下EAGAIN和EINTR宏的含义及处理
Linux中的EAGAIN含义 在Linux环境下开发经常会碰到很多错误(设置errno),其中EAGAIN是其中比较常见的一个错误(比如用在非阻塞操作中). linux下使用write\send ...
- win7 64位 mongodb2.6.0 安装服务启动
Workaround to install as a service You can manually install 2.6.0 as a service on Windows from an Ad ...
- 剑指offer题目61-67
面试题61:把二叉树打印成多行 public class Solution { public ArrayList<ArrayList<Integer> > Print(Tree ...
- Android编译环境搭建(0818-0819)
1 在虚拟机VMware上安装64位Ubuntu14.04LTS 首先需要安装虚拟机并激活.然后新建虚拟机,选择使用下载好的Ubuntu镜像.注意需要将光驱改为自己下载的,而不是autoinst.is ...
- Java中的转义字符
1.转义字符 1.八进制转义序列:\ + 1到3位5数字:范围'\000'~'\377' \0:空字符 2.Unicode转义字符:\u + 四个十六进制数字:0~65535 \u ...
- UIView.FRAMEWORK
uiview .framework 有太多 属性到现在基本上没怎么接触,今天开始用到了就纪录一下,有空在去了解了: [self.view bringToFront:btn] 把btn 放到self.v ...
- LeetCode OJ-- String to Integer (atoi) **
https://oj.leetcode.com/problems/string-to-integer-atoi/ 细节题,把一个字符串转换成整数 class Solution { public: in ...
- struts2中的constant配置详解
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...
- Python 迭代dict 效率
迭代dict也要讲求效率,不然就要走进性能陷阱 以下三种迭代方式:keys,iterkeys, hashkey import timeit DICT_SIZE = 100 * 100000 testD ...
- Linux内核分析之扒开系统调用的三层皮(上)
一.原理总结 本周老师讲的内容主要包括三个方面,用户态.内核态和中断,系统调用概述,以及使用库函数API获取系统当前时间.系统调用是操作系统为用户态进程与硬件设备进行交互提供的一组接口,也是一种特殊的 ...