最近在学习网页上面的一些知识,从HTML到CSS,慢慢的就接触到了JavaScript,今天就来谈谈Javascript中的面向对象的一点知识,当是对自己这几天学到的东西的一点巩固,也谈谈一下自己的一点点淡淡的理解。
接触过面向对象语言的人都知道,Java语言无疑是面向对象思想最好的诠释者,今天要说的Javascript,前面也带一个Java,大家可能就会把Javascript和Java联系到一起,开始的时候我也以为他们是有着很亲密的关系,我还特意百度了一下Java和Javascript的关系,才知道他们两个的区别。以下来自百度。
“很多人看到 Java 和 JavaScript 都有“Java”四个字,就以为它们是同一样东西,其实它们是完完全全不同的两种东西。Java在客户端的运行的应用程序叫做 Java Applet,是嵌在网页中,而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的,一个 Applet 文件(.class)用 Notepad 打开阅读,根本不能理解。Java Applet 的功能很强大,可以访问 http、ftp等协议,甚至可以在电脑上种病毒(已有先例了)。相比之下,JavaScript 的能力就比较小了。JavaScript 是一种“脚本”(“Script”),它直接把代码写到 HTML 文档中,浏览器读取它们的时候才进行编译、执行,所以能查看 HTML 源文件就能查看JavaScript 源代码。JavaScript 没有独立的运行窗口,浏览器当前窗口就是它的运行窗口。
Java是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台的总称。用Java实现的HotJava浏览器(支持Java applet)显示了Java的魅力:跨平台、动感的Web、Internet计算。从此,Java被广泛接受并推动了Web的迅速发展,常用的浏览器现在均支持Java applet。另一方面,Java技术也不断更新。
Java平台由Java虚拟机(Java Virtual Machine)和Java 应用编程接口(Application Programming Interface、简称API)构成。Java 应用编程接口为Java应用提供了一个独立于操作系统的标准接口,可分为基本部分和扩展部分。在硬件或操作系统平台上安装一个Java平台之后,Java 应用程序就可运行。现在Java平台已经嵌入了几乎所有的操作系统。这样Java程序可以只编译一次,就可以在各种系统中运行。
Java分为三个体系JavaSE,JavaEE,JavaME”
通过上面的解释大家可能知道了Java和Javascript的区别,他们可以说是风马牛不相及,但是他们也有相似的地方,都有“面向对象”的思想在里面,下面就来说说Javascript中的面向对象,随便弄几个对象出来。
No.1:工厂模式的方法
/*工厂模式*/ function creatObject(name,age) { var obj = new Object(); //创建对象 obj.name = name; //添加属性 obj.age = age; obj.run = function() { //添加方法 return this.name + this.age; }; return obj; //返回对象 }; var box1 = creatObject('TMS',100); //生成对象 var box2 = creatObject('TNT',200);
No.2:使用构造函数
/*构造函数不用返回对象引用,不需要return语句,首字母必须大写,普通的方法名首字母小写如:function box();*/ function Box(name,age) { this.name = name; this.age = age; this.run = function() { return this.name + this.age; }; }; //实例化 var box1 = new Box('TMS',100); var box2 = new Box('TNT',103);
No.3:使用原型创建(JavaScript 是基于原型的语言)使用prototype关键字添加属性和方法
这样的构造有个缺陷就是实例化的对象中的属性是一样的,而且实例化的对象的地址也是一样的,有点坑。
//原型方式构造,属性和方法的地址是一样的,构造方法中是不一样的 function Box(){}; //构造函数中什么都没有 Box.prototype.name = 'TMS'; //原型属性 Box.prototype.age = '100'; //原型属性 Box.prototype.run = function() { //原型方法 return this.name+this.age; }; var box1 = new Box(); var box2 = new Box(); alert(box1.run()==box2.run()); //true;
No.4:使用字面量的方式创建原型对象,这和第三种方法相似,个人感觉就是把所有的属 性和方法写到一起了,没什么大的变化。
functoin Box(){}; //使用字面量的方式创建原型对象, Box.prototype = { name:'TMS'; age:'100'; run:function() { return this.name+this.age; }; }; var box1 = new Box(); //实例化对象
No.5:组合模式加原型函数,保持独立性(这是最好的一种方式了)看了就知道。
//组合模式加原型函数,保持独立性 function Box(user,age) { // 为保持独立性用构造方法 this.user = user; this.age = age; this.family=['aaa','ddd','jjj']; }; Box.prototype = { //为保持共享用原型 constructor:Box, //强制指向Box run:function() { return this.age+this.user; } }; var box1 = new Box('TMS','100'); var box2 = new Box('TNT','190'); box1.family.push('sss'); //实例化对象1中添加的值不会共享到实例化2中去,保持了独立性 //alert(box1.run()); alert(box1.family); //打印出‘aaa,ddd,jjj,sss’ //alert(box2.run()); alert(box2.family); //引用类型没有使用原型,所以没有共享,打印的还是'aaa,ddd,jjj'
No.6:寄生构造函数=工厂模式(有return)+构造函数(有构造函数的传参)
function Box(name,age) { var obj = new Object(); obj.name = name; obj.age = age; obj.run = function() { return this.name+this.age; }; return obj; } var box1 = new Box("TMS",'100'); //实例化对象 var box2 = new Box('TNT','100');
No.7:稳妥构造函数,里面不能用this,外面实例化对象不能用new(神一样的规定)
function Box(name,age) { var obj = new Object(); obj.name = name; //没有使用‘this'关键字 obj.age = age; obj.run = function() { return obj.name+obj.age; }; return obj; } var box1 = Box('TMs','100'); //实例化,注意没有用到'new'关键字 var box2 = Box('TNT','130');
以上的7种方法就是最近学到的Javascript中面向对象的东东,方法都感觉大同小异,有过一点面向对象知识的人都能理解那些简单的代码,但是每一种方法中更深层次的东西可能我还没有理解,比如底层的调用的一些机制,还有包括内存消耗,效率等等,望大神能解释!
PS:好了!睡觉!晚上吃多了会长胖!