JavaScript高级特性之原型

JavaScript的原型

原型prototype属性只适用于函数对象(这里的函数对象是自己为了理解更好定义的,普通对象是没有原型属性的)

1.研究函数原型：

<script type="text/javascript">
  	//原型是函数对象的一个属性(普通对象是没有原型属性的.).
	function Person(){
		this.name="李卫康";
		this.sayHi=function(){
			alert("Hi");
		}
	};
	//调用函数对象Hero的属性和方法:new Hero()
	var p=new Person();
	//调用函数对象Hero的属性或方法时,实际上调用new之后的hero对象.
	alert(p.name);
	//调用函数对象的原型属性,是应该调用Hero对象还是hero对象呢?
	alert(Person.prototype);

  </script>

javascript中没有类的概念，只有对象的概念.那么原型属性是定义在函数对象(相当于Java中的类)中,还是new的对象中呢.一般情况下我们研究是JavaScript的函数对象中的原型.

2.函数对象中增加属性和方法的方式(分散式和集中式)

定义函数对象：

function Person(){
		this.name="李卫康";
		this.sayMe=function(){
			alert("Hi");
		}
	}

(1)分散式定义属性和方法：

Person.prototype.value="是头猪";

Person.prototype.sayHi=function(){

alert("Hi");

}

通过new对象的方式测试：

var p=new Person();

alert(p.value);

p.sayHi();

(2).集中式为函数原型增加属性

Person.prototype={

value:"是猪";

sayHi:function(){alert("Hi");}

}

分散和集中式都可以为函数增加属性，但是我们推荐集中式的为函数增加属性

3.函数对象的属性或方法与原型的属性或方法同名时：

<script type="text/javascript">
  	//这表明了原型上的属性和方法加上去了但是优先级是函数对象上的属性和方法的优先级要高于函数对象的原型上的属性和方法的
  	/*
  	 * 函数对象的属性或方法与原型的属性或方法同名时:
  	 * 	* 调用的属性和方法,是函数对象的属性和方法
  	 * 	* 函数对象本身的属性和方法与原型的属性和方法同时存在
  	 * 	* 函数对象本身的属性和方法的优先级要高于原型上的熟悉感和方法
  	 */
	function Hero(){
		this.name = "李卫康";
		this.sayMe = function(){
			alert("我是李卫康.");
		}
	}

	//原型增加的属性和方法,到底有没有增加上去呢?
	Hero.prototype = {
		name : "周芷若",
		sayMe : function(){
			alert("我是周芷若.");
		}
	}

	var hero = new Hero();

	alert(hero.name);			//output	zhangwuji

	delete hero.name;

	alert(hero.name);			//output	zhouzhiruo

  </script>

测试：第一个打印的是李卫康.而不是周芷若.这说明函数原型中的属性和函数定义的重名的时候不会被覆盖..函数对象的是函数对象的 原型的是原型的....把函数对象中的属性删除后..我们在打印：周芷若...

4.利用原型重新定义函数对象：也就是说我们定义函数对象的时候定义一个空的,把所有的属性和方法定义在原型中.

<script type="text/javascript">
  	//定义一个空的函数
	function Person(){};
	//把属性和方法定义在函数原型上
	Person.prototype={
		name:"程崇树",
		seeAV:function(){
			alert("树哥喜欢蔡司！");
		}
	}
	var p=new Person();
	alert(p.name);
	p.seeAV();

  </script>

5.扩展内建对象的属性和方法(我们为Array对象增加了一个函数....)

<script type="text/javascript">
	Array.prototype.inArray=function(color){
		for(var i=0;i<Array.length;i++){
			if(this[i]=="red"){
				return true;
			}
		}
		return false;
	}
	var color=["red","blue"];
	alert(color.inArray("red"));

  </script>

版权声明：本文为博主原创文章，未经博主允许不得转载。