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>

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

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

  </script>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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>