JS之原型链（prototype）

前言

  JavaScript中，也有继承，继承里面有原型，原型的使用又需要函数。使用原型具有一定的好处，可以减少变量的使用。

认识原型链

一、属性__proto__ 

  每一个对象都有个属性__proto__；

  __proto__ 就是对象的原型。

      

        var o={};
	alert(typeof o);        //运行得到 object
	alert(typeof Object);  //运行得到 function
		
	alert(o.__proto__);    //运行得到[object Object]
 

二、原型链关系图

（1）对象有原型，原型也是对象，也有原型；

（2）所有的函数都是对象，继承自Function.prototype--》Function.prototype是对象，继承自Object.prototype--》 Object.prototype是对象，继承自null；

（3）object是对象，继承自Object.prototype，

 Function是对象、函数，继承自Function.prototype。

层层调用原型的例子

一、代码

  

    <script type="text/javascript">
		
		var o={name:"我是老大"};
		var f1=function(){
		  this.name="我是二娃";
		};
		f1.prototype=o;
		var foo1=new f1();
		
		
		var f2=function(){
		  this.name="三妞";
		};
		
		var foo2=new f2();
		foo2.__proto__=foo1;
		
		var f3=function(){
		  this.name="我是四帅";
		};
		
		var foo3=new f3();
		foo3.__proto__=foo2; 
		alert(foo3.name);
	</script>

二、深入理解

 1.当前的输出结果是“我是四帅”；

 2.注释掉 f3中的语句，输出结果是：三妞；

var f3=function(){
 //this.name="我是四帅";
};

 3.继续注释掉f2中的语句，输出结果是：我是二娃；

var f2=function(){
   //this.name="三妞";
};

  

  通过这个过程可以看出，原型链中，读取对象的成员时，在当前位置找，找不到则向上级寻找。

关于原型的操作

1.读

   通过上面的例子，我们可以看出原型链中对象成员的读取过程，下面的例子，你能猜出结果是什么吗？

<script type="text/javascript">
	var person=function(){
	};
	person.prototype={name:"猜一猜"};
	var p=new person();          
	alert(p.name);		
 </script>

2.写，改

  （1）修改自身成员，从当前对象查找，无则创建出这个对象的成员；

<script type="text/javascript">
	
    var person=function(){
    };

     person.prototype={name:"梅里"};
	 
     var p1=new person();                                                                                           
     var p2=new person();	 
     p2.name="李敖";
     alert(p1.name);	//输出结果为：梅里	
	 
   </script>

  （2）修改原型对象的成员，直接修改； 

<script type="text/javascript">
	var person=function(){
	};
	person.prototype={name:"梅里"};
	    var p1=new person();
            var p2=new person();
	    p2.set_Name=function(value){
	        p2.__proto__.name=value;		
	    };
	    p2.set_Name("李敖");
	    alert(p1.name);	 //输出结果为 李敖	
 </script>

小结

   

   关于原型链的内容，还有其他的内容，比如使用它可以减少变量，避免出现作用域混乱的情况。

 感谢您的访问！