`
metallica_1860
  • 浏览: 32322 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

前台是个什么东西---JavaScript---JS面向对象

阅读更多

<html>
<head>
	
</head>
<body>
	<button onclick="person1.introduce()">person1</button>
	<button onclick="person2.introduce()">person2</button>
	<button onclick="person3.introduce()">person3</button>
	<button onclick="person4.introduce()">person4</button>
	<button onclick="checkFunc()">checkFunc</button>
	<button onclick="checkFuncByProto()">checkFuncByProto</button><br/>
	<button onclick="testCnstrct()">testCnstrct</button>
	<button onclick="testCnstrctpttp()">testCnstrctpttp</button>
	<button onclick="testDbproto()">testDbproto</button>
	<button onclick="JSONFontI()">JSONFontI</button>
	<button onclick="JSONFontII()">JSONFontII</button><br/>
	<button onclick="testFactory()">testFactory</button>
	<button onclick="testAbstractFactory()">testAbstractFactory</button>
	
	<script>
		var name = "1111111111"
		
		
		
		/********************************************/
		/* 第一种构建对象的办法*/
		/* ***推断***,{}即为对象.*/
		/********************************************/
		var person1 = {};
		person1.name = "junzi";
		person1.age = 23;
		person1.introduce = function () {
			alert("My name is " + this.name + ".I'm " + this.age);
		};
		
		
		
		/********************************************/
		/* 第二种构建对象的办法,类似JSON格式":"*/
		/********************************************/
		var person2 = {
			name: "junzi",
			age: 23,
			introduce: function () { 
							alert("My name is " + this.name + ".I'm " + this.age); 
						}
		};
		
		
		
		/********************************************/
		/* 第三种构建对象的办法,与Java中有些相似*/
		/********************************************/
		var Person = function () {
			this.name = "junzi";
			this.age = 23;
			this.introduce = function () {
								alert("My name is " + this.name + ".I'm " + this.age);
							};
		};
		var person3 = new Person();
		
		
		
		/********************************************/
		/* 第四种构建对象,与第三种类似,只不过参数通过new 构造传入 */
		/********************************************/
		var Person = function (name, age) {
			this.name = name;
			this.age = age;
			this.introduce = function () {
								alert("My name is " + this.name + ".I'm " + this.age);
							};
		};
		var person4 = new Person("junzi",23);
		
		
		
		/********************************************/
		/* 看看实例之间的关系@@ */
		/********************************************/
		var person5 = new Person("chaokong",23);
		function checkFunc(){
			alert(person4.introduce==person5.introduce);//结果是false,说明introduce有两个实现分别在4和5中
			alert(person4.age==person5.age);// 结果是true,说明基本类型的话之比较数值是否相同
			alert(person4.name==person5.name);// 如果两个名字值不同,则为false,***推测***在javascript中的变量比较的是值是否相同,而方法被视为对象.于是下边...
		}
		
		
		
		/********************************************/
		/* 通过prototype的方式 */
		/********************************************/
		var PersonI = function(name,age){
			this.name = name;
			this.age = age;
		}
		/*
		 * 在JavaScript中,prototype对象是实现面向对象的一个重要机制。
		 * 每个函数就是一个对象(Function),函数对象都有一个子对象,即prototype对象,类是以函数的形式来定义的。
		 * prototype表示该函数的原型,也表示一个类的成员的集合。
		 * 在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。
         * 1、该对象被类所引用,只有函数对象才可引用;
         * 2、在new实例化后,其成员被实例化,实例对象方可调用。
         * 同时,函数是一个对象,函数对象若直接声明成员,不用被实例化即可调用。 
         */
		PersonI.prototype.introduce = function(){
											alert("My name is " + this.name + ".I'm " + this.age);
										}
		var person6 = new PersonI("junzi",23);
		var person7 = new PersonI("chaokong",23);
		function checkFuncByProto(){
			alert(person6.introduce==person7.introduce);//
			alert(person6.age==person7.age);
			alert(person6.name==person7.name);
		}
		
		
		
		/********************************************/
		/* 研究研究prototype*/
		/********************************************/
		/*
		 * JavaScript中创建一个对象分以下几步:
		 * <1> var p={}; 也就是说,初始化一个对象p。
		 * <2> p.__proto__=Person.prototype;
		 * <3> Person.call(p);也就是说构造p,也可以称之为初始化p。
		 */
		var PersonII = function () { };
		//通过prototype创建一个方法
		PersonII.prototype.sayHello = function(){
			alert("hello");
		}
		var p = new PersonII();
		function testCnstrct(){
			alert(p.__proto__ === PersonII.prototype);
		}
		/*
		 * 首先var p=new PersonII();可以得出p.__proto__=PersonII.prototype。
		 * 那么当我们调用p.sayHello()时,首先p中没有sayHello这个属性,
		 * 于是,他就需要到他的__proto__中去找,也就是PersonII.prototype,
		 * 而我们在上面定义了PersonII.prototype.sayHello=function(){}; 
		 * 于是,就找到了这个方法。
		 */
		function testCnstrctpttp(){
			p.sayHello();
		}
		/** 继续...原型链 */
		PersonII.prototype.age = 23;// 设定PersonII的属性
		var Programmer = function () { };// 创建一个新对象Programmer,可以得出pp.__proto__ = Programmer.prototype;
		/*
		 * 设 var tempp = new PersonII();
		 * ∵ Programmer.prototype = new PersonII();
		 * ∴ Programmer.prototype = tempp;
		 *
		 * ∵ tempp.__proto__ = PersonII.prototype;
		 * ∴ Programmer.prototype.__proto__ = PersonII.prototype;
		 * 设  var pp = new Programmer();
		 * ∴ pp.__proto__ = Programmer.prototype。
		 * ∴ pp.__proto__.__proto__ = PersonII.prototype。
		 *
		 * 
		 * pp中没有sayHello()这个方法,所以到pp.__proto__中查找.
		 * pp.__proto__(也就是Programmer.prototype,也就是tempp,也就是PersonII(),)也没有sayHello()这个方法,所以到pp.__proto__.__proto__中查找
		 * pp.__proto__.__proto__也就是PersonII().prototype,在这里存在sayHello()这个方法
		 *
		 * age属性是同样的道理,只不过在Programmer.prototype的时候就已经找到age了,所以就不继续往下找了.
		 */
		 /* 这也就是原型链的实现原理。
		 * 其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,
		 * 他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!
		 */
		Programmer.prototype = new PersonII();// *** 
		Programmer.prototype.writeCode = function () {
			alert("print 'fuck the js with my jb'");
		};
		Programmer.prototype.age = 22;
		var pp = new Programmer();
		function testDbproto(){
			pp.sayHello();
			pp.writeCode();
			alert(pp.age);
		}
		
		
		
		/********************************************/
		/* JSON格式详细 */
		/********************************************/
		/* 1. */
		var PersonIII = {
			create: function (name, age) {
				this.name = name;
				this.age = age;
			},
			introduce: function () {
				alert("Hello,My name is " + this.name + ".I am " + this.age);
			}
		}
	
		function JSONFontI(){
			/* 
			 * 这样是不行的,因为piii = Person.__proto__,而没有这样的 XXX.__proto___=Person.prototype,所以找不到PersonIII内部的方法
			 * var piii = new PersonIII() 
			 * piii.create("junzi", 23);
			 * piii.introduce();
			 */
			 PersonIII.create("junzi", 23);
			 PersonIII.introduce();
		}
		
		/* 2. */
		/* 用X做一个中间变量,使得我们可以访问JSON对象的内部属性。*/
		function JSONFontII(){
			var x = function(){ };//必须有function()
			x.prototype = PersonIII;
			var px = new x();
			px.create("junzi", 23);
			px.introduce();
		}
		/* 3. */
		/* 工厂模式 */
		var Factory = {
			createPersonIII : function (className,name,age) {
								var temp = function () {
									className.create(name, age);
								};
								temp.prototype = className;
								var result = new temp();
								return result;
							}
		};
		function testFactory(){
			var person = Factory.createPersonIII(PersonIII,"junzi",23);
			person.introduce();
		}

		/* 4. */
		/* 抽象工厂模式 */
		var abstractFactory = {
			create: function (className, params) {
						var temp = function () {
								className.create.apply(this, params);
						};
						temp.prototype = className;
						var result = new temp();
						return result;
					}
		};
		function testAbstractFactory(){
			var person = abstractFactory.create(PersonIII,["junzi",23]);
			person.introduce();
		}
	</script>
</body>
</html>
 
分享到:
评论

相关推荐

    阿赖实用javascript控件程序

    javascript函数,与一般的javascript程序不同的是它是基于DOM(文档对象模型)和面向对象的方法设计,拥有属性、 方法和事件以及特定的界面元素。 写这些程序的目的是为了给大家提供更简单高效的WEB设计方法,提供...

    javastring赋值笔试题-jsoo:杰苏

    但是随着浏览器作为软件发布、运行的平台成熟起来,再加上NodeJS项目的兴旺,JS本身的进步和普及程度已经使它成为每一个前台软件工程师和全栈工程师必不可少的工具。 虽然这种语言已经强大到适用于大多数类型的后台...

    基于JavaScript和SpringMVC的个人博客网站系统,满分毕业设计!

    使用java面向对象的思想对类和接口进行设计,使网站具有可扩展性,便于维护等优点。 个人博客系统分为两个角色,分别是博主和游客。只有博主才能登录后台管理系统,进行博客发表。 1.首先要通过用户名和密码登录...

    快意编程EXT JS Web开发技术详解.part3

    《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...

    快意编程EXT JS Web开发技术详解.part2

    《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...

    快意编程EXT JS Web开发技术详解.part1

    《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...

    快意编程 EXT JS Web开发技术详解.pdf

    第3章 JavaScript面向对象技术 36 第4章 Ext JS框架 58 第5章 Ext JS开发模式 86 第6章 Ext JS布局 102 第7章 表单组件 125 第8章 表格组件 148 第9章 表格组件的扩充 170 第10章 树形组件 186 第11章 窗口组件 204 ...

    asp.net面试题

    1.面向对象的思想主要包括什么? 答:这个题范围太广,不知道说什么. 2.什么是ASP.net中的用户控件 答:用户控件就是.ascx扩展名的东西喽,可以拖到不同的页面中调用,以节省代码.比如登陆可能在多个页面上有,就可以做...

    Dojo 1.5源码包

    Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Core、Dijit、DojoX。 其中: Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。 Dijit是一个可更换皮肤,基于...

    asp.net知识库

    asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式:PageHandlerFactory 利用搜索引擎引用来高亮页面关键字 网站首页的自动语言切换 应用系统的多...

    H5智能内核-基于MVC架构的全新Zoomla!逐浪CMS2 x3.8发布

    众所周知,目前面向云与大数据是今天互联网的大势所趋,而MVC框架则是目前最流行的开发框架之一。 ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。 ASP.NET 支持三种不同的开发...

    Extjs 性能优化 High Performance ExtJs

    本文适合有一定javascript基础(明确js的面向对象,继承,作用域等)并能熟练使用extjs框架(明确各组件间的继承关系)的人阅读,目的在于对extjs的前台架构进行性能上的优化,核心思想为:“按需索取,晚使用,晚加载...

    基于JavaWeb的养老院管理系统的设计与实现毕业论文

    本篇分享一篇基于JavaWeb的养老院管理系统的...用面向对象的编程思想,按照软件工程的基本开发步骤进行系统分析、设计与实现。如上只是一个参考论文模板,感兴趣的自行下载学习,希望对大家有帮助。祝大家学业顺利!

    ASP.NET程序设计基础教程(第2版)陈长喜;例题源代码+课后习题源代码+上机实践源代码+课件

    本书详细阐述了开发ASP.NET Web应用程序的基础应用,从ASP.NET第一个程序的开发实践、JavaScript基础理论到内置对象、服务器控件、数据库操作技术、数据绑定技术、数据控件、数据验证技术,再到面向前台外观技术的...

    PHPlw格式化系统——前台的设计与实现(源代码+lw).zip

    我们的项目源码具有良好的可读性和可维护性,采用了面向对象的设计原则和模式。我们使用了MVC(Model-View-Controller)架构来分离业务逻辑和界面展示,以提高代码的可复用性和可测试性。我们还使用了依赖注入和面向...

    java-ee电子商城系统课程设计.doc

    Hibernate 是一个开放源代码的对象关系映射框架,它对JDBC 进行了非常轻量级的对象封装,使得Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。Hibernate 可以应用在任何使用JDBC 的场合, 既可以在Java 的...

    JavaEE软件工程师简历

    熟悉Java编程,有良好的算法和编码能力,熟悉面向对象编程 熟悉JavaWeb, JDBC, 熟悉Http协议。 熟悉Springmvc,Spring,MyBatis,了解Struts2, Hibernate等开源框架 熟练使用Eclipse、SVN、Maven项目管理和项目...

Global site tag (gtag.js) - Google Analytics