js学习笔记

以前学习javascript的记录,为了不丢失这个笔记,发到我的博客来。

一、apply及call的使用

1、apply的使用

<script language="javascript" type="text/javascript">
   /* 官方解释:应用某一对象的一个方法,用另一个对象替换当前对象。 
apply与call的区别是第二个参数不同。apply是 数组或者arguments 对象。而call是逗号隔开的任何类型。 */
    var Class = {
	
		create: function(){
		
			return function(){
				this.initialize.apply(this,arguments);				
			}
		}
	}
	
	var vehicle = Class.create();
	
	vehicle.prototype = {
	
		   initialize:function(type){
				this.type=type;
			},
			showSelf:function(){
				alert("this vehicle is "+ this.type);
			} 
	} 

	var moto = new vehicle("Moto");
	moto.showSelf();

</script>

)G~UAZF@T{}9{U)A~4ER6%E

2、用call实现继承

<script language="javascript" type="text/javascript">
    
   /** 用call实现继承**/
		
		function base(){
			
			this.member ="dnnsun_Member";
			
			this.method =function(val){
				alert( this.member );   
			}
			
		}
		
		function extend(){
			base.call(this);
		}
			
		obj1  = new extend();
		obj1.method();
		alert(obj1.member);
	
</script>

S@N)4TCQ~E@]_~]LX3JK3U1

还有个caller表示返回一个对函数的引用
<script language="javascript" type="text/javascript">
    
	/**
	 * caller 返回一个对函数的引用
	对于函数来说,caller 属性只有在函数执行时才有定义。
	如果函数是由顶层调用的(也就是直接调用该函数),那么 caller 包含的就是 null 。
	如果在字符串上下文中使用 caller 属性,那么结果和 functionName.toString一样,也就是说,显示的是函数的反编译文本。

	 */
	function callerDemo()
	{
	 	if(callerDemo.caller)
		{
			// 如果是被调用的,返回该调用函数的函数反编译文本
			//var a = callerDemo.caller;
			 var a =callerDemo.caller.toString();
			 
			alert(a);
			
		}else{
			//直接
			alert('this is a top function');
		}	
	}
	function handelCall()
	{
		callerDemo();
	}
	handelCall();
	//callerDemo();
</script>
什么叫反编译文本呢?

看结果:

@XDV]){8@9HZ5_9MM`B7UJC

明白了吧。。

二、方法属性,及prototype继承。

1、javascript中的方法,及属性。

<script language="javascript">
	function test()
	{
		
	}
	//定义静态方法ok
	test.ok =function ok(){
		alert("static ok");
	} 
	test.ok();

	test.prototype.ok = function(){ 
					
	    alert("ok");
	}
       var  A = new test();
	A.ok();
	
  name ="zhou";
  //另外一种定义属性和方法
  function test(){
  	var name ="james";
	
	
	var age ="88";
	
	this.getName =function(){
			
			return name;
	}
	this.getAge =function(){
			
			return age;
	}
	
  }
  test = new test();
  alert(test.getName());
   
</script>

结果:


BG3XL[DJ(`}]VGIFL)K@WAJ

 

N8%BQ30APPP9{N5WSDND9BF
 
在test.getName中得到的是什么值呢?是 james还是zhou呢?

 

 

 

 

 

 

 

 

 

 

 

 

这里的结果是james。为什么呢?

在js中如果被var申明了的变量属于局部的变量,没有关键字var申明的变量属于windos对象的变量,也就是全局的,所以这里输出的是james。

2、用prototype实现继承

1)prototype继承实现

               //定义extend静态方法 
		Object.extend = function(destination, source) {  
			  for (property in source) {  
				destination[property] = source[property];  
			  }  
			  return destination;  
		} 
		Object.prototype.extend = function(object) {  
		  return Object.extend.apply(this, [this, object]);  
		} 
		//定义class1 
		function class1(){ 
		  //构造函数 
		} 
		//定义类class1的成员 
		class1.prototype={ 
		  method:function(){ 
			alert("class1"); 
		  }, 
		  method2:function(){ 
			alert("method2"); 
		  } 
      } 
	  
		//定义class2 
		function class2(){ 
		  //构造函数 
		}
		 
		//让class2继承于class1并定义新成员 
		class2.prototype=(new class1()).extend({ 
		  method:function(){ 
			alert("class2"); 
		  } 
		}); 
		 
		 
		//创建两个实例 
		var obj1=new class1(); 
		var obj2=new class2(); 
		//试验obj1和obj2的方
		obj1.method(); 
		obj2.method(); 
		obj1.method2(); 
		obj2.method2(); 

结果:

class1

class2

method2

method2

我们可以看出class2继承了class1的方法。

2)一种失败的继承实现方法,看看为什么会失败。

//实现类的继承失败 

   function class1(){
   		
   }
 
   class1.prototype={
   		name:"class1",
		fun1: function(){
			alert(1);
		}
   }
   
   function class2(){
  	
   		
   }
 
  // 在javascript中除了基本的数据类型(string bool number等) 所有的赋值以及函数参数都是引用传递 
   class2.prototype = class1.prototype ;
   
   class2.prototype.method =function(){
   		alert(2);
   }
   
   obj1 =new class1();
   obj2 =new class2();
   
 
   
   obj1.method();
   obj2.method();
 
结果是:
obj1是父类,但是也有method方法。
obj1和obj2都输出2;
3)prototype继承实现
Function.prototype.inherit=function(baseClass){
  
  		for(var p in baseClass.prototype){
			
			this.prototype[p] =baseClass.prototype[p];
		}
  }
  
  function class1(){
  	
  }
  class1.prototype ={
  	
	method1:function(){
		
		alert("method1");	
		
	  },
	method2:function(){
		alert("method2");
	}
  
  }
  function class2(){
  
  }
  class2.inherit(class1);
 
  obj2 =new class2();
  obj2.method1();

 

4)最老土的实现。

  function class1(){
  	
  }
  class1.prototype ={
  	
	method1:function(){
		
		alert("method1");	
		
	  },
	method2:function(){
		alert("method2");
	}
  
  }
  function class2(){
  
  }
  
  //让class2继承自class1
  for(var p in class1.prototype){
  	
		class2.prototype[p] =class1.prototype[p];
  	
  }
  class2.prototype.method1= function(){
  			
			alert("newsmethod");
			
  }
  
  obj1 =new class1;
  obj2 =new class2;
  
  obj1.method1();
  obj2.method1();


转载于:https://www.cnblogs.com/phpzxh/archive/2010/12/24/1915406.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值