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();