09 js自定义类与prototype关键字

js自定义类的理解

js自定义类，形式与功能上看起来就像java的类整体与类的构造方法的二合一。

在实例与类的关系上，又有点像java中子类与父类的关系，因为js的实例可以给自己添加自己的方法和属性。

js自定义类的声明

声明方式也用关键字function，类名第一个字母大写，可以有参数（形如构造方法）。

通过this定义每个类的实例拥有的变量和函数

function Person(name,age){
				this.name = name;
				this.age = age;
				this.fav = "唱歌";
				//自定义类方法
				this.test = new Function("alert('这是Person的函数test')");
				
			}

　　

类的实例(对象）

如下：

var p1 = new Person("小明",19);
			var p2 = new Person("小红",20);
			document.write(p1.name+"<br/>");
			document.write(p1.age+"<br/>");
			document.write(p1.fav+"<br/>");
			document.write(p1.test()+"<br/>");
			document.write(p2.name+"<br/>");
			document.write(p2.age+"<br/>");
			document.write(p2.fav+"<br/>");
			document.write(p2.test()+"<br/>");

　　运行结果：

小明

19

唱歌

undefined

小红

20

唱歌

undefined

创建的对象可以自行添加自己的方法和属性，其它对象无法访问这些属性和方法。

//添加实例的自定义方法和属性
			p1.run = function(){
				document.write("我在跑<br/>");
			}
			p1.run();
			// p2.run();无法执行，因为run函数时p1自定义的

　　

prototype关键字

prototype翻译为“原型”，我们通常说“原型空间”。

在js中，每一个对象（函数，类，实例）都有自己的prototype空间，它可以被自己的实例访问，例如类的prototype空间，可以被它的每个实例访问（有一点类似ava中的静态变量），也可以自己访问。

注意：

• 自己访问自己的prototype空间需要加关键字prototype，如Person类访问自己原型空间的变量number：Person.prototype.number，如果不加prototype访问的就是普通的类变量number了
• 实例可以直接使用 实例名.原型空间中的变量名 的方式访问原型空间中的变量，如Person类的一个实例p1访问Person类中的number变量可以直接书写为：p1.number，值得注意的是，如果Person类中使用this定义了一个同名的非prototype修饰的变量，则p1.number访问的时普通的number而不是原型空间的number
• 同样的实例也有自己的方法，身为一个Person类的实例p1也可以给自己的原型空间中添加变量和方法：p1.prototype.color = "red";

测试代码：

<script type="text/javascript">
			//自定义类
			function Person(name,age){
				this.name = name;
				this.age = age;
				this.number = 10;
				Person.prototype.number = 9;
				// this.fav = "唱歌";
				// //自定义类方法
				// this.test = new Function("alert('这是Person的函数test')");
				this.doSubstract = function(str){
					document.write(str+"对Person的原型空间的number做了-1操作！")
					Person.prototype.number--;
					document.write("<br />");
				}
				Person.prototype.cry = function(){
					document.write("55555555555");
				}
			}
			var p1 = new Person("小明",19);
			var p2 = new Person("小红",20);
			document.write(p1.name+"<br/>");
			document.write(p1.age+"<br/>");
			//p1访问Person的prototype原型空间的变量number
			document.write("p1访问了Person的原型空间的number变量："+p1.number+"<br/>");
			p1.doSubstract("p1");
			//p2也可以访问Person的prototype原型空间的变量number
			document.write("p2访问了Person的原型空间的number变量："+p2.number+"<br/>");
			//也可以访问用Person直接访问自己的prototype原型空间的变量number
			//但要加prototype关键字
			document.write("通过类（此Person类）直接访问自己原型空间的number变量："+Person.prototype.number+"<br/>");
			p1.cry();
			document.write("<br/>")
			Person.prototype.cry();
		
			</script>

　　

运行结果：

小明
19
p1访问了Person的原型空间的number变量：10
p1对Person的原型空间的number做了-1操作！
p2访问了Person的原型空间的number变量：10
通过类（此Person类）直接访问自己原型空间的number变量：8
55555555555
55555555555