`

JS面向对象编程总结三

    博客分类:
  • JS
阅读更多
<html>
        <head>
	<script type="text/javascript">
	     
	    
		
		
    //函数的prototype属性
    //每一个函数都包含了一个prototype(原型)属性,这个属性构成了javascript面向对象的核心基础
    //构造函数:new操作符用来生成一个新的对象.new后面必须要跟上一个函数,也就是我们常说的构造函数.
     
      function Person(name,sex) {   
    		this.name = name;   
    	this.sex = sex;   
		}   

    function test1()
    {
    	
    	
    	var per=new Person("latty","male");
    	alert("name:"+per.name+",_sex:"+per.sex);
    	
    }
    
    
    //工作步骤如下:	
    //1.开始创建了一个函数(不是方法,只是一个普通的函数),这里this关键字表示调用该方法的对象
    //通过对象调用"方法"的时候,this关键字会指向该对象(不使用对象直接调用该函数则this指向整个的script域,或者函数所在的域
    //2.我们使用new操作符时,javascript会先创建一个空的对象,然后这个对象被new后面的方法(函数)的this关键字引用!然后在方法中
    //通过操作this,就给这个新创建的对象相应的赋予了属性
    
    
    
    //prototype(原型)--
    //在javascript中,每个对象都有一个prototype属性,这个属性指向了一个prototype对象.
    //用new来创建一个对象的过程,当创建了空对象后,new会接着操作刚生成的这个对象的prototype属性.
    //每个方法都有一个prototype属性(因为方法本身也是对象),new操作符生成的新对象的prototype属性值和构造方法的prototype属性值是一致的.
    //构造方法的prototype属性指向了一个prototype对象,这个prototype对象初始只有一个属性constructor,而这个constructor属性又指向了prototype属性所在的方
    //法
    
    //当用构造函数创建一个新的对象时,它会获取构造函数的prototype属性所指向的prototype对象的所有属性.对构造函数对应的prototype对象
    //所做的任何操作都会反应到它所生成的对象身上,所有的这些对象共享构造函数对应的prototype对象的属性(包括方法

    
    
    function  test2()
    {
    	
    	Person.prototype.age=12; //为prototype属性对应的prototype对象的属性赋值
    	Person.prototype.print=function()//添加方法   

    	{
    		alert(this.name+"_"+this.sex+"_"+this.age);
    	};
    	
    	var p1 = new Person("name1","male");   
			var p2 = new Person("name2","male");   
			p1.print();  //name1_male_12   
			p2.print();  //name2_male_12   
			  
			Person.prototype.age = 18;  //改变prototype对象的属性值,注意是操作构造函数的prototype属性   
			p1.print();  //name1_male_18   
			p2.print();  //name2_male_18  
	
    }
    
    
    
    
    
    //当我们new了一个对象之后,这个对象就会获得构造函数的prototype属性(包括函数和变量),
    //可以认为是构造函数(类)继承了它的prototype属性对应的prototype对象的函数和变量
        
    function test3()
    {
				    	
				Person.prototype.age = 12;   //为Person类的prototype属性对应的prototype对象的属性赋值,   
				                             //相当于为Person类的父类添加属性   
				Person.prototype.print = function() { //为Person类的父类添加方法   
				    alert(this.name+"_"+this.sex+"_"+this.age);   
				};   
				  
				var p1 = new Person("name1","male"); //p1的age属性继承子Person类的父类(即prototype对象)   
				var p2 = new Person("name2","male");   
				  
				p1.print();  //name1_male_12   
				p2.print();  //name2_male_12   
				  
				p1.age = 34; //改变p1实例的age属性   
				p1.print();  //name1_male_34   
				p2.print();  //name2_male_12   
				  
				Person.prototype.age = 22;  //改变Person类的超类的age属性   
				p1.print();  //name1_male_34(p1的age属性并没有随着prototype属性的改变而改变)   
				p2.print();  //name2_male_22(p2的age属性发生了改变)
				
				
				delete p1.age //删除子类与父类同名的属性,从父类那里继承过来的属性就被暴露出来了!
				p1.print();  //name1_male_12!!!!!!!
				p2.print();  //name2_male_12  
				
				   
				  
				p1.print = function() {  //改变p1对象的print方法   
				    alert("i am p1");   
				}   
				  
				p1.print();  //i am p1(p1的方法发生了改变)   
				p2.print();  //name2_male_22(p2的方法并没有改变)   
				  
				Person.prototype.print = function() { //改变Person超类的print方法   
				    alert("new print method!");   
				}   
				  
				p1.print();  //i am p1(p1的print方法仍旧是自己的方法)   
				p2.print();  //new print method!(p2的print方法已经改变
				
				
				
        

    	
    }    
        
   //由上面可以看出prototype属性在javascript中模拟了父类(超类)的角色
   //当我们对这些实例对象的属性和方法重新赋值或定义后,那么实例对象的属性或方法就不再指向类的prototype属性中定义的属性和方法
   
   
   
   
   
   //在javascript中,所有的方法都有一个call方法和apply方法.这两个方法可以模拟对象调用方法.它的第一个参数是对象,后面的
   //参数表示对象调用这个方法时的参数

   function test4()
   {
   	var o = new Object();   //空对象   
		alert(o.name + "_" + o.sex); //undefined_undefined   
  
		Person.call(o,"sdcyst",1); //相当于调用:o.Person("sdcyst",1)   
		alert(o.name + "_" + o.sex); //sdcyst_1
		   
  
		Person.apply(o,["name",0]);//apply方法作用同call,不同之处在于传递参数的形式是用数组来传递   
		alert(o.name + "_" + o.sex); //name_0
		
		//实例变量和实例方法都是通过实例对象加"."操作符然后跟上属性名或方法名来访问的
		//这样就可以直接用类名加"."操作符然后跟上属性名或方法名来访问.  
	 }

	    
				
	</script>
         </head>
	<body>
		<input type="button" value="test1" onclick="test1();"/><br/> 
		<input type="button" value="test2" onclick="test2();"/><br/> 
		<input type="button" value="test3" onclick="test3();"/><br/>
		<input type="button" value="test4" onclick="test4();"/><br/>
	
	</body>
</html>
分享到:
评论

相关推荐

    Javascript面向对象编程.

    在提供的资源中,《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导,而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...

    JavaScript面向对象编程指南

    JavaScript面向对象编程指南

    JavaScript面向对象编程指南.pdf

    JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库

    JavaScript面向对象编程指南(第2版).rar

    JavaScript是一种广泛...通过深入学习这本《JavaScript面向对象编程指南(第2版)》,开发者不仅能掌握JavaScript的面向对象编程基础,还能了解到实际项目中如何有效地运用这些知识,提升编程技巧和解决问题的能力。

    javascript面向对象编程.pdf

    总而言之,学习现代JavaScript面向对象编程,有助于开发者在认识这门语言演化的基础上,运用面向对象的设计和编程模式来构建更加健壮和可维护的JavaScript应用程序。同时,测试和调试是保证代码质量不可或缺的环节,...

    JavaScript面向对象编程指南完整版

    JavaScript面向对象编程指南是完整的扫描版...

    JavaScript面向对象编程.pdf

    JavaScript面向对象编程.pdf

    JavaScript面向对象编程指南 pdf

    下面将详细探讨JavaScript面向对象编程的基本原理、特性以及实际应用。 1. **类与对象** - 在JavaScript中,对象是键值对的集合,可以通过字面量语法或构造函数创建。例如: ```javascript const person = { ...

    js 面向对象实例

    面向对象编程在JavaScript中的实现主要基于以下三个概念:构造函数、原型和实例化。构造函数是一个特殊类型的函数,用于创建和初始化一个新对象。当你定义一个构造函数时,实际上是在定义一个对象类型。例如: ```...

    JS面向对象编程

    javascript面向对象编程培训教程PPT

    javascript面向对象编程

    面向对象编程的基础知识及其在JavaScript中的运用;数据类型、操作符以及流程控制语句;函数、闭包、对象和原型等概念,以代码重用为目的的继承模式;BOM、DOM、浏览器事件、AJAX和JSON;如何实现JavaScript中缺失的...

    JavaScript面向对象编程

    JavaScript面向对象编程是一种基于原型(Prototype)的编程范式,它是动态类型语言,允许开发者创建具有复杂特性的对象。在JavaScript中,面向对象主要通过构造函数、原型链和闭包来实现。以下是对这一主题的详细...

Global site tag (gtag.js) - Google Analytics