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>

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>

还有个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>

什么叫反编译文本呢？

看结果：

明白了吧。。

二、方法属性，及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>

结果：

 

在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